serviceWorker缓存资源-EW帮帮网

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

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_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');
        });
      })
    );
  }
});

serviceWorker缓存资源