PWA的探索与应用

本文由云+社区发表

PWA（Progressive Web App）起源背景

传统的Web网页存在以下几个问题：

进入一个页面必须要记住它的url或者加入书签，入口不便捷；
没网络就没响应，不具备离线能力；
不像APP一样能进行消息推送。

Native app：

开发成本高
软件上线需要审核
即使使用频率不高，想使用一个app必须先下载安装

PWA概念的提出

2016 年Google I/O 大会上提出一个 Next Web Generation 的概念。PWA是在传统Web应用的基础上，结合Manifest和service worker，完善Web应用的一些能力，比如：

添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
消息推送

PWA技术点

Web App Manifest

Web App Manifest 技术实现了将PWA网页应用添加至桌面的功能，但该项技术目前仍处于实验性阶段，各浏览器支持度不高

image.png

PWA 站点部署的 manifest.json文件满足以下条件时会自动显示横幅：

- short\\_name （主屏幕显示）
- name （安装横幅显示）
- icons （必须包含一个 mime 类型为 image/png 的图标声明）
- start\\_url （应用启动地址）
- display （必须为 standalone 或 fullscreen）
- 站点注册 Service Worker。
- 站点支持 HTTPS 访问。
- 同一浏览器中站点至少被访问两次，间隔至少为 5 分钟。

Service Worker

PWA应用的离线体验、定期的后台同步以及推送通知等功能的实现依赖于Service Worker技术，下图为目前SW技术的支持度。

SW具有以下特征：

一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context。
一旦被 install，就永远存在，除非被手动 unregister
用到的时候可以直接唤醒，不用的时候自动睡眠
离线内容开发者可控
能向客户端推送消息
不能直接操作 DOM
必须在 HTTPS 环境下才能工作
异步实现，内部大都是通过 Promise 实现

Service Worker生命周期

installing：这个状态发生在 SW 注册之后开始安装，install 事件回调中执行skipWaiting()方法表示强制当前处在 waiting 状态的 Service Worker 进入 activate 状态。
installed：SW已经完成了安装，等待其他的 SW 线程被关闭。
activating：在这个状态下清除其他的worker 以及关联缓存的旧缓存资源，等待新的 SW线程被激活。在 activate 事件回调中执行self.clients.claim()方法表示取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。旧的 Service Worker 脚本不再控制着页面，之后会被停止。
activated：在这个状态可以处理功能性的事件 fetch (请求)、sync (后台同步)、push (推送)。
废弃状态 ( redundant )：这个状态表示一个 Service Worker 的生命周期结束。

Service Worker 支持的事件

install：Service Worker 安装成功后被触发的事件，在事件处理函数中可以添加需要缓存的文件
activate：当 Service Worker 安装完成后并进入激活状态，会触发 activate 事件。通过监听 activate 事件你可以做一些预处理，如对旧版本的更新、对无用缓存的清理等。
message：Service Worker 运行于独立 context 中，无法直接访问当前页面主线程的 DOM 等信息，但是通过 postMessage API，可以实现他们之间的消息传递，这样主线程就可以接受 Service Worker 的指令操作 DOM。
fetch ：当浏览器在当前指定的 scope 下发起请求时，会触发 fetch 事件，并得到传有 response 参数的回调函数。fetch 事件特别重要，因为它能够定义你的缓存策略。也就是说，你可以决定何时使用缓存数据，何时使用网络请求来的数据。
push：push 事件是为推送准备的。通过 PUSH API，当订阅了推送服务后，可以使用推送方式唤醒 Service Worker 以响应来自系统消息传递服务的消息，即使用户已经关闭了页面。
sync：sync 事件由 background sync (后台同步)发出。background sync 是 Google 配合 SW 推出的 API，用于为 Service Worker 提供一个可以实现注册和监听同步处理的方法。但它还不在 W3C Web API 标准中。在 Chrome 中这也只是一个实验性功能，需要访问 chrome://flags/#enable-experimental-web-platform-features ，开启该功能，然后重启生效。Sync 事件允许延迟网络任务，直到用户连接上网络，它实现的功能通常被称为后台同步。这对于在离线模式下，确保用户启动的任何有网络依赖的任务，最终都将在网络再次可用时达到其预期目的，是非常有用的。

Service Worker 的工作原理

Service Worker是基于注册、安装、激活等步骤

if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {navigator.serviceWorker.register('/jslearning/sw.js') // 默认作用域为jslearning下，也可以通过设置scope参数进行设置.then(function (registration) {// 注册成功console.log('ServiceWorker registration successful with scope: ', registration.scope);}).catch(function (err) {// 注册失败:(console.log('ServiceWorker registration failed: ', err);});
});
}

安装

this.addEventListener('install', function(event) {console.log('V1 installing…');//需要缓存的重要的高优先级资源var vipUrlsToPrefetch = [
'./index.html'];//次重要的资源var urlsToPrefetch = [
'./icon.png'];event.waitUntil(
caches.open(OFFLINE_CACHE_NAME).then(function(cache) {//urlsToPrefetch非重要资源，即使有资源加载失败也不影响Service Worker安装cache.addAll(urlsToPrefetch);//vipUrlsToPrefetch中资源全部请求成功，Service Worker安装事件才顺利完成，可以进入激活事件return cache.addAll(vipUrlsToPrefetch);
}));      
});

激活

//Service Worker激活事件
this.addEventListener('activate', function(event) {//在激活事件中清除非当前版本的缓存避免用户存储空间急剧膨胀event.waitUntil(caches.keys().then(function(cacheNames) {
console.log('V1 activate');
return Promise.all(cacheNames.map(function(cacheName) {if (cacheName !== OFFLINE_CACHE_NAME) {if(cacheName.indexOf(OFFLINE_CACHE_PREFIX) != -1) {return caches.delete(cacheName);}}
}));}));
});

Service Worker更新

如果线程的字节与已有的SW线程字节不同，浏览器则考虑更新SW线程。
更新的SW线程与现有SW线程一起启动，并获取自己的 install 事件。
如果新工作SW线程出现不正常状态代码（例如，404）、解析失败，在执行中引发错误或在安装期间被拒，则系统将舍弃新工作线程，但当前工作线程仍处于活动状态。
安装成功后，更新的工作线程将 wait，直到现有工作线程控制0个客户端。
self.skipWaiting() 可跳过等待情况，这意味着sw线程在安装完后立即激活。

Service Worker缓存策略

Service Worker缓存策略大部分在fetch与install时间中定义，对于某些固定不变的静态资源，可以在Service Worker初次安装的install事件中将其缓存，但资源过大或者网络不佳都会造成资源并未全部下载成功而导致Service Worker安装被中断安装失败。SW主要有以下几类缓存策略：

不影响安装的资源预缓存
渐进式缓存
仅使用缓存、仅使用网络
缓存优先、网络优先

// 渐进式缓存
var addToCache = function(req) {   return fetch(req.clone()).then(function(resp) {   var cacheResp = resp.clone();if (!resp.ok) {return resp;}caches.open(OFFLINE_CACHE_NAME).then(function(cache) {cache.put(req.clone(), cacheResp);});return resp;});
};this.addEventListener('fetch', function(event)  {event.respondWith(caches.open(OFFLINE_CACHE_NAME).then(function(cache) {return cache.match(event.request);}).then(function(response) {if (response) {return response;} else {return addToCache(event.request);}})); 
});