基于 react-creat-app 中 service worker 的研究

背景：项目入口执行了 registerServiceWorker（）。目的是为了实现 app 的离线缓存。

service worker 是独立于主线程的 js 线程。

可用于：（1）推送消息、（2）后台同步、（3）拦截和处理网络请求。本文只针对（3）。

先决条件：只在 https 环境中运行，防止有人劫持链接。

使用：参考文档

（1）注册 SW：

（2）安装：在安装成功后的回调中决定需要缓存哪些文件；再接收 fetch 请求时，返回在缓存中匹配中的资源。

（3）更新 SW：a、更新 SW js 文件，下载完成后则视为新的 SW；b、新的 SW 将会启动，触发 install 事件；c、此时，旧的 SW 仍控制着页面，新的 SW 进入 waiting 状态；d、当前页面关闭时，旧的 SW 将会关闭，新的 SW 将会取得页面的控制权；e、新的 SW 取得页面控制权后，会触发 activate 事件。

Attention：clients.claim() 可让 SW 控制页面；skipWaiting 尽快将新工作线程激活。两者同时配置来实现浏览器同步服务端更新。

webpack  配置：通过  workbox-webpack-plugin 来初始化 SW 的 js 文件。