基于 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 文件。



作者:ahappyone
链接:https://www.jianshu.com/p/bd2d6ac7a721
来源:简书

原文地址:https://www.cnblogs.com/yiyangl/p/13444623.html