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

serviceWorker缓存资源

最近打算做serviceWorker,但是发现有如下问题:

  1. 缓存策略。
  2. 收集索引资源。
  3. 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. 设计缓存策略

  1. 静态资源位了加快FCP(避免静态资源阻塞),做提前生成静态资源列表+预请求的方案。
  2. 动态资源(媒体资源,文字资源:img / video / font)—— 拦截请求,缓存优先策略。

3. 收集静态资源列表

但是合起来处理感觉要写的好多啊,搜索了一下有没有现成的好用的plugin帮我做资源文件路径收集的。

有几个工具:

  1. sw-precache
    内部集成了sw-toolbox 做动态缓存
  2. 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);}});}
};
缓存策略(就是上面的那两个)
  1. 静态资源位了加快FCP(避免静态资源阻塞),做提前生成静态资源列表+预请求的方案。
  2. 动态资源(媒体资源,文字资源: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

  1. 准备好自己的sw模板文件。
  • 文件里self.__WB_MANIFEST会被替换成生成的静态资源列表。
  • 下载work-box的sdk,这样才能用它提供好的资源缓存功能。
  1. 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前缀的话就在这改},
})
  1. 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.dtcms.com/a/265515.html

相关文章:

  • 项目——视频共享系统测试
  • 多线程(进阶)
  • PTA N个数求和
  • 基于Hadoop的京东厨具商品数据分析及商品价格预测系统的设计与实现
  • GoFastDFS:轻量级高性能分布式文件存储解决方案(Linux安装部署)
  • 云端SaaS医院信息系统源码,融合四级电子病历,基于云计算的医院信息系统
  • 【2.3 漫画SpringSecurity - 守护应用安全的钢铁卫士】
  • List中的对象进行排序处理
  • SpringBoot + LiteFlow实现流程编排
  • 苹果手机扫描PDF:整理课堂笔记、保存重要文件
  • 解锁高难度PDF!MinerU部署保姆教程 + Dify联合解析《少年百科》
  • OpenCV CUDA模块设备层-----在 GPU 上执行类似于 std::copy 的操作函数warpCopy()
  • gateway断言配置详解
  • Web基础关键_007_JavaScript 的 DOM
  • 算法学习笔记:5.后缀数组——从原理到实战,涵盖 LeetCode 与考研 408 例题
  • 华为c编程规范
  • 【大模型】从0到1:DeepSeek + Coze API调用全攻略,企业,开发个人专属AI智能体使用详解,小白也能轻松上手
  • Qt编程-qml操作(js,c++,canvas)
  • spring boot如何只修改配置文件就解决swagger漏洞
  • Spring 6 源码深度掘金:66+核心原理与高频面试攻坚指南
  • 朝鲜APT组织使用Nim语言恶意软件对macOS发起隐秘Web3与加密货币攻击
  • 中国户外品牌全球竞争力榜单发布:科技突围与文化赋能重塑行业格局
  • 现代工程科技杂志投稿
  • 后端MVC(控制器与动作方法的关系)
  • 微服务外联Feign调用:第三方API调用的负载均衡与容灾实战
  • C++之路:类基础、构造析构、拷贝构造函数
  • Rust Web 全栈开发(一):构建 TCP Server
  • Go基础(Gin)
  • Webpack 5 核心机制详解与打包性能优化实践
  • 牛客:HJ16 购物单【01背包】【华为机考】