Workbox缓存生成后无法匹配资源及SPA导航路由失效问题咨询

我之前也碰到过类似的Workbox预缓存静默失效的情况，结合你贴的代码和描述，咱们一步步来排查解决：

一、先确认Service Worker是否真的激活了 #

这是最容易忽略的关键点！打开浏览器F12的Application > Service Workers面板：

• 看看你的SW是不是处于activated状态，如果是waiting，直接点skipWaiting强制激活——旧的SW可能还在占着控制权，新的预缓存规则根本没跑起来。
• 顺便确认面板里有没有显示“This site has registered a service worker”，确保SW本身注册成功了。

二、核对预缓存的URL和实际请求路径 #

你的预缓存列表里混了绝对路径（比如/rest/resource/build.en.json）和相对路径（index.html），大概率是路径不匹配导致的：

• 去Application > Cache Storage > workbox-precache-xxxx里查看缓存的文件路径，和你实际请求的URL（Network面板里查看）是不是完全一致？比如有没有多/少开头的斜杠，或者站点部署在子目录下（比如https://xxx.com/app/），但你写的是根路径的绝对URL，那肯定匹配不上。
• 建议统一路径格式：如果你的SW是在站点根目录注册的，要么全用相对路径（把开头的斜杠去掉，比如rest/resource/build.en.json），要么确保绝对路径和站点的实际根路径完全对齐。

三、修复导航路由失效的问题 #

你的导航路由配置逻辑没问题，但可能有两个坑：

• 先确认你的SPA路由不在黑名单里：比如你访问/dashboard，这个不在你列的那些/rest/或/graphql/正则里，应该被导航路由处理。
• 把导航路由的代码放在所有其他路由注册的后面，Workbox的路由匹配是按注册顺序来的，万一有其他路由先拦截了导航请求，导航路由就没机会生效了。
• 可以在SW控制台里手动执行workbox.precaching.getCacheKeyForURL('index.html')，看看返回的缓存key是否存在于预缓存里——如果找不到key，那肯定返回不了index.html。

四、让Workbox重新输出日志 #

你开了debug: true但没日志，试试这两个办法：

• 打开Console面板，把日志级别切到All levels（别只看Info），有时候调试日志被过滤了。
• 在SW代码开头加一句console.log('Workbox SW loaded successfully!')，确认SW代码真的在运行。如果这句都不输出，那就是SW根本没加载，得先解决注册问题。

五、给你的代码做几个小调整 #

针对你贴的代码，有几个优化点可以试试：

1. 统一预缓存URL的路径，比如都用相对路径：

workbox.precaching.precacheAndRoute([
 { "url": "rest/resource/build.all.json", "revision": "9d178a1ffe18be2bce92e19fe306416d" },
 { "url": "rest/resource/build.development.css", "revision": "5ab54583dfad8742646fb861508fcc35" },
 // ... 其他文件都去掉开头的斜杠
 { "url": "index.html", "revision": "ecc5d5effdf0bed580f7f690dbb1659e" },
], {
 ignoreURLParametersMatching: [/.*/],
});

2. 简化导航路由的黑名单正则，避免转义错误：

workbox.routing.registerNavigationRoute(
 workbox.precaching.getCacheKeyForURL('index.html'),
 {
 blacklist: [
 /^\/rest\/uploads\//,
 /^\/rest\/util\//,
 /^\/rest\/autocomplete\//,
 /^\/rest\/autocomplete-check\//,
 /^\/rest\/index-check\//,
 /^\/graphql\//,
 ],
 }
);

3. 在SW开头加激活事件的监听，确保激活时接管所有页面：

self.addEventListener('activate', (event) => {
 event.waitUntil(self.clients.claim());
 console.log('Service Worker activated and claimed all clients');
});

这个clients.claim()能让激活后的SW立刻控制所有打开的页面，不用等用户手动刷新。

六、验证预缓存是否命中 #

最后，打开Network面板，勾选Disable cache（避免浏览器自带缓存干扰），刷新页面：

• 查看请求的build.en.json等资源的Size列，如果显示(ServiceWorker)或者From disk cache，说明预缓存生效了。
• 同时看Console里的Workbox日志，应该会有Precaching is responding to: /rest/resource/build.en.json这类提示。

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