共计 4737 个字符，预计需要花费 12 分钟才能阅读完成。
本文由云 + 社区发表
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);
}
})
);
});
PWA 应用可以通过开发者工具中的 Application 进行查看调试，如下图所示：
PWA 优缺点总结
优点
可以将 app 的快捷方式放置到桌面上，全屏运行，与原生 app 无异
能够在网络差和断网条件下
推送消息的能力
快速响应用户指令
缺点
支持率不高
Chrome 在安卓移动端上的占有率很低
依赖的 GCM 服务在国内无法使用
微信小程序的竞争
PWA 应用
Lavas 是一套基于 Vue 的 PWA 解决方案，能够帮助开发者快速搭建 PWA 应用
新浪微博
饿了么
Instagram
Twitter
Offline Wikipedia
Spotlight
…
参考文献
https://developers.google.com…
https://developer.mozilla.org…
https://lavas.baidu.com/pwa
https://x5.tencent.com/tbs/gu…
https://segmentfault.com/a/11…
https://blog.csdn.net/baidu_b…
此文已由作者授权腾讯云 + 社区在各渠道发布
获取更多新鲜技术干货，可以关注我们腾讯云技术社区 - 云加社区官方号及知乎机构号
