近两年前端比较热的话题之一就是PWA（Progressive Web APP）——渐进式网页；致力于实现与原生APP相似的交互体验。

最早听说pwa，是2017年年底的时候，看到朋友圈里的前端大神分享相关文章、应用。今年大概3月份的时候，看到ios从11.3开始支持后，就开始认真了解相关实现。

了解后发现，这一技术涉及到的内容很多。总结下来，pwa的实现其实主要依赖于以下三点：

1）manifest实现手机主界面的web app图标、标题、开屏icon等；
2）service worker实现离线缓存请求、更新缓存、删除缓存；iOS safari在11.3系统已支持；
3）push/notification实现消息推送及接收。

其中service worker是离线应用的关键，我们主要来说说service worker（以下简称SW）。

1service worker是什么

在说SW之前，先来回顾下js的单线程问题。

众所周知，js在浏览器中是单线程运行的；主要是为了准确操作DOM。但单线程存在的问题是，UI线程和js线程需要抢占资源，在js执行耗时逻辑时，容易造成页面假死，用户体验较差。

由此出现了异步操作，可不影响主界面的响应。如ajax、promise等。

后来html5开放的web worker可以在浏览器后台挂载新线程。它无法直接操作DOM，无法访问window、document、parent对象。

SW是web worker的一种，也是挂载在浏览器后台运行的线程。主要用于代理网页请求，可缓存请求结果；可实现离线缓存功能。也拥有单独的作用域范围和运行环境

1.1 SW使用限制

SW除了work线程的限制外，由于可拦截页面请求，为了保证页面安全，浏览器端对sw的使用限制也不少。

1）无法直接操作DOM对象，也无法访问window、document、parent对象。可以访问location、navigator；

2）可代理的页面作用域限制。默认是sw.js所在文件目录及子目录的请求可代理，可在注册时手动设置作用域范围；

3）必须在 https 中使用，允许在开发调试的localhost使用。

1.2 SW兼容性

目前移动端chrome及ios safari 11.3以上已支持，pc端火狐、谷歌、欧朋等支持，总体来看移动端及pc端都可以尝试使用。

不过在chrome里调试是最方便的，可以直观看到当前SW的状态、使用页面：

在cacheStorage查看缓存空间的存储信息：

1.3 service worker可以解决的问题

1）用户多次访问网站时加快访问速度；

2）离线缓存接口请求及文件，更新、清除缓存内容；

3）可以在客户端通过 indexedDB API 保存持久化信息。

2生命周期

生命周期有5步：注册、安装成功（安装失败）、激活、运行、销毁。

事件：install、activate、message、fetch、push、async。

由于是离线缓存，所以在首次注册、二次访问、服务脚本更新等会有不同的生命周期。

2.1 首次注册流程

从主线程注册后，会下载服务工作线程的js。
安装：执行过程即是 installing 过程，此时会触发 install 事件，并执行 installEvent 的 waitUtil方法。执行完毕后，当前状态是 installed。
激活：立即进入 activating 状态；并触发 activate 事件，处理相关事件内容。执行完成后，变成 activated 状态。
销毁： 当安装失败或进程被关闭时。

2.2 二次访问

在上一次服务未销毁时，二次访问页面，直接停留在激活运行状态：

2.3 服务脚本更新

如上图，sw.js中，每次访问都会被下载一次。并且至少每24小时会被下载一次。为的是避免错误代码一直被运行。
下载后，会比对是否更新，如果更新，就会重新注册安装serivceworker，安装成功后会处于 waiting 状态。
当 clients 都被关闭后，再次打开，才会激活最新的代码。
当然，也有方法可以跳过等待，比方说在安装完成后，执行 installEvent.skipWaiting()

3SW的实际使用

3.1 注册

在主线程main.js中调起注册方法register，register只会被执行一次。

 1// 主线程的main.js
 2// 先判断浏览器是否支持
 3if('serviceWorker' in navigator){
 4  navigator.serviceWorker
 5
 6    // scope是自定义sw的作用域范围为根目录，默认作用域为当前sw.js所在目录的页面
 7    .register('./sw.js', {scope: '/'})
 8
 9    // 注册成功后会返回reg对象，指代当前服务线程实例
10    .then(reg => {
11      console.log('注册成功')  
12    })
13    .catch(error => {
14      console.log('注册失败')
15    })
16}else{
17  console.log('当前浏览器不支持SW')
18}

3.2 安装

在服务线程中添加安装监听及对应需缓存的资源文件：

 1// 在sw.js中监听对应的安装事件，并预处理需要缓存的文件
 2// 该部分内容涉及到cacheStorage API
 3
 4// 定义缓存空间名称
 5const CACHE_NAME = 'sylvia_cache'
 6
 7// 定义需要缓存的文件目录
 8let filesToCache = [
 9  '/src/css/test.css',
10  '/src/js/test.js'
11]
12
13// 监听安装事件，返回installEvent对象
14self.addEventListener('install', function(event){
15
16  // waitUntil方法执行缓存方法
17  event.waitUntil(
18
19    // cacheStorage API 可直接用caches来替代
20    // open方法创建/打开缓存空间，并会返回promise实例
21    // then来接收返回的cache对象索引
22    caches.open(CACHE_NAME).then(cache => {
23
24      // cache对象addAll方法解析（同fetch）并缓存所有的文件
25      cache.addAll(filesToCache)
26    })
27  )
28})

3.3 激活

第一次注册并安装成功后，会触发 activate 事件：

1self.addEventListener('activate', event => {
2  console.log('安装成功，即将监听作用域下的所有页面')
3})

在有sw脚本更新时，在后台默默注册安装新的脚本文件，安装成功后进入 waiting 状态。当前所有老版本控制的页面关闭后，再次打开时，新版本的脚本触发 activate 事件，此时可清除旧缓存，当前是修改 CACHE_NAME 的值来实现清除之前的缓存。

 1// 监听激活事件
 2self.addEventListener('activate', event => {
 3  // 获取所有的缓存key值，将需要被缓存的路径加载放到缓存空间下
 4  var cacheDeletePromise = caches.keys().then(keyList => {
 5    Promise.all(keyList.map(key => {
 6      if(key !== CACHE_NAME){
 7        var deletePromise = caches.delete(key)
 8        return deletePromise
 9      }else{
10        Promise.resolve()
11      }
12    }))
13  })
14  // 等待所有的缓存都被清除后，直接启动新的缓存机制
15  event.waitUtil(
16    Promise.all([cacheDeletePromise]).then(res => {
17      this.clients.claim()
18    })
19  )
20})

3.4 运行

安装并激活成功后，就可以对页面实行fetch监控啦。

 1// 可以过滤使用已缓存的请求，若无缓存，由fetch发起新的请求，并返回给页面
 2self.addEventListener('fetch', event => {
 3  event.respondWith(
 4    caches.match(event.request).then(res => {
 5      if(res){
 6        return res
 7      }else{
 8        return fetch(event.request)
 9      }
10    })
11  )
12})
13
14// 也可连续将请求缓存到内存里
15self.addEventListener('fetch', event => {
16  event.respondWith(
17    caches.match(event.request).then(response => {
18      if(response){
19        return response
20      }
21      let requestClone = event.request.clone()
22      return fetch(requestClone).then(res => {
23        if(!res || res.status !== 200){
24          return res
25        }
26        let resClone = res.clone()
27        caches.open(CACHE_NAME).then(cache => {
28          cache.put(event.request, resClone)
29        })
30        return res
31      })
32    })
33  )
34})

3.5 进程销毁

1）当安装失败时会被浏览器丢弃该工作线程

2）浏览器后台启动SW时，会消耗性能，所以在不需要使用缓存时，可销毁

self.terminate()

4应用框架workbox

目前chrome有出一套完整的SW实用框架，可以较低成本的实现离线缓存

并提前封装好了对应所需的API。

4.1 使用方法

在sw.js的文件中直接引入workbox的cdn上的文件：

1importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0-alpha.3/workbox-sw.js')
2if(workbox){
3  console.log('your workbox is working now')
4}else{
5  console.log('it can't work!')
6}
7

如果浏览器支持，可以直接引用API接口：

1）precaching，可以在注册成功后直接缓存的文件；

2）routing，匹配符合规则的url，与strategies合作来完成文件的缓存。

示例：

 1// 注册完成后，即缓存对应的文件列表
 2workbox.precaching.precacheAndRoute([
 3  '/src/static/js/index.js',
 4  '/src/static/css/index/css',
 5  {url: '/src/static/img/logo.png', revision" }
 6])
 7
 8// routing方法匹配请求文件路径，strategies用来存储对应文件
 9workbox.routing.registerRoute(
10  matchFunction,  // 字符串或者是正则表达式
11  handler // 可以使用workbox.strategies缓存策略来缓存
12)

workbox.strategies缓存策略有：

1）staleWhileRevalidate 使用已有的缓存，然后发起请求，用请求结果来更新缓存；

2）networkFirst 先发起请求，请求成功后会缓存结果。如果失败，则使用最新的缓存；

3）cacheFirst 总是先使用缓存，如果无匹配的缓存，则发起网络请求并缓存结果；

4）networkOnly 强制发起请求；

5）cacheOnly 强制使用缓存。

示例：

1 // 缓存使用方法
2workbox.routing.registerRoute(
3  '/src/index.js',
4  workbox.strategies.staleWhileRevalidate()
5)

5总结

以上可以实现简单的离线缓存。

使用场景
1）web页面可将较少变动的静态资源放到客户端缓存中；

2）将一些基本数据缓存后，可以让用户在无网、弱网环境下，也能正常访问页面；

3）sw其他的类似消息推送的功能，主要用在多页面同步消息，比如：邮件、即时通讯等。

但在实际使用中，一般离线内容有：数据请求类、静态资源类、html页面类等。
1）数据请求类：主要可缓存一些重要数据，需要注意数据量，一般浏览器分配给sw的空间是有限的，需要及时更新及删除无效数据；

2）静态资源类：一般是放在cdn上的文件，这时需要处理一些跨域缓存问题；

3）html页面类：页面的缓存需要谨慎处理，因为如果注册sw的代码写在页面上的话，注意采用第二种缓存更新方法。

缓存更新，大多是两种：
1）引用新的sw.js的文件，即修改注册时的文件名；

2）修改cacheStorage中的缓存对象名称（推荐这种）。

回到html的缓存问题。如果缓存了注册sw的页面文件，那么访问时，总会从缓存中取页面内容。此时若采用第一种缓存方式，那么会出现sw永远无法更新的问题。

目前来看还是比较推荐使用workbox来接入，实现比较方便，缓存策略也比较实用。

作者介绍：
西薇亚（企业代号名），贝壳找房租赁平台前端工程师。

本文转载自公众号贝壳产品技术（ID：gh_9afeb423f390）。

原文链接：

https://mp.weixin.qq.com/s/aboA9dtCK6t0fzs0JU58Iw

创作场景

service worker 实现离线缓存