当前位置：首页 > news >正文

serviceWorker缓存资源

news 2025/7/4 19:26:06

最近打算做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.jsvar 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

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, // 5MBmodifyURLPrefix: {// 将相对路径转换为带前缀的绝对路径// 如果你要替换为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');});}));}
});

查看全文

http://www.lryc.cn/news/579756.html