Workbox路由无法正常工作：迁移项目后预缓存正常但路由失效

嘿，我之前在Workbox 3 beta版本迁移项目时也碰到过类似的路由注册失效问题，给你整理几个关键排查点，一步步来应该能找到原因：

1. 确认路由注册的执行时机 #

• 确保workbox.routing.registerRoute()是在Service Worker的顶层作用域中执行的，不要把它包裹在未触发的异步回调、install/activate事件的回调内部（除非你明确知道自己在做什么）。Workbox的路由注册需要在Service Worker启动时就完成，否则无法拦截后续的请求。
• 可以加个简单的日志验证代码是否执行：

  console.log('Registering image route...');
  workbox.routing.registerRoute(/* 你的配置 */);
  

  打开Chrome DevTools的Console面板（切换到Service Worker上下文），看是否能看到这条日志，确认代码是否被正确执行。

2. 检查路由匹配规则的准确性 #

• 如果用正则匹配图片，注意正则的写法是否覆盖了你的图片路径：
  • 比如你的图片都在/assets/images/目录下，正则应该写成/^\/assets\/images\/.*\.(png|jpg|jpeg|svg)$/，而不是只匹配后缀（避免误匹配其他路径下的文件）。
• 如果是跨域图片，要确认匹配规则是否包含了完整的域名，或者用workbox.routing.matchCallback自定义匹配逻辑：

  workbox.routing.registerRoute(
    ({url}) => url.origin === 'https://your-cdn.com' && /\.(png|jpg)$/.test(url.pathname),
    // 缓存策略配置
  );
  

3. 验证缓存策略的配置 #

• 确保你正确实例化了缓存策略，并且指定了预期的缓存名称：

  const imageCacheStrategy = new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    // 跨域图片需要额外配置，处理opaque响应
    cacheableResponse: {
      statuses: [0, 200]
    }
  });
  workbox.routing.registerRoute(/\.(png|jpg)$/, imageCacheStrategy);
  

  • 重点：如果是跨域且使用no-cors模式加载的图片，必须添加cacheableResponse.statuses: [0, 200]，否则Workbox会默认跳过缓存这类opaque响应。

4. 确保Service Worker已更新并激活 #

• 旧的Service Worker可能还在控制页面，导致新的路由规则不生效：
  1. 打开Chrome DevTools的Application > Service Workers面板；
  2. 点击Update按钮，强制刷新Service Worker；
  3. 关闭所有打开的相关标签页，再重新打开，确保新的Service Worker进入Activated状态（避免处于Waiting状态）。

5. 检查Service Worker的作用域范围 #

• 如果你的Service Worker不是放在网站根目录（比如/sw.js），默认的作用域是其所在目录，可能无法拦截根目录或其他子目录下的图片请求：
  • 注册Service Worker时指定scope: '/'：

    navigator.serviceWorker.register('/subdir/sw.js', {scope: '/'})
    

  • 同时需要在服务器端设置Service-Worker-Allowed响应头，值为/，允许Service Worker跨范围注册。

6. 利用DevTools调试验证 #

• 缓存存储检查：打开Application > Cache Storage，查看是否存在image-cache缓存。如果不存在，说明路由未触发；如果存在但无图片，说明匹配成功但缓存策略有问题。
• 网络请求验证：在Network面板中勾选Disable cache，刷新页面，查看图片请求的Size列是否显示from ServiceWorker或from cache，以此判断路由是否拦截了请求。

内容的提问来源于stack exchange，提问作者Andre