Service Worker已注册但无事件触发，求问题排查方案

1. 日志查看位置错误 #

页面控制台只会输出注册成功的日志，Service Worker的install/activate/fetch事件日志不在页面控制台。需要在Firefox开发者工具的Application面板中，找到对应Service Worker，点击Inspect打开它的专属控制台，才能看到这些事件的输出。

2. Install事件未触发（或未重复触发） #

如果浏览器已缓存过该Service Worker脚本，后续注册不会重复触发install事件。解决方式：

• 修改worker.js内容（比如添加注释/* v1.1 */），让浏览器检测到脚本更新；
• 注册时添加强制更新配置：

  navigator.serviceWorker.register('./worker.js', { updateViaCache: 'none' })
  

3. Activate事件未自动触发 #

默认情况下，新安装的Service Worker需要等待所有被旧Service Worker控制的页面关闭后，才会触发activate事件。要立即激活，可在install事件中添加self.skipWaiting()：

self.addEventListener("install", event => {
   console.log("Service worker installed");
   self.skipWaiting(); // 强制立即激活新的Service Worker
});

4. Fetch事件未触发的排查点 #

• 确保请求资源在作用域内：你用相对路径./worker.js注册，作用域为站点根目录（/），test.png的请求路径符合要求；
• 规避浏览器强缓存：如果test.png已被强缓存，不会触发fetch事件，可修改请求路径添加随机参数测试：

  img.src = "./test.png?t=" + Date.now();
  

• 代理配置验证：当前Apache的ProxyPass将/映射到Tomcat的/test/，/test.png会被正确转发到Tomcat的test/test.png，这部分配置无问题。

额外检查项 #

• 验证worker.js的响应头：确保Tomcat返回的Content-Type为application/javascript，错误的MIME类型会导致Service Worker无法正常运行；
• 清除Service Worker缓存：在Application面板的Service Workers中点击Unregister，刷新页面重新注册，排除旧缓存干扰。

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