React项目中PWA Service Worker无法注册问题求助（附代码仓库）

• 确认前端运行在生产模式：React PWA模板默认仅在生产环境注册Service Worker，开发模式（npm start）不会触发注册。你需要先执行npm run build构建生产版本，再用静态服务器（比如serve -s build）启动前端，而非直接用开发服务器运行。

• 检查index.js的注册逻辑：确保serviceWorkerRegistration.register()的调用没有被环境判断拦截。可以在注册代码前添加console.log('尝试注册Service Worker')，打开浏览器控制台确认这段代码是否执行。

• 查看浏览器控制台的错误提示：打开Chrome DevTools的Application标签，进入Service Workers面板，查看是否有注册失败的具体错误：

  • 检查build目录下是否存在service-worker.js或sw.js，若文件缺失，说明构建过程中Service Worker未被正确打包。
  • 确认运行环境：Service Worker仅支持HTTPS（localhost除外），线上部署必须使用HTTPS协议。
  • 清除旧缓存：若存在旧的Service Worker缓存，可勾选DevTools中的Update on reload强制更新，或清除站点数据后重试。

• 配置package.json的homepage字段：确保package.json中添加了"homepage": "."，该字段会影响Service Worker的作用域，缺失可能导致路径匹配失败。

• 验证Workbox配置（若使用）：cra-template-pwa默认通过Workbox管理Service Worker，检查src/service-worker.js中的缓存规则、资源匹配是否正确，避免因自定义配置的语法错误导致注册失败。

• 排查跨域问题：若前端与API不在同一域名，需在API服务器配置CORS，允许前端域名的请求，否则Service Worker拦截API请求时会触发跨域错误。

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