CRA PWA本地运行正常 部署Netlify报service-worker.js 404错误

报错的核心原因是部署后的站点根路径下不存在service-worker.js文件，属于CRA PWA模板的典型配置错误：service-worker.ts存放位置错误。
cra-template-pwa-typescript模板的构建流程中，只有放在src目录下的service-worker.ts才会被TypeScript编译，同时被内置的Workbox插件处理、注入self.__WB_MANIFEST预缓存资源清单，最终编译输出为build/service-worker.js。你把文件放在public目录时，TS不会编译该文件，Workbox也无法识别处理，最终构建产物里根本没有service-worker.js，部署后自然返回404。
本地执行npx serve -s build能运行大概率是本地残留了之前正确构建的旧缓存文件，并非配置正确。

• 移动Service Worker源文件
  将public目录下的service-worker.ts移动到src目录根路径，和已有的serviceWorkerRegistration.ts保持同级，这是CRA PWA模板要求的默认位置。
• 添加Netlify路由规则（避免重写拦截）
  在public目录下新建_redirects文件，写入如下规则，保证Service Worker文件不会被Netlify的SPA重写规则拦截：

  /service-worker.js  /service-worker.js  200
  /*                  /index.html         200
  

• 清理缓存重新构建
  删除项目根目录下旧的build文件夹，重新执行构建命令：

  npm run build
  # 或yarn build
  

  构建完成后检查build目录根路径，确认存在编译后的service-worker.js文件再进行部署。
• 部署后清缓存验证
  重新部署到Netlify后，执行硬刷新（Windows按Ctrl+Shift+R，Mac按Cmd+Shift+R）清除浏览器旧缓存，再访问站点就不会再出现Service Worker注册404的错误。

不要把需要编译的TS/TSX文件放在public目录，该目录仅用于存放不需要构建处理、直接原样拷贝到产物根目录的静态资源（比如favicon、已经压缩好的静态js脚本、_redirects配置文件等）。

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