React+TypeScript项目Localhost下Service Worker无法工作如何解决？

核心问题 #

你的register函数开头有个环境判断：process.env.NODE_ENV === 'production'，而localhost默认是development开发环境，所以整个注册逻辑直接被跳过了，自然不会注册Service Worker，也不会打印日志。

正确的localhost测试方案 #

方案1：构建生产包后本地运行（推荐）

这是最贴近真实生产环境的测试方式，也不会有开发环境的缓存冲突问题：

• 执行npm run build生成生产环境打包文件
• 安装静态服务器工具（比如serve）：npm install -g serve
• 运行打包后的项目：serve -s build
• 访问控制台输出的localhost地址，此时Service Worker会正常注册，你也能看到预期的日志。

方案2：修改注册逻辑强制开发环境启用（适合快速调试，但有局限性）

如果需要在开发模式下直接测试，可以修改serviceworkerRegistration.ts的环境判断条件：

• 把开头的判断行：

  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
  

  修改为：

  if ((process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development') && 'serviceWorker' in navigator) {
  

• 注意：开发模式下Create React App不会生成优化后的service-worker.js，且webpack-dev-server的热更新会和Service Worker的缓存机制冲突，可能导致页面无法实时更新，调试时需要手动清除缓存或刷新Service Worker。

关于硬编码注册的问题 #

你直接在index.html里写的注册路径frontend/src/service-worker.ts是错误的：

• 开发模式下，项目的静态资源路径不是源码路径；生产模式下，打包后的Service Worker会在build根目录下，且CSP限制不允许直接加载源码目录的文件，所以会报错。

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