简介
service worker通过拦截fetch事件，处理网络请求。使用promise异步处理，所以不会阻塞主进程的执行。常用于借助Cache API缓存资源。还可以使用Push API实现推送通知（Safari不支持）、Background Synchronization后台同步（Safari、Firefox不支持）等功能。
dist vs memory vs sw
浏览器为了提升访问的速度，会将缓存资源分为内存缓存memory cache与磁盘缓存dist cache，小资源在短时间内会被放在内存中，加快访问的速度。值得注意的是这个存放目前没有标准，所以不同浏览器存储的策略有些不同。
在资源缓存后，再次访问资源，浏览器会先检测内存有无资源，再发起fetch请求。所以service worker无法拦截内存中的资源，但可以处理磁盘上的资源。
service worker利用Cache API缓存资源到磁盘中。而浏览器在管理磁盘的使用时，也有可能删除已缓存的资源。
在service worker未启动或停止运行时，浏览器需要先启动service worker再请求，所以可能会因此延迟一点时间。
总结：
优先级： memory > sw > dist
加载速度： memory > dist > sw
service-worker优点：
- 完全控制网络请求，可以设置请求的响应头
- 限制缓存的资源数量
- 自定义过期策略
- 可以使用indexDB存储数据，使用postMessage传递信息
- Disabled Cache不会清除缓存
- 支持离线访问网站
service-worker缺点：
- 无法访问DOM，无法使用同步方法，如localStorage
- 必须再https环境下使用
- 需要在作用范围的根目录下创建service-worker，如要将全局的页面进行管理，就需要在根目录下注册
- 速度比浏览器缓存慢
- 在存在memory cache的情况下，无法更新缓存
缓存功能
service worker通过Cache API进行缓存时，有两种不同的缓存方式，一种是预缓存，另一种是运行时缓存。
预缓存通常在service worker安装阶段进行，通过预缓存可以提前加载资源。但需要注意加载资源的时机与数量。
运行时缓存是用于缓存已访问的资源，优化资源的再次获取。
运行时缓存策略
- Cache First 缓存优先，无缓存请求网络资源
- Network First 网络优先，无网络使用缓存资源
- Network Only 只通过网络获取资源
- Cache Only 只通过缓存获取资源，需配合预缓存
- Stale-While-Revalidate 缓存优先，然后会发起请求更新缓存
实战
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库。
import { defineConfig } from 'umi';
import { GenerateSW } from 'workbox-webpack-plugin';
export default defineConfig({
.....other config
chainWebpack(memo) {
// workbox 配置
memo.plugin('workbox').use(GenerateSW, [
{
clientsClaim: true, // Service Worker 被激活后使其立即获得页面控制权
cleanupOutdatedCaches: true, //删除过时、老版本的缓存
include: ['**/*.{html,js,css,png.jpg}'], // 匹配的文件
exclude: ['service-wroker.js'], // 忽略的文件
runtimeCaching: [
{
urlPattern: /.*\.js.*/i,
handler: 'CacheFirst',
options: {
cacheName: 'seed-js',
expiration: {
maxEntries: 20, //最多缓存20个，超过的按照LRU原则删除
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
},
},
},
{
urlPattern: /.*css.*/,
handler: 'CacheFirst',
options: {
cacheName: 'seed-css',
expiration: {
maxEntries: 30, //最多缓存30个，超过的按照LRU原则删除
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
},
},
},
{
urlPattern: /.*(png|svga).*/,
handler: 'CacheFirst',
options: {
cacheName: 'seed-image',
expiration: {
maxEntries: 30, //最多缓存30个，超过的按照LRU原则删除
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
},
},
},
],
},
]);
},
})
然后在app.ts中调用register-service-worker，注册service worker。
import { register } from 'register-service-worker';
import { isBrowser } from 'umi';
if (process.env.NODE_ENV === 'production' && isBrowser()) {
register(`/service-worker.js`, {
ready(registration) {
console.log('Service worker is active.');
},
registered(registration) {
console.log('Service worker has been registered.');
},
cached(registration) {
console.log('Content has been cached for offline use.');
},
updatefound(registration) {
console.log('New content is downloading.');
},
updated(registration) {
console.log('New content is available; please refresh.');
},
offline() {
console.log(
'No internet connection found. App is running in offline mode.',
);
},
error(error) {
console.error('Error during service worker registration:', error);
},
});
}
这样就完成了一个简单的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