Workbox registerRoute缓存功能异常问题求助

看起来你的预缓存功能正常，但registerRoute就是没生效，我之前帮别人排查过类似的问题，给你梳理几个最可能的原因和解决办法：

1. 先确认请求真的匹配路由规则 #

首先打开Chrome DevTools，切换到Network面板，发起请求后检查请求的完整URL是不是真的以http://54.xx.xxx.57/开头——有没有可能实际请求用的是HTTPS？或者路径里多了个前缀？比如如果请求是http://54.xx.xxx.57/api/posts，那你的规则能匹配，但如果是https://开头，就完全不搭了。

另外，Workbox默认会忽略请求的查询参数，如果你需要匹配带查询参数的请求，可以手动写正则表达式来匹配：

workbox.routing.registerRoute(
  new RegExp('http://54.xx.xxx.57/.*'),
  // ... 策略配置
);

2. 跨域请求必须配置cacheableResponse #

如果你的页面域名和54.xx.xxx.57不是同一个，那这属于跨域请求。浏览器默认不允许Service Worker缓存跨域响应，除非你明确告诉Workbox哪些响应可以缓存。

修改你的策略配置，加上cacheableResponse：

workbox.routing.registerRoute(
  'http://54.xx.xxx.57/(.*)',
  workbox.strategies.networkFirst({
    cacheName: 'cache-posts',
    cacheableResponse: {
      statuses: [200], // 只缓存状态码为200的成功响应
      // 如果后端返回了CORS头，也可以加上，比如：
      // headers: {'Access-Control-Allow-Origin': '*'}
    }
  }),
  'GET'
);

同时要确保后端返回的CORS头是正确的，比如Access-Control-Allow-Origin要包含你的页面域名，或者设为*，否则浏览器还是会阻止缓存。

3. 检查Service Worker的作用域 #

看你的代码，Service Worker是从/dist/目录加载的（precache-manifest和workbox文件都在/dist/里），那它的默认作用域是/dist/——也就是说它只能拦截/dist/路径下的请求，根本碰不到其他域名的请求！

要解决这个问题，你需要在注册Service Worker的时候手动设置作用域为根路径：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/dist/sw.js', {
      scope: '/' // 把作用域扩大到整个网站
    })
    .then(reg => console.log('SW注册成功:', reg))
    .catch(err => console.log('SW注册失败:', err));
  });
}

另外，服务器还要配置Service-Worker-Allowed响应头，值为/，否则浏览器会拒绝你扩大作用域。比如Nginx的配置可以加这么一段：

location /dist/sw.js {
  add_header Service-Worker-Allowed "/";
}

4. 加日志排查路由是否触发 #

如果上面的方法都没用，你可以在路由里加个日志，看看请求到底有没有命中路由：

workbox.routing.registerRoute(
  'http://54.xx.xxx.57/(.*)',
  ({ event }) => {
    console.log('命中路由啦！请求URL:', event.request.url);
    return workbox.strategies.networkFirst({
      cacheName: 'cache-posts',
      cacheableResponse: { statuses: [200] }
    }).handle({ event });
  },
  'GET'
);

然后打开DevTools的Console面板，发起请求后看有没有这条日志——如果没有，说明路由根本没匹配到；如果有，那就是缓存策略的问题，再检查cacheableResponse或者后端响应头。

5. 考虑升级Workbox版本 #

你用的是Workbox v3.2.0，这个版本已经挺老了，虽然基本功能没问题，但可能存在一些已知的bug。如果上面的方法都不行，可以尝试升级到最新稳定版（比如v7），不过升级的时候要注意配置语法的变化，比如v6之后workbox.strategies的用法有一些调整。

先从前面三个点排查，尤其是跨域配置和作用域问题，这两个是最常见的坑。

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