Workbox Service Worker在第二个HTML页面失效问题求助

嘿，这个场景我之前碰到过类似的，结合Workbox的预缓存机制和浏览器对Service Worker的处理逻辑，核心原因大概率是这两点：

1. 在线访问时SW更新触发了失败卸载：当你直接在线打开餐厅详情页时，浏览器会自动检查Service Worker文件是否有变化。如果Workbox生成的预缓存清单里的资源路径（比如用了相对路径restaurant_details.html）和当前页面的URL上下文不匹配，新的SW会安装失败，浏览器就会自动卸载旧SW并清空关联的缓存——但离线时浏览器不会触发SW更新检查，只会直接读取已缓存的资源，所以能正常访问。
2. SW作用域与路径匹配冲突：如果你的详情页是子路径（比如/restaurants/xxx.html），而Workbox生成的SW在预缓存时没处理好绝对路径，在线时浏览器会觉得当前页面的请求不在SW的控制范围内，进而触发SW的注销。

1. 修正预缓存清单的路径配置 #

先打开Workbox生成的sw.js，找到precacheAndRoute里的预缓存数组，确保所有HTML文件用绝对路径（比如/index.html、/restaurant_details.html）。如果是用generateSW模式生成的SW，直接修改workbox-config.js：

// workbox-config.js
module.exports = {
  globDirectory: './dist/', // 你的静态资源目录
  globPatterns: [
    '**/*.{html,css,js,png}'
  ],
  swDest: './dist/sw.js',
  // 关键：把相对路径转成绝对路径
  modifyURLPrefix: {
    '': '/'
  }
};

然后重新生成SW：workbox generateSW workbox-config.js

2. 用绝对路径注册SW #

不管是首页还是详情页，注册SW时都用绝对路径，确保作用域覆盖所有页面：

// 在两个HTML文件里都添加这段注册代码
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW注册成功:', reg))
      .catch(err => console.log('SW注册失败:', err));
  });
}

3. 调试时临时跳过SW等待（可选） #

如果是SW更新时的等待机制导致的问题，可以在sw.js开头加这段代码，让新SW直接激活：

self.addEventListener('install', event => {
  event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
});

这只是临时调试用的，最终还是要确保路径正确，避免安装失败。

4. 用开发者工具验证状态 #

在线访问详情页前，打开浏览器DevTools的Application面板，查看Service Workers和Cache Storage：

• 如果SW变成redundant状态，说明安装失败，控制台会有错误提示，一般就是预缓存资源找不到，这时候对应调整路径就行。

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