最近打算做serviceWorker，但是发现有如下问题：
- 缓存策略。
- 收集索引资源。
- sw资源更新处理。
其实上面的都好说，缓存策略自己定义一下不同资源对应的策略写一下；收集索引资源写个plugin自动收集下；sw的资源更新处理，那就定义不同的版本名，在activate的时候直接skipWating，再删除一下旧的缓存资源。
确定了一些前置问题之后继续：
1. sw安装
安装时机：为了避免sw安装反而阻塞了我们原有的网络进程，我们最好在页面load时加载sw，参考：https://web.dev/articles/service-workers-registration?hl=zh-cn。
如果您对过多的资产应用预缓存，或者如果在页面有机会完成关键assets的加载之前就注册了 Service Worker，就可能会遇到问题。
当 Service Worker 在安装过程中预缓存资源时，会同时启动一个或多个网络请求。如果时间不合适，可能会给用户体验带来问题。 即使时机恰到好处，但如果预缓存资产的数量没有在某种程度上加以限制，它仍然可能浪费数据。
2. 设计缓存策略
- 静态资源位了加快FCP（避免静态资源阻塞），做提前生成静态资源列表+预请求的方案。
- 动态资源（媒体资源，文字资源：img / video / font）------ 拦截请求，缓存优先策略。
3. 收集静态资源列表
但是合起来处理感觉要写的好多啊，搜索了一下有没有现成的好用的plugin帮我做资源文件路径收集的。
有几个工具：
- sw-precache
内部集成了sw-toolbox 做动态缓存 - workbox
参考文档：
【🌟】https://github.com/cisen/blog/issues/655
sw-precache
在构建生成预缓存列表的插件，同时内部集成了sw0toolbox做动态缓存。
// 简单配置静态预缓存
new SWPrecacheWebpackPlugin({
cacheId: 'sw-tools',
filename: 'service-worker.js'
})
// 动态缓存配置
new SWPrecacheWebpackPlugin({
cacheId: 'sw-tools',
filename: 'service-worker.js',
runtimeCaching: [{ // 增加的配置项
urlPattern: '/.*\.png$', // 匹配规则
handler: 'cacheFirst' // 缓存策略
}]
})生成的sw文件长这样
// service-worker.js
var precacheConfig = [
[".../dist/index.js","636d...fdb4"],
[".../dist/index.css","ddc3...bf73"],
[".../dist/index.html","4d5b...9086"]
];
// 引入 sw-toolbox 代码...
toolbox.router.get("/.*.png$", toolbox.networkFirst, {});
workbox
https://developer.chrome.com/docs/workbox?hl=zh-cn
https://www.cnblogs.com/zhoulujun/p/14966754.html
参考：
https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin?hl=zh-cn
https://cloud.tencent.com/developer/article/2451385?from=15425
javascript
const { GenerateSW,InjectManifest } = require('workbox-webpack-plugin');两个API
- GenerateSW
生成一个默认的sw.js文件，自带预请求资源列表，并且可以在plugin阶段就配置好自己的资源策略，快速实现sw的功能。 - InjectManifest
自定义sw文件，可以帮我们收集预请求资源列表，但是sw文件需要自己写，需要在sw文件中自己写想要的策略模式，比较灵活
基于我们原有的webpush有关的pwa文件处理，我们只能用InjectManifest去自定义实现了。
加载
const initSW = () => {
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
if (window.requestIdleCallback) {
window.requestIdleCallback(() => {
navigator.serviceWorker.register('/service-worker.js');
});
} else {
setTimeout(() => {
navigator.serviceWorker.register('/service-worker.js');
}, 1000);
}
});
}
};缓存策略（就是上面的那两个）
- 静态资源位了加快FCP（避免静态资源阻塞），做提前生成静态资源列表+预请求的方案。
- 动态资源（媒体资源，文字资源：img / video / font）------ 拦截请求，缓存优先策略。
QA：Workbox预请求与主线程请求是否会导致重复请求？
Workbox 的预缓存机制（如 precacheAndRoute()）在安装阶段会预先下载并缓存资源。当主线程请求同一资源时，Service Worker 会直接从缓存中响应，不会触发额外网络请求。Workbox 内部已处理并发请求的去重，确保同一资源仅下载一次。
缓存优先逻辑： 预缓存的资源在安装时存入指定缓存（如 workbox-precache），后续请求直接命中缓存。
去重机制： Workbox 使用 CacheFirst 策略时，若资源已在缓存，即使主线程请求与预请求同时发生，也仅触发一次网络请求，后续请求复用缓存。
GenerateSW
直接咔咔一顿配就完事。
const { GenerateSW } = require('workbox-webpack-plugin');
new GenerateSW({
exclude: ['**/*.map'],
maximumFileSizeToCacheInBytes: 5000000, // 5MB
// navigateFallback: null,
// 配置运行时缓存策略，开发者可以自定义缓存哪些动态请求。
runtimeCaching: [
{
urlPattern: /\.(?:png|jpg|jpeg|svg|woff2|mp4)$/, // 匹配图片资源
handler: 'CacheFirst', // 缓存优先策略
options: {
cacheName: 'media-cache',
expiration: {
maxEntries: 100, // 最多缓存100个条目
maxAgeSeconds: 30 * 24 * 60 * 60, // 30天过期
},
},
},
],
skipWaiting: true,
clientsClaim: true,
})InjectManifest
类型：https://developer.chrome.com/docs/workbox/modules/workbox-build#type-InjectManifestOptions
- 准备好自己的sw模板文件。
- 文件里
self.__WB_MANIFEST会被替换成生成的静态资源列表。 - 下载work-box的sdk，这样才能用它提供好的资源缓存功能。
-
plugin配置
// https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin?hl=zh-cn
const { InjectManifest } = require('workbox-webpack-plugin');new InjectManifest({
swSrc: path.resolve(__dirname, 'public/service-worker.js'), // 基于这个模板的sw文件生成。
swDest: path.resolve(__dirname, 'public/service-worker.js'), // 输出目标的文件
exclude: [/.map/, /\.json/],
mode: 'production',
maximumFileSizeToCacheInBytes: 5000000, // 5MB
modifyURLPrefix: {
// 将相对路径转换为带前缀的绝对路径
// 如果你要替换为CDN前缀的话就在这改
},
}) -
sw文件
// https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=zh-tw
importScripts('xxxxx-workbox-sw.js')// Workbox 会在这里注入预缓存清单
const precache = self.__WB_MANIFESTif (workbox.routing) {
// 这里是预请求 / 提前缓存的策略。
workbox.precaching.precacheAndRoute(precache);
// 动态缓存
workbox.routing.registerRoute(
/.(?:png|jpg|jpeg|svg|woff2|webp)$/,
new workbox.strategies.CacheFirst({
cacheName: 'imageResources',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 200,
maxAgeSeconds: 14 * 24 * 60 * 60,
purgeOnQuotaError: true,
}),
// 只有0,200,206会被缓存
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200, 206]
})
],
})
);workbox.routing.registerRoute(
/.(?:mp4)$/,
new workbox.strategies.CacheFirst({
cacheName: 'videoResources',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 14 * 24 * 60 * 60,
purgeOnQuotaError: true,
}),
// 只有0,200,206会被缓存
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200, 206]
})
],
})
);
}
原生实现
最后补充一个原生实现动态拦截媒体资源请求并且缓存优先
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
const targetExtensions = ['.jpg', '.png', '.webp', '.mp4', '.woff2'];
const isTargetResource = targetExtensions.some(ext => pathname.endsWith(ext));
if (isTargetResource) {
event.respondWith(
// 匹配缓存
caches.match(event.request).then(cachedResponse => {
// 存在缓存则直接返回
if (cachedResponse) return cachedResponse;
// 无缓存则发起网络请求
return fetch(event.request).then(networkResponse => {
// 这里要克隆，不影响原有的response，然后直接一整个response存进去。
const clonedResponse = networkResponse.clone();
caches.open('resourceCache').then(cache => {
cache.put(event.request, clonedResponse);
});
return networkResponse;
}).catch(() => {
// 网络失败时返回兜底loading图之类的
return caches.match('/loading.png');
});
})
);
}
});