React嵌套路由下Workbox生成的Service Worker注册失败如何解决？

问题根因 #

报错的核心原因是在嵌套路由页面下使用相对路径请求service-worker.js时，浏览器会将路径解析为https://my-app.com/someroute/service-worker.js，但你的service worker文件实际打包在站点部署根目录下，服务器找不到对应路径的js资源，就返回了SPA的兜底index.html文件，因此浏览器识别到的MIME类型为text/html而非预期的application/javascript，触发注册失败。你之前设置的directoryIndex参数用于处理静态资源目录索引逻辑，和该问题无关因此无法生效。

解决方案 #

1. 修改Service Worker注册路径为绝对路径 #

找到项目中service worker注册逻辑，将相对路径替换为适配部署路径的绝对路径，React项目可直接用PUBLIC_URL环境变量适配：

// 原错误写法（相对路径）
navigator.serviceWorker.register('./service-worker.js')

// 修改后的正确写法
navigator.serviceWorker.register(`${process.env.PUBLIC_URL}/service-worker.js`, {
  scope: `${process.env.PUBLIC_URL}/`
})

如果你的应用直接部署在域名根路径，也可以直接写死为'/service-worker.js'。

2. 调整Workbox配置 #

给GenerateSW配置新增路由兜底参数，确保SPA嵌套路由的缓存逻辑正常：

new GenerateSW({
    cacheId: 'my-app',
    skipWaiting: true,
    clientsClaim: true,
    exclude: [/\.map$/, /^manifest.*\.js(?:on)?$/, /\.html$/],
    // 新增：SPA导航请求统一兜底到index.html
    navigationFallback: `${process.env.PUBLIC_URL}/index.html`
}),

3. 可选：配置服务器响应头（作用域扩展场景） #

如果你需要service worker的作用域覆盖站点全路径，需要在服务器返回service-worker.js的响应中添加Service-Worker-Allowed头，nginx配置示例如下：

location ~* (service-worker\.js)$ {
  add_header Service-Worker-Allowed /;
  expires off;
  add_header Cache-Control "no-cache";
}

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