Workbox运行时缓存在Service Worker中未生效问题求助

我来帮你排查这个问题！你提到预缓存正常但图片缓存没创建，大概率是Workbox的基础配置或者路由注册的细节没处理到位，下面是几个常见的排查方向和解决方法：

1. 确认Workbox的初始化顺序和导入方式 #

首先要确保你正确引入了Workbox核心模块，而且导入代码要在路由注册之前执行。比如如果是通过CDN引入，要在Service Worker文件开头加上：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js');

虽然你的控制台能打印register images，说明workbox对象存在，但还是要确认版本兼容性——建议使用最新的稳定版Workbox，避免API差异导致的问题。

2. 优化路由匹配规则，提高可靠性 #

你当前用的正则表达式/.*\.(?:png|jpg|jpeg|svg|gif)/可能会因为URL格式（比如带域名、子目录）出现匹配失效的情况。推荐改用更可靠的匹配方式：通过请求的destination属性来判断图片请求，代码如下：

console.log('register images');
workbox.routing.registerRoute(
  // 通过请求目标类型匹配图片
  ({ request }) => request.destination === 'image',
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'image-cache'
  })
);

这种方式不会受URL结构影响，能精准匹配所有图片资源请求。

3. 检查Service Worker的作用域和缓存触发时机 #

• 作用域问题：Service Worker默认的作用域是它所在的目录，如果你的图片资源在这个目录之外，路由规则就不会生效。注册Service Worker时可以显式指定根作用域：

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js', { scope: '/' })
        .then(reg => console.log('Service Worker registered:', reg))
        .catch(err => console.error('SW registration failed:', err));
    });
  }
  

• 缓存触发时机：image-cache只有在第一次有匹配的图片请求时才会被创建。你需要刷新页面，确保页面加载了符合规则的图片，或者手动在控制台发起一个图片fetch请求，之后再去Chrome DevTools的Application > Cache Storage里查看，就能看到对应的缓存了。

4. 借助DevTools排查状态和日志 #

打开Chrome DevTools的Application面板：

• 进入Service Workers标签，确认你的Service Worker处于Activated状态，没有报错信息；
• 勾选「Update on reload」选项，强制刷新页面，查看控制台是否有Workbox相关的日志，是否存在路由匹配失败的提示；
• 切换到Network面板，查看图片请求的Size列，如果显示(from ServiceWorker)或者from image-cache，说明缓存已经正常工作了。

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