Workbox 3中废弃的workbox.runtimeCaching.Handler替代实现咨询

嘿，我对Workbox从v2升级到v3的API变化挺熟悉的，你遇到的问题其实是因为Workbox 3彻底重构了runtime caching的实现方式——原来的workbox.runtimeCaching.Handler基类确实被废弃移除了，不过实现你想要的「总是请求网络并更新缓存」的功能，反而比之前更灵活了，下面给你两种可行的方案：

方案一：自定义路由处理回调 #

这是最灵活的方式，完全复刻你原来自定义Handler的逻辑：

importScripts('workbox-sw.prod.v3.6.3.js');

// 配置缓存名称和过期规则（和你原来的cacheOptions对应）
const TARGET_CACHE_NAME = 'your-custom-cache';
const cacheExpirationOptions = {
  maxEntries: 50, // 缓存最大条目数
  maxAgeSeconds: 30 * 24 * 60 * 60, // 缓存有效期30天
};

// 注册缓存过期规则
workbox.expiration.registerCacheList([{
  cacheName: TARGET_CACHE_NAME,
  ...cacheExpirationOptions,
}]);

// 自定义处理函数，实现核心逻辑
const alwaysNetworkWithCacheUpdate = async ({ event, request }) => {
  try {
    // 优先发起网络请求
    const networkResponse = await fetch(request);
    
    // 网络请求成功时，更新缓存
    if (networkResponse.ok) {
      const cache = await caches.open(TARGET_CACHE_NAME);
      await cache.put(request, networkResponse.clone());
    }
    
    // 返回网络响应
    return networkResponse;
  } catch (error) {
    // 网络失败时，回退到缓存中的内容
    return caches.match(request);
  }
};

// 注册路由，匹配你需要处理的请求路径
workbox.routing.registerRoute(
  ({ url }) => url.pathname.startsWith('/your-target-api/'), // 替换为你的目标路径规则
  alwaysNetworkWithCacheUpdate,
  'GET' // 指定只处理GET请求
);

方案二：复用内置的NetworkFirst策略 #

Workbox 3内置的NetworkFirst策略，核心逻辑就是优先网络请求、成功则更新缓存、失败回退缓存，和你自定义的AlwaysNetworkWithCacheUpdateHandler功能几乎一致，直接用它能减少重复代码：

importScripts('workbox-sw.prod.v3.6.3.js');

workbox.routing.registerRoute(
  ({ url }) => url.pathname.startsWith('/your-target-api/'), // 匹配规则
  new workbox.strategies.NetworkFirst({
    cacheName: 'your-custom-cache',
    plugins: [
      // 添加缓存过期插件
      new workbox.expiration.Plugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60,
      }),
      // 如果需要额外的自定义逻辑，可以添加自定义插件
      {
        didFetch: async ({ request, response }) => {
          // 这里可以添加你专属的缓存更新逻辑，比如只缓存特定状态码
          if (response.status !== 200) {
            // 跳过非200状态的响应缓存
            return;
          }
          const cache = await caches.open('your-custom-cache');
          await cache.put(request, response.clone());
        },
      },
    ],
  }),
  'GET'
);

关键变化说明 #

• Workbox 3不再需要创建WorkboxSW实例，直接使用顶级的workbox命名空间API即可。
• 原来的类继承Handler的方式被替换为异步回调函数或内置策略+插件的组合模式，这种设计更符合现代JS的函数式编程风格，也更灵活。
• 缓存过期、缓存刷新等功能都通过插件系统实现，和v2的workbox-cache-expiration功能完全兼容。

内容的提问来源于stack exchange，提问作者Giuseppe D'Andria