PWA学习心得,改造你的网站

2019-11-13 20:13栏目:web网络
TAG:

示例代码

大多数教程都讲述的是如何在Chrome上从零开始制作一个类似原生界面的应用。然而在这篇教程中,我们并不打算做一个单页面应用程序,所以在这我们也不必了解诸如Material Design等知识。那么下面我们就直接看示例吧。

你可以从GitHub中获取本教程对应的示例代码。

本示例中提供了一个有四个网页的网站,一个CSS文件和一个JavaScript文件。这个网站可以在所有的现代浏览器上正常工作(IE10+)。如果你的浏览器支持渐进式Web应用,用户可以在离线状态下将会直接访问缓存中的页面。

要想运行此示例,请确保你已经安装了Node.js。并请打开命令行,使用以下命令来运行该示例:

node ./server.js [port]

1
node ./server.js [port]

以上命令中,[port]是可选部分,默认为8888。使用 Ctrl + C 即可停止Web服务器。

打开基于Blink内核的浏览器(Opera,Vivaldi,Chrome),然后在地址栏中输入 或者 Cmd/Ctrl + Shift + I)来查看控制台信息。

澳门新葡亰平台游戏 1澳门新葡亰平台游戏 2

查看首页,也可以在页面上点击一下,然后使用以下方法进入离线模式:

选中Network标签或者Application -> Service Workers 标签下的“离线”选项。重新访问之前访问过的网页,之前网页仍然会加载:

澳门新葡亰平台游戏 3澳门新葡亰平台游戏 4

再来一步 - 第四步:创建一个可用的离线页面

离线页面可以是一个静态页面,来说明当前用户请求不可用。然而,我们也可以在这个页面上列出可以访问的页面链接。

main.js中我们可以使用 Cache API 。然而API 使用promises,在不支持的浏览器中会引起所有javascript运行阻塞。为了避免这种情况,我们在加载另一个 /js/offlinepage.js 文件之前必须检查离线文件列表和是否支持 Cache API 。

// load script to populate offline page list
if (document.getElementById('cachedpagelist') && 'caches' in window) {
  var scr = document.createElement('script');
  scr.src = '/js/offlinepage.js';
  scr.async = 1;
  document.head.appendChild(scr);
}

/js/offlinepage.js locates the most recent cache by version name, 取到所有 URL的key的列表,移除所有无用 URL,排序所有的列表并且把他们加到 ID 为cachedpagelist的 DOM 节点中:

// cache name
const
  CACHE = '::PWAsite',
  offlineURL = '/offline/',
  list = document.getElementById('cachedpagelist');

// fetch all caches
window.caches.keys()
  .then(cacheList => {

    // find caches by and order by most recent
    cacheList = cacheList
      .filter(cName => cName.includes(CACHE))
      .sort((a, b) => a - b);

    // open first cache
    caches.open(cacheList[0])
      .then(cache => {

        // fetch cached pages
        cache.keys()
          .then(reqList => {

            let frag = document.createDocumentFragment();

            reqList
              .map(req => req.url)
              .filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL))
              .sort()
              .forEach(req => {
                let
                  li = document.createElement('li'),
                  a = li.appendChild(document.createElement('a'));
                  a.setAttribute('href', req);
                  a.textContent = a.pathname;
                  frag.appendChild(li);
              });

            if (list) list.appendChild(frag);

          });

      })

  });

2.7 其它 详细API

什么是渐进式Web应用?

渐进式Web应用是一种全新的Web技术,让Web应用和原生APP的体验相近或一致。

渐进式Web应用它可以横跨Web技术及Native APP开发的解决方案,对于开发者的优势如下:

  1. 你只需要关心W3C的Web标准,不用关心各种Native APP的代码。
  2. 用户可以在安装应用之前先试用。
  3. 在渐进式Web应用中,你不需要使用各种应用商店来分发应用,也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成。另外,应用程序更新是自动进行的,无需用户交互,所以整体的使用体验对于用户来讲更为的平滑。
  4. 渐进式Web应用的“安装”过程很快,只需要在主屏幕上添加一个图标即可。
  5. 渐进式Web应用启动时可以显示一个好看的启动画面。
  6. 你可以在渐进式Web应用中提供具有全屏体验的应用。
  7. 通过系统通知等形式提高用户的粘性。
  8. 渐进式Web应用将会在本地缓存必要的文件,所以渐进式Web应用会比普通的Web应用的性能更好。
  9. 轻量级安装——你只需要缓存几百KB的数据即可。
  10. 所有的数据传输必须使用安全的HTTPS连接
  11. 渐进式Web应用可以离线缓存数据,并且会在重新连接互联网时重新同步数据。

URL 隐藏

我们的示例代码隐藏了 URL 栏,我不推荐这种做法,除非你有一个单 url 应用,比如一个游戏。对于多数网站,manifest 选项 display: minimal-ui 或者 display: browser是最好的选择。

   它是一个外链的js文件,如 /sw.js

渐进式Web应用(PWA)入门教程(上)

2018/05/23 · 基础技术 · PWA

原文出处: Craig Buckler   译文出处:葡萄城控件   

最近关于渐进式Web应用有好多讨论,有一些人还在质疑渐进式Web应用是否就是移动端未来。

但在这篇文章中我并不会将渐进式APP和原生的APP进行比较,但有一点是可以肯定的,这两种APP的目标都是使用户体验变得更好。

移动端Web应用有很多优秀的概念让人应接不暇,但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换成渐进式Web应用。你可以按照这篇文章一步一步地做,做完之后你的网站将可以实现离线访问,并且可以在桌面上创建该网站的图标。那么下面即将开始入门教程。

第一步:开启 HTTPS

由于一些显而易见的原因,PWAs 需要 HTTPS 连接。

HTTPS 在示例代码中并不是必须的,因为 Chrome 允许使用 localhost 或者任何 127.x.x.x 的地址来测试。你也可以在 HTTP 连接下测试你的 PWA,你需要使用 Chrome ,并且输入以下命令行参数:

  • --user-data-dir
  • --unsafety-treat-insecure-origin-as-secure

澳门新葡亰平台游戏 5

小结

通过本节对渐进式Web应用的介绍,相信大家对PWA是什么已经有了基本的认识。PWA有无需担心有无网络的特点,并具有独立入口与独立的保护机制。新标准的推出很可能会带着 Web 应用在移动设备上浴火重生。所以满足 PWA 模型的前端控件,如纯前端表格控件SpreadJS,将逐渐成为移动操作系统的一等公民,并将向Native APP发起挑战。

在下节中我们将带你一起去看看,PWA的原理是什么,以及它究竟是如何工作的,敬请期待。

1 赞 1 收藏 评论

澳门新葡亰平台游戏 6

缓存太多

你可以缓存你网站的所有页面和所有静态文件。这对于一个小网站是可行的,但这对于上千个页面的大型网站实际吗?没有人会对你网站的所有内容都感兴趣,而设备的内存容量将是一个限制。即使你像示例代码一样只缓存访问过的页面和文件,缓存大小也会增长的很快。

也许你需要注意:

  • 只缓存重要的页面,类似主页,和最近的文章。
  • 不要缓存图片,视频和其他大型文件
  • 经常删除旧的缓存文件
  • 提供一个缓存按钮给用户,让用户决定是否缓存

< link rel= "manifest" href= "manifest.json" />

渐进式Web应用发展的现状

渐进式Web应用才刚刚开始发展,但实际上在国内,有些网站已经实际开始PWA的实践了,例如:微博、豆瓣、淘宝等平台。可能这时候聪明的你可能就会产生疑问,那这个PWA不就是和微信小程序一样吗,对是这样,二者的目的是一致的,就是在移动端为用户提供足够轻量且与原生应用使用体验相近的“轻”应用。

但就目前来讲,PWA是Google主推的一项技术标准,FireFox,Chrome以及一些基于Blink的浏览器已经支持渐进式Web应用了,Edge上对渐进式Web应用的支持还在开发。Apple公司也表示会考虑在自己Safari支持PWA。然而这项功能已经进入了WebKit内核的五年计划中。长期来看,对浏览器兼容性的支持方面应该已经不算太大问题了。况且在现阶段,在不支持渐进式Web应用的浏览器中,你的应用也只是无法使用渐进式Web应用的离线功能而已,除此之外的功能均可以正常使用。

而在微信这边,凭借庞大的用户基数和体量能否与PWA分庭抗礼乃至笑到最后目前还不得而知。

好消息是开发一个 PWA 并不难。事实上,我们可以将现存的网站进行改进,使之成为PWA。这也是我这篇文章要讲的 -- 当你读完这篇文章,你可以将你的网站改进,让他看起来就像是一个 native web app。他可以离线工作并且拥有自己的主屏图标。

澳门新葡亰平台官网,if  ( 'serviceWorker' in navigator ) {
navigator .serviceWorker.register( '/service-worker.js' )
    . then ( function (reg)  {
console . log ( 'Service Worker registered' , reg) ;
})
    .catch( function  (error)  {
console . error ( 'Error registering  Service  Worker' , error) ;
}) ;
}

连接移动端安装

除了在PC浏览器访问外,你也可以在移动设备上访问该示例。使用USB线缆将你的移动设备连接到电脑上,然后从右上角三个点菜单中打开More tools – Remote devices标签

澳门新葡亰平台游戏 7澳门新葡亰平台游戏 8

点击左侧的Settings菜单,然后添加一条端口映射(Port Forwarding)的规则,将8888映射为localhost:8888,现在你可以直接在手机打开Chrome然后访问http://localhost:8888 。

你可以使用浏览器的“添加到主屏幕”功能将当前网页添加到主屏幕,在你访问了几个页面之后,浏览器会将这个Web应用“安装”到你的设备上。浏览几个页面,关闭Chrome并将设备与电脑断开连接,点击桌面上生成的图标,你会看到一个Splash页面,并且你可以继续浏览之前浏览过的页面。

澳门新葡亰平台游戏 9澳门新葡亰平台游戏 10

PWA 陷阱

有几点需要注意:

经过 Service Worker 的 fetch 请求 Chrome 都会在 Chrome DevTools Network 标签页里标注出来,其中:

PWAs 是渐进增强的

你的app仍然可以运行在不支持 PWA 技术的浏览器里。用户不能离线访问,不过其他功能都像原来一样没有影响。综合利弊得失,没有理由不把你的 app 改进为 PWA。

 

Activate 事件

当 install完成后, service worker 进入active状态,这个事件立刻执行。你可能不需要实现这个事件监听,但是示例代码在这里删除老旧的无用缓存文件:

// clear old caches
function clearOldCaches() {

  return caches.keys()
    .then(keylist => {

      return Promise.all(
        keylist
          .filter(key => key !== CACHE)
          .map(key => caches.delete(key))
      );

    });

}

// application activated
self.addEventListener('activate', event => {

  console.log('service worker: activate');

    // delete old caches
  event.waitUntil(
    clearOldCaches()
    .then(() => self.clients.claim())
    );

});

注意,最后的self.clients.claim()方法设置本身为active的service worker。

澳门新葡亰平台游戏 11

第三步:创建一个 Service Worker

Service Worker 是拦截和响应你的网络请求的编程接口。这是一个位于你根目录的一个单独的 javascript 文件。

你的 js 文件(在示例代码中是 /js/main.js)可以检查是否支持 Service Worker,并且注册:

if ('serviceWorker' in navigator) {

  // register service worker
  navigator.serviceWorker.register('/service-worker.js');

}

如果你不需要离线功能,可以简单的创建一个空的 /service-worker.js文件 —— 用户会被提示安装你的 app。

Service Worker 很复杂,你可以修改示例代码来达到自己的目的。这是一个标准的 web worker,浏览器用一个单独的线程来下载和执行它。它没有调用 DOM 和其他页面 api 的能力,但他可以拦截网络请求,包括页面切换,静态资源下载,ajax请求所引起的网络请求。

这就是需要 HTTPS 的最主要的原因。想象一下第三方代码可以拦截来自其他网站的 service worker, 将是一个灾难。

service worker 主要有三个事件: installactivatefetch

 安卓真机 debug

连接手机

你也可以通过 USB 连接你的安卓手机来预览示例网页。在开发者工具中打开 Remote devices 菜单。

澳门新葡亰平台游戏 12

在左边选择 Settings ,点击 Add Rule 输入 8888 端口。你可以在你的手机上打开Chrome,打开 http://localhost:8888/。

你可以点击浏览器菜单里的 “Add to Home screen”。浏览几个页面,浏览器会提醒你去安装。这两种方式都可以创建一个新的图标在你的主屏上。浏览几个页面后关掉Chrome,断开设备连接。你依然可以打开 PWA Website app -- 你会看到一个启动页,并且可以离线访问之前你访问过的页面。

将你的网站改进为一个 Progressive Web App 总共有三个必要步骤:

 https://app-mani f est.firebaseapp.com/

Fetch 事件

当有网络请求时这个事件被触发。它调用respondWith()方法来劫持 GET 请求并返回:

  1. 缓存中的一个静态资源。

  2. 如果 #1 失败了,就用 Fetch API(这与 service worker 的fetch 事件没关系)去网络请求这个资源。然后将这个资源加入缓存。

  3. 如果 #1 和 #2 都失败了,那就返回一个适当的值。

// application fetch network data
self.addEventListener('fetch', event => {

  // abandon non-GET requests
  if (event.request.method !== 'GET') return;

  let url = event.request.url;

  event.respondWith(

    caches.open(CACHE)
      .then(cache => {

        return cache.match(event.request)
          .then(response => {

            if (response) {
              // return cached file
              console.log('cache fetch: ' + url);
              return response;
            }

            // make network request
            return fetch(event.request)
              .then(newreq => {

                console.log('network fetch: ' + url);
                if (newreq.ok) cache.put(event.request, newreq.clone());
                return newreq;

              })
              // app is offline
              .catch(() => offlineAsset(url));

          });

      })

  );

});

最后这个offlineAsset(url)方法通过几个辅助函数返回一个适当的值:

// is image URL?
let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);
function isImage(url) {

  return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);

}


// return offline asset
function offlineAsset(url) {

  if (isImage(url)) {

    // return image
    return new Response(
      '<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
      { headers: {
        'Content-Type': 'image/svg+xml',
        'Cache-Control': 'no-store'
      }}
    );

  }
  else {

    // return page
    return caches.match(offlineURL);

  }

}

offlineAsset()方法检查是否是一个图片请求,如果是,那么返回一个带有 “offline” 字样的 SVG。如果不是,返回 offlineURL 页面。

开发者工具提供了查看 Service Worker 相关信息的选项:

澳门新葡亰平台游戏 13

在开发者工具的 Cache Storage 选项列出了所有当前域内的缓存和所包含的静态文件。当缓存更新的时候,你可以点击左下角的刷新按钮来更新缓存:

澳门新葡亰平台游戏 14

不出意料, Clear storage 选项可以删除你的 service worker 和缓存:

澳门新葡亰平台游戏 15

 优点是可以让用户停留时间较长,用户体验比较轻松,更好的促进转化

pwa

 

澳门新葡亰平台游戏,示例代码

示例代码可以在https://github.com/sitepoint-editors/pwa-retrofit找到。

代码提供了一个简单的四个页面的网站。其中包含一些图片,一个样式表和一个main javascript 文件。这个网站可以运行在所有现代浏览器上(IE10+)。如果浏览器支持 PWA 技术,当离线时用户可以浏览他们之前看过的页面。

运行代码前,确保 Node.js 已经安装,然后再命令行里启动服务:

node ./server.js [port]

[port]是可配置的,默认为 8888。打开 Chrome 或者其他基于Blink内核的浏览器,比如 Opera 或者 Vivaldi,然后输入链接 http://localhost:8888/(或者你指定的某个端口)。你也可以打开开发者工具看一下各个console信息。

澳门新葡亰平台游戏 16

浏览主页,或者其他页面,然后用以下任一方法使页面离线:

  1. 按下 Cmd/Ctrl + C ,停止 node 服务器,或者

  2. 在开发者工具的 Network 或者 Application - Service Workers 栏里点击 offline 选项。

重新浏览任意之前浏览过的页面,它们仍然可以浏览到。浏览一个之前没有看过的页面,你会看到一个专门的离线页面,标识“you’re offline”,还有一个你可以浏览的页面列表:

澳门新葡亰平台游戏 17

6.1 Lavas

开发工具

如果你觉得 javascript 调试困难,那么 service worker 也不会很好。Chrome的开发者工具的 Application 提供了一系列调试工具。

你应该打开 隐身窗口 来测试你的 app,这样在你关闭这个窗口之后缓存文件就不会保存下来。

最后,Lighthouse extension for Chrome 提供了很多改进 PWA 的有用信息。

 theme_color :主题颜色(影响手机状态栏颜色)。

第二步:创建一个 Web App Manifest

manifest 文件提供了一些我们网站的信息,例如 name,description 和需要在主屏使用的图标的图片,启动屏的图片等。

manifest文件是一个 JSON 格式的文件,位于你项目的根目录。它必须用Content-Type: application/manifest+json 或者 Content-Type: application/json这样的 HTTP 头来请求。这个文件可以被命名为任何名字,在示例代码中他被命名为 /manifest.json:

{
  "name"              : "PWA Website",
  "short_name"        : "PWA",
  "description"       : "An example PWA website",
  "start_url"         : "/",
  "display"           : "standalone",
  "orientation"       : "any",
  "background_color"  : "#ACE",
  "theme_color"       : "#ACE",
  "icons": [
    {
      "src"           : "logo/logo072.png",
      "sizes"         : "72x72",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo152.png",
      "sizes"         : "152x152",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo512.png",
      "sizes"         : "512x512",
      "type"          : "image/png"
    }
  ]
}

在页面的<head>中引入:

<link rel="manifest" href="/manifest.json">

manifest 中主要属性有:

  • name —— 网页显示给用户的完整名称
  • short_name —— 当空间不足以显示全名时的网站缩写名称
  • description —— 关于网站的详细描述
  • start_url —— 网页的初始 相对 URL(比如 /
  • scope —— 导航范围。比如,/app/的scope就限制 app 在这个文件夹里。
  • background-color —— 启动屏和浏览器的背景颜色
  • theme_color —— 网站的主题颜色,一般都与背景颜色相同,它可以影响网站的显示
  • orientation —— 首选的显示方向:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, 和 portrait-secondary
  • display —— 首选的显示方式:fullscreen, standalone(看起来像是native app),minimal-ui(有简化的浏览器控制选项) 和 browser(常规的浏览器 tab)
  • icons —— 定义了 src URL, sizestype的图片对象数组。

MDN提供了完整的manifest属性列表:Web App Manifest properties

在开发者工具中的 Application tab 左边有 Manifest 选项,你可以验证你的 manifest JSON 文件,并提供了 “Add to homescreen”。

澳门新葡亰平台游戏 18

   它还能接受推送消息和 处理后台同步

Install 事件

这个事件在app被安装时触发。它经常用来缓存必要的文件。缓存通过 Cache API来实现。

首先,我们来构造几个变量:

  1. 缓存名称(CACHE)和版本号(version)。你的应用可以有多个缓存但是只能引用一个。我们设置了版本号,这样当我们有重大更新时,我们可以更新缓存,而忽略旧的缓存。

  2. 一个离线页面的URL(offlineURL)。当离线时用户试图访问之前未缓存的页面时,这个页面会呈现给用户。

  3. 一个拥有离线功能的页面必要文件的数组(installFilesEssential)。这个数组应该包含静态资源,比如 CSS 和 JavaScript 文件,但我也把主页面(/)和图标文件写进去了。如果主页面可以多个URL访问,你应该把他们都写进去,比如//index.html。注意,offlineURL也要被写入这个数组。

  4. 可选的,描述文件数组(installFilesDesirable)。这些文件都很会被下载,但如果下载失败不会中止安装。

// configuration
const
  version = '1.0.0',
  CACHE = version + '::PWAsite',
  offlineURL = '/offline/',
  installFilesEssential = [
    '/',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    '/js/offlinepage.js',
    'logo/logo152.png'
  ].concat(offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    'logo/logo016.png',
    'hero/power-pv.jpg',
    'hero/power-lo.jpg',
    'hero/power-hi.jpg'
  ];

installStaticFiles()方法添加文件到缓存,这个方法用到了基于 promise的 Cache API。当必要的文件都被缓存后才会生成返回值。

// install static assets
function installStaticFiles() {

  return caches.open(CACHE)
    .then(cache => {

      // cache desirable files
      cache.addAll(installFilesDesirable);

      // cache essential files
      return cache.addAll(installFilesEssential);

    });

}

最后,我们添加install的事件监听函数。 waitUntil方法确保所有代码执行完毕后,service worker 才会执行 install。执行 installStaticFiles()方法,然后执行 self.skipWaiting()方法使service worker进入 active状态。

// application installation
self.addEventListener('install', event => {

  console.log('service worker: install');

  // cache core files
  event.waitUntil(
    installStaticFiles()
    .then(() => self.skipWaiting())
  );

});

下拉刷新,会提示【 设备离线,加载历史数据 】

Progressive Web Apps 是什么?

Progressive Web Apps (下文以“PWAs”代指) 是一个令人兴奋的前端技术的革新。PWAs综合了一系列技术使你的 web app表现得就像是 native mobile app。相比于纯 web 解决方案和纯 native 解决方案,PWAs对于开发者和用户有以下优点:

  1. 你只需要基于开放的 W3C 标准的 web 开发技术来开发一个app。不需要多客户端开发。

  2. 用户可以在安装前就体验你的 app。

  3. 不需要通过 AppStore 下载 app。app 会自动升级不需要用户升级。

  4. 用户会受到‘安装’的提示,点击安装会增加一个图标到用户首屏。

  5. 被打开时,PWA 会展示一个有吸引力的闪屏。

  6. chrome 提供了可选选项,可以使 PWA 得到全屏体验。

  7. 必要的文件会被本地缓存,因此会比标准的web app 响应更快(也许也会比native app响应快)

  8. 安装及其轻量 -- 或许会有几百 kb 的缓存数据。

  9. 网站的数据传输必须是 https 连接。

  10. PWAs 可以离线工作,并且在网络恢复时可以同步最新数据。

现在还处在 PWA 的早期,但已经有 很多成功案例 。

PWA 技术目前被 Firefox,Chrome 和其他基于Blink内核的浏览器支持。微软正在努力在Edge浏览器上实现。Apple没有动作 although there are promising comments in the WebKit five-year plan。幸运的是,浏览器支持对于 PWA 似乎不太重要...

澳门新葡亰平台游戏 19

澳门新葡亰平台游戏 20

self.skipWaiting() :self 是当前 context 的 global 变量,执行该方法表示强制当前处在 waiting 状态的 Service Worker 进入 activate 状态。

最近有很多关于 Progressive Web Apps(PWAs)的消息,很多人都在问这是不是(移动)web 的未来。我不想陷入native app 和 PWA 的纷争,但是有一件事是确定的 --- PWA极大的提升了移动端表现,改善了用户体验。

可以在移动设备上的 Chrome 浏览器 (version > 52) 访问

缓存刷新

在示例代码中,用户在请求网络前先检查该文件是否缓存。如果缓存,就使用缓存文件。这在离线情况下很棒,但也意味着在联网情况下,用户得到的可能不是最新数据。

静态文件,类似于图片和视频等,不会经常改变的资源,做长时间缓存没有很大的问题。你可以在HTTP 头里设置 Cache-Control 来缓存文件使其缓存时间为一年(31,536,000 seconds):

Cache-Control: max-age=31536000

页面,CSS和 script 文件会经常变化,所以你应该改设置一个很短的缓存时间比如 24 小时,并在联网时与服务端文件进行验证:

Cache-Control: must-revalidate, max-age=86400

译自 Retrofit Your Website as a Progressive Web App

2.4 Service   Worker 注册

不只是 Apps

Google 引领了 PWA 的一系列动作,所以大多数教程都在说如何从零开始构建一个基于 Chrome,native-looking mobile app。然而并不是只有特殊的单页应用可以PWA化,也不需要一定遵循 material interface design guidelines。大多数网站都可以在数小时内实现 PWA 化。这包括你的 WordPress站点或者静态站点。

2. 页面守护者:Service Worker

 display :“standalone”表示其以类似原生APP的全屏方式启动。

  1. Web App Manifest

  2. manifest.json 简介

四、 App Shell

五、 使用Offine-Plugin把网站升级成 PWA

 安装中   ( installing   )

 

 

 Service Worker 发出的请求会在 Name 字段中添加 ‘齿轮’ 图标。

要用好App Shell,就必须保证这部分的资源被Service Worker缓存起来。我们在组织代码的时候,可以优先完成App Shell的部分,然后把这部分代码分别打包构建出来。

 

 

Dedicated Worker :专用的worker,只能被创建它的 JS 访问,创建它的页面关闭,它的生命周期就结束了。

 

 

 

澳门新葡亰平台游戏 21

 沉浸式特点是只显示内容区域,没有状态栏,导航栏,工具栏等

 

1.3  PWA 的 DEMO   

   它是一种 Web Worker  

 查看 Service Worker 缓存内容

 

这里可以看到打开的页面中 只显示内容区域 , 没有状态栏,导航栏,工具栏 等

 在所有页面引入该文件

 

三、 APP Manifest 与添加到主屏幕

3.4在线生成 manifest.json 文件

 

 

 

 

install 事件回调中有两个方法:

【 沉浸式的用户体验 】

  1. App Shell 模型

3.3 设置window10贴片图标

   它 一但被注册就永远存在,除非显示unregister

 

 name :定义此PWA的名称。

在这个状态会处理 activate 事件回调 (提供了更新缓存策略的机会)。并可以处理功能性的事件 fetch (请求)、 sync (后台同步)、 push (推送)。

 

 

 

 借助 Chrome 浏览器 debug

 

manifest.json

 

 

 

 

 激活后( activated ) :

1.2  PWA 的 主要 技术 点

2.3 Service  Worker 生命周期

可以在 PC 上chrome 浏览器, 输入 chrome://inspect/#service-workers

 

 background_color :背景颜色。

新版本的 Service Worker 替换了它并成为激活状态

 

 

 

 

PWA学习心得

 如同本机一样的交互

 

澳门新葡亰平台游戏 22

 https://brucelawson.github.io/manifest/

 https://tomitm.github.io/appmanifest/

 

 参考资料

基于 Vue 的 PWA 解决方案,帮助开发者快速搭建 PWA 应用,解决接入 PWA 的各种问题

1. Service Wor k e r s Nigh t l y

 

2.5 Service  Worker 安装

 激活后   ( activated )

 

3.2设置 IOS Safari 上的添加至主屏幕元素

 

 

澳门新葡亰平台游戏 23

澳门新葡亰平台游戏 24

澳门新葡亰平台游戏 25

在定义好 manifest.json 文件后,我们可以通过Chrome的开发者工具看到详细的内容:

 

 

 创建 manifest.json 文件,并将它放到你的站点目录中

 

使用 Chrome 浏览器,可以通过进入控制台 Application -> Service Workers 面板查看和调试。如下图所示:

Service Worker 使用 Cache API 缓存只读资源,可以在 Chrome DevTools 上查看缓存的资源列表。

 

5. 如何进行 Service Worker 调试

self . addEventListener ( 'install' ,  function (event)  {
return self .skipWaiting() ;
}) ;

 废弃   ( redundant )

 

   它是一种特殊的Web Worker,能够拦截网络请求

3.1定义 manifest.json 配置添加到主屏幕功能

这里特别说明一下,进入废弃 (redundant) 状态的原因可能为这几种:

//index.html

 安装后( installed ) :

 

 

 

< meta name= "msapplication-TileImage" content= "images/logo/144x144.png" >
< meta name= "msapplication-TileColor" content= "#2F3BA2" >

6. 网站渐进式增强体验(PWA)改造:Service Worker 应用详解

澳门新葡亰平台游戏 26

{
"name" : "Minimal PWA" ,
"short_name" : "PWA Demo" ,
"display" : "standalone" ,
"start_url" : "/" ,
"theme_color" : "#313131" ,
"background_color" : "#313131" ,
"icons" : [
    {
"src" : "e.png" ,
"sizes" : "256x256" ,
"type" : "image/png"
}
  ]
}

澳门新葡亰平台游戏 27

4.1 优势

安装 (install) 失败

 

 参考资料

 

 

 

 通知       ( Push API & Notification API )  

 

event.waitUntil() :传入一个 Promise 为参数,等到该 Promise 为 resolve 状态为止。

 

当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker  是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能 。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web  worker在后台运行 .

1.3. 2 有网络的情况下 ,点击屏幕上新生成的 天气 APP图标 打开页面显示效果

 激活( activating ):

   它只能运行在HTTPS协议上

 start_url :启动地址。由于PWA实际上是一个web页面,所以需要定义PWA 在启动时应该访问哪个地址。

什么是Web Worker?

1.3.4 无网络的情况下,在谷歌浏览器打开

单击可以查看详情

Service Worker 已经完成了安装,并且等待其他的 Service Worker 线程被关闭。

澳门新葡亰平台游戏 28

允许将站点添加至主屏幕,是 PWA 提供的一项重要功能

 

1.3.1 有网络的情况下,在 谷歌浏览器打开页面效果

  1. offline-plugin

  2. offline-plugin DEMO

  3. 使用offline-plugin搭配webpack轻松实现PWA

 

二、什么是 Service Worker 官网介绍

澳门新葡亰平台游戏 29

 icons :定义一系列的图标以适应不同型号的设备。

 参考资料

 

浏览器一般有三类 web Worker

 

澳门新葡亰平台游戏 30  澳门新葡亰平台游戏 31

 有 粘性   ( Engaging ) - 用户可以添加到桌面和接收通知

 安装 ( installing  ) :

 

 

 

下拉刷新,会提示【 设备离线,加载历史数据 】

 

 

 

六、 与PWA相关的开源框架

Service Worker :是事件驱动的 worker,生命周期与页面无关,关联页面未关闭时,它也可以退出,没有关联页面时,它也可以启动,

 

4. PWA兼容性

self.clients.claim() :在 activate 事件回调中执行该方法表示取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。旧的 Service Worker 脚本不再控制着页面,之后会被停止。

// service-worker.js

Progressive  Web  App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验。

 

 

天气PWA

一、什么是PWA

 激活 中      ( activating )

 

 

1.3.3 无网络的情况下,在QQ浏览器打开

 

在这个manifest.json文件中,我们可以轻松得到这个PWA的信息:

 

澳门新葡亰平台游戏 32

这个状态发生在 Service Worker 注册之后,表示开始安装,触发 install 事件回调指定一些静态资源进行离线缓存。

1.3.5 无网络的情况下 ,点击屏幕上生成的天气 APP图标

 

Shared  Worker :共享的 worker,可以被同一域名下的JS访问,关联的页面都关闭时,它的生命周期就结束了。

PWA 本质上是 Web App ,借助一些新技术也具备了Native App的一些特性,兼具 Web App和Native App的优点。

查看是否注册成功

 

 参考资料

 

 来自 Service Worker 的内容会在 Size 字段中标注为 from ServiceWorker

activate 回调中有两个方法:

澳门新葡亰平台游戏 33

这个状态表示一个 Service Worker 的生命周期结束。

2.2 Service  Worker 兼容性

 

生命周期分为这么几个状态  

澳门新葡亰平台游戏 34

 

 

 

 

其它 详细API可以参考【参考资料】中的 1 和 6

澳门新葡亰平台游戏 35  澳门新葡亰平台游戏 36

 网络跟踪

 

 

 澳门新葡亰平台游戏 37

  1. Lavas 官 网

  2. Lavas GitHub

  1. Progressive Web Apps
  2. 什么是PWA

 

3. PWA,准备好了吗?

App Shell,顾名思义,就是“壳”的意思,也可以理解为“ 骨架屏 ”,说白了就是在内容尚未加载完全的时候,优先展示页面的结构、占位图、主题和背景颜色等,它们都是一些被强缓存的html,css和javascript。

 

 快     ( Fast ) - 快速响应,并且 动画平滑流畅

在这个状态下没有被其他的 Service Worker 控制的客户端,允许当前的 worker 完成安装,并且清除了其他的 worker 以及关联缓存的旧缓存资源,等待新的 Service Worker 线程被激活。

 可以在 Service Worker 中监听 beforeinstallprompt 事件做一些应用内的行为处理

澳门新葡亰平台游戏 38  澳门新葡亰平台游戏 39

 离线可用     ( Service Worker )  

 

 主屏图标     ( App Manifest )  

 

 

2.1 Service  Worker 如何工作

添加主屏幕效果 图

 

 

 

2.6 Service  Worker 调试

 

 始终快速的可靠性能

 

激活 (activating) 失败

event.waitUntil() :传入一个 Promise 为参数,等到该 Promise 为 resolve 状态为止。

 

 

 

 数据的经济使用

 可靠        ( Reliable ) - 即使在不稳定的网络环境下,也能瞬间加载并展现

 沉浸式是针对实用型和效率型而言

应用图标:
< link rel= "apple-touch-icon" href= “apple-touch-icon.png" >
启动画面:
< link rel= "apple-touch-startup-image" href= "launch.png" >
应用名称:
< meta name= "apple-mobile-web-app-title" content= "Todo-PWA" >
全屏效果:
< meta name= "apple-mobile-web-app-capable" content= "yes" >
设置状态栏颜色:
< meta name= "apple-mobile-web-app-status-bar-style" content= "#fff" >

 废弃状态   ( redundant ) :

1.1  PWA 的 主要特点

 

 参考资料

 参考资料

在页面 head 区域添加如下内容:

   它 是 PWA 的核心

 安装 后  ( installed )

 

版权声明:本文由澳门新葡亰平台游戏发布于web网络,转载请注明出处:PWA学习心得,改造你的网站