首次开发PWA使用Workbox时ServiceWorker注册失败报错

解决方案 #

• 调整Service Worker注册路径，将绝对路径改为相对路径，避免live-server根目录和预期不符导致的路径匹配问题：

// 把原来的 /sw.js 改成相对路径
navigator.serviceWorker.register('./sw.js').then(function (registration) {
  // Registration was successful
  console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function (err) {
  // registration failed :(
  console.log('ServiceWorker registration failed: ', err);
});

• 检查sw.js内的Workbox导入逻辑，不要使用Node环境的裸导入语法，浏览器无法直接解析node_modules内的模块，你可以将Workbox的运行时文件下载到本地项目目录后通过importScripts导入，也可以通过打包工具（比如webpack、vite）对sw.js进行打包，把依赖合并到最终的sw.js文件中再使用。
• 确认sw.js存放在live-server启动的根目录下，不要放在src、public等子文件夹内，否则注册路径需要对应调整到对应子目录。
• 如果是MIME类型错误导致的注册失败，可以在项目根目录新建.live-server.json配置文件，指定js文件的正确响应类型：

{
  "mime": {
    ".js": "application/javascript"
  }
}

配置完成后重启live-server生效。

• 清理之前的错误注册缓存：打开Chrome开发者工具 → 选择「Application」标签页 → 左侧找到「Service Workers」分类 → 点击对应失败记录的「Unregister」按钮，同时勾选顶部的「Bypass for network」选项，再刷新页面重试即可。

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