React项目部署Netlify后自定义Service Worker未注册，默认Workbox SW生效

问题根源 #

React（尤其是Create React App，CRA）默认会在生产构建阶段通过Workbox自动生成Service Worker，用来实现资源预缓存和离线功能。部署到Netlify后，这个自动生成的Workbox SW会覆盖你自定义的SW，导致推送通知逻辑无法生效。

解决方案 #

方案一：禁用CRA默认的Workbox SW，使用自定义SW #

1. 放置自定义SW文件
   把包含push事件监听的service-worker.js放到项目的public文件夹下，执行npm run build时，文件会自动复制到build目录根路径。

2. 修改构建命令清除默认SW
   在package.json中修改build命令，构建完成后删除CRA自动生成的SW和预缓存清单：

   "scripts": {
     "build": "react-scripts build && rm build/service-worker.js build/precache-manifest*.js"
   }
   

   同时在package.json中添加"homepage": "."，避免路径解析错误。

3. 替换注册逻辑
   在src/index.js中，移除CRA默认的SW注册代码（通常是serviceWorkerRegistration.register()），替换成你自己的registerPush函数：

   import { registerPush } from './你的文件路径/registerPush';
   
   // ...其他组件渲染代码
   
   registerPush();
   

4. 部署验证
   重新构建并部署到Netlify，打开浏览器DevTools的Application > Service Workers面板，确认生效的是你自定义的SW。

方案二：在Workbox生成的SW中注入自定义推送逻辑 #

若需要保留Workbox的离线缓存功能，同时添加推送通知逻辑，可以通过自定义构建配置合并两者：

1. 安装依赖工具

   npm install --save-dev react-app-rewired workbox-build
   

2. 创建配置覆盖文件
   在项目根目录新建config-overrides.js，内容如下：

   const { injectManifest } = require('workbox-build');
   
   module.exports = function override(config, env) {
     if (env === 'production') {
       // 移除CRA默认的GenerateSW插件
       config.plugins = config.plugins.filter(plugin => {
         return plugin.constructor.name !== 'GenerateSW';
       });
   
       // 自定义Workbox配置，注入自定义SW逻辑
       injectManifest({
         swSrc: './public/custom-sw.js', // 自定义SW文件路径
         swDest: 'build/service-worker.js',
         globDirectory: 'build/',
         globPatterns: ['**/*.{html,js,css,png,jpg,gif,svg,eot,ttf,woff,woff2}'],
       }).then(({ warnings }) => {
         warnings.forEach(console.warn);
       });
     }
     return config;
   };
   

3. 修改npm脚本

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   

4. 编写合并后的自定义SW
   在public/custom-sw.js中，保留Workbox的预缓存逻辑，同时添加你的推送监听：

   // 导入Workbox核心
   importScripts('/workbox-v3.6.3/workbox-sw.js');
   workbox.setConfig({ modulePathPrefix: "/workbox-v3.6.3" });
   
   // 保留Workbox预缓存和路由逻辑
   self.__precacheManifest = [].concat(self.__precacheManifest || []);
   workbox.precaching.suppressWarnings();
   workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
   
   workbox.routing.registerNavigationRoute("/index.html", {
     blacklist: [/^\/_/,/\/[^/]+\.[^/]+$/],
   });
   
   // 你的自定义推送通知逻辑
   self.addEventListener('push', function(event) {
     event.waitUntil(
       event.data.json()
         .then(e => {
           return self.registration.showNotification(e.title, e.body);
         })
     );
   });
   

额外注意事项 #

• 清除旧SW：测试时需在浏览器DevTools的Application > Service Workers面板点击Unregister，刷新页面后重新注册新SW。
• Netlify配置检查：进入Netlify站点的Site settings > Build & deploy > Post processing，确保“Automatic Site Optimization”中的Service Worker选项未启用（启用会覆盖自定义SW）。

内容的提问来源于stack exchange，提问作者GABRIEL R GARCIA-AVILES