React转PWA时ServiceWorker注册失败 提示MIME类型不支持

问题核心原因 #

报错本质是访问https://frontend-calyaan.vercel.app/service-worker.js时，服务端没有返回预期的JS脚本，而是返回了text/html类型的内容（绝大多数情况是Vercel单页应用配置的兜底index.html页面）。Service Worker注册要求脚本必须返回application/javascript类型的MIME值，拿到HTML内容就会直接抛出注册失败错误。

解决步骤 #

• 确认Service Worker文件位置
  编译后的service-worker.js必须放在站点根目录可直接访问的位置：原生React项目放在public文件夹下，使用Workbox、vite-plugin-pwa、CRA PWA模板等自动生成SW的工具时，要检查构建配置确保SW产物输出到构建结果的根目录，不要嵌套在assets等子路径下。
• 配置Vercel路由规则避免SW路径被兜底拦截
  在项目根目录新建vercel.json配置文件，优先匹配SW路径，避免其走SPA的HTML重写规则，参考配置如下：

{
  "rewrites": [
    {
      "source": "/service-worker.js",
      "destination": "/service-worker.js"
    },
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

注意SW的匹配规则必须放在通用路由兜底规则之前，否则不会生效。

• 校验部署结果
  重新部署后直接在浏览器访问你的SW地址，确认页面返回的是JS代码而非HTML内容，在网络面板检查响应头的Content-Type字段值为application/javascript即可正常注册。
• 排查常见坑点
  • 注册Service Worker时不要写错脚本路径，路径拼写错误会触发Vercel的404兜底，同样返回HTML内容
  • 如果修改配置后仍不生效，清除Vercel项目的构建缓存后重新触发部署，避免旧构建产物或缓存规则干扰
  • 不要给Service Worker设置超出其存放路径的注册scope，默认根路径注册的场景下SW文件必须存放在站点根目录

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