React项目部署Apache后PWA无法检测到service worker报404如何解决

核心问题是你当前的配置逻辑混淆了service worker的注册文件和运行本体，导致打包后没有正确生成可访问的service worker文件，按以下步骤操作即可修复：

• 首先纠正认知：你放在src下的serviceWorker.js只是注册逻辑代码，不是真正运行在浏览器端的service worker本体文件，Create React App默认不会自动生成service worker本体，你需要先启用PWA相关配置：
  • 现有项目可以直接执行npm install workbox-webpack-plugin --save-dev安装workbox依赖，也可以直接用CRA官方PWA模板迁移业务代码：npx create-react-app my-app --template cra-template-pwa，该方式适配性最高，不会出现配置冲突
• 停止手动放service worker文件到public、项目根目录的操作，正确的文件规则是：src下的注册逻辑不需要改动，service worker本体文件会在npm run build执行时自动生成到build文件夹根目录，手动放置反而会和自动生成的文件冲突
• 检查package.json的homepage配置，如果你直接部署在Apache htdocs根目录（访问地址是localhost无二级路径），要么把homepage值设为"/"，要么直接删除该字段，使用CRA默认的根路径配置即可，错误的homepage配置会导致service worker的注册路径拼接错误
• 修正.htaccess的路由重写规则，避免拦截service worker文件请求，可直接使用以下安全规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !\.(js|json|png|jpg|gif|ico|svg|css)$
  RewriteRule . /index.html [L]
</IfModule>

• 配置完成后重新执行npm run build，把build文件夹的所有内容全量覆盖到htdocs目录，清空浏览器缓存后用无痕模式访问localhost，先手动访问http://localhost/service-worker.js，如果可以正常返回JS内容，说明路径问题已经修复，再查看控制台Application面板的Service Workers选项就能看到成功注册的服务线程，Lighthouse检测即可通过PWA校验
  额外优化提示：你当前manifest.json里的prefer_related_applications字段值是字符串"false"，要改为布尔值false，否则会触发manifest解析警告

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