1：service worker是什么？
service worker是独立于js主线程的独立线程，在里面执行操作并不会阻塞主线程的运行。可以劫持页面的所有请求（静态资源、接口请求）、可以访问cache和indexDB。主要是用于前端缓存和推送。当网站开启service worker后，浏览器的请求会先被service worker 所劫持，在service worker中如果命中缓存策略，则走service worker的缓存策略，否则走浏览器自己的缓存机制（强制缓存和协商缓存）。
2：service worker 用法
大致流程是先注册service worker，接着就会执行一个js文件（sw.js），在该js文件中可以监听service worker各个生命周期钩子。
install：service worker 安装成功
message： service worker 接收消息
fetch： 拦截网页的所有请求，这个是重点！！
具体用法可以查看 MDN
3：缓存策略
缓存策略主要是根据自己的业务需求来决定，我们公司主要使用的是cacheFirst（缓存优先策略）。具体实现逻辑是，当拦截到资源请求时，先去缓存中获取，如果存在，直接返回，如果不存在，则去走网络请求，网络请求拿到资源后，会将该资源添加到缓存中。我们主要是缓存了图片资源，当拿到资源后，会将资源的过期时间存储到indexDB中，将图片存到CacheStorage中。选择service worker 缓存图片的原因是CacheStorage没有容量限制，强制缓存会有容量限制。我们公司的网站会有大量的图片资源。
4：service worker更新机制
当浏览器下载sw.js时，会与老的文件进行对比，如果发现是最新的，就会进行安装。安装完之后并不会立刻执行，而是进入等待状态，当页面不再依赖旧的service worker 时，新的 service worker 才会进入激活状态。以下引用MDN
如果现有 service worker 已启用，新版本会在后台安装，但仍不会被激活——这个时序称为 worker in waiting。直到所有已加载的页面不再使用旧的 service worker 才会激活新的 service worker。只要页面不再依赖旧的 service worker，新的 service worker 会被激活（成为 active worker）
service worker也有api可以使新的service worker直接生效，具体查MDN文档。推荐使用service worker自然消亡的方式。
5：Workbox
直接写原生的sw.js，比较繁琐和复杂，谷歌推出了Workbox，这个库对service worker做了封装，通过配置就可以使用。这个库没仔细看。
参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API
网友评论