Service Worker
2026-02-16 00:33:15
service worker通过拦截fetch事件，处理网络请求。使用promise异步处理，所以不会阻塞主进程的执行。常用于借助Cache API缓存资源。还可以使用Push API实现推送通知（Safari不支持）、Background Synchronization后台同步（Safari、Firefox不支持）等功能。
浏览器为了提升访问的速度，会将缓存资源分为内存缓存memory cache与磁盘缓存dist cache，小资源在短时间内会被放在内存中，加快访问的速度。值得注意的是这个存放目前没有标准，所以不同浏览器存储的策略有些不同。
在资源缓存后，再次访问资源，浏览器会先检测内存有无资源，再发起fetch请求。所以service worker无法拦截内存中的资源，但可以处理磁盘上的资源。
service worker利用Cache API缓存资源到磁盘中。而浏览器在管理磁盘的使用时，也有可能删除已缓存的资源。
在service worker未启动或停止运行时，浏览器需要先启动service worker再请求，所以可能会因此延迟一点时间。
总结：
service worker通过Cache API进行缓存时，有两种不同的缓存方式，一种是预缓存，另一种是运行时缓存。
预缓存通常在service worker安装阶段进行，通过预缓存可以提前加载资源。但需要注意加载资源的时机与数量。
运行时缓存是用于缓存已访问的资源，优化资源的再次获取。
service worker的生命周期为：注册(register) -> 安装(install) -> 激活(active)。在安装后service work就会激活，只有激活后才会生效。
要注册service worker需要提供 service-worker.js ，用于描述service worker的用途，注意 service-worker.js 文件的位置决定了service-worker控制的页面，对于 service-worker.js 文件外部的页面是无法控制的。注意文件的位置限制的是service-worker控制的页面，而不是请求的地址，service-worker依然能控制从当前页面发送到外部包括跨域的请求。
此处不展开描述原生service worker的配置方法。
为了方便使用，google推出了service-worker-workerbox简化使用，只需要简单的配置就可以自动生成 service-worker.js 文件。
而对于注册与安装的命令也可以使用register-service-worker库。
聚焦到具体的项目中。
目前项目中使用了umi的框架，所以需在umi的config文件中导入 workbox-webpack-plugin 库。
然后在 app.ts 中调用 register-service-worker ，注册service worker。
这样就完成了一个简单的service worker配置。
stackoverflow-why-use-a-service-worker
ServiceWorker issue: Difference between disk and memory cache
Service worker caching and HTTP caching
Introduction to Workbox and service workers
umi3.x配置service worker
How to use PWA on umi 3.0
register-service-worker
热门标签
