背景:项目入口执行了 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 文件。