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.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);
      }
    });
  }
};
缓存策略(就是上面的那两个)
  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, // 5MB
    modifyURLPrefix: {
    // 将相对路径转换为带前缀的绝对路径
    // 如果你要替换为CDN前缀的话就在这改
    },
    })

  2. sw文件

    // https://developer.chrome.com/docs/workbox/modules/workbox-sw?hl=zh-tw
    importScripts('xxxxx-workbox-sw.js')

    // Workbox 会在这里注入预缓存清单
    const precache = self.__WB_MANIFEST

    if (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');
        });
      })
    );
  }
});
相关推荐
Mr_Mao8 分钟前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜052 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~3 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
RadiumAg4 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo4 小时前
ES6笔记2
开发语言·前端·javascript
yanlele5 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子6 小时前
React状态管理最佳实践
前端
烛阴6 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子6 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端