Create React App中service worker的addEventListener代码放置及非eject方案咨询

我完全懂你的困扰——直接修改CRA生成的registerServiceWorker.js确实没用，因为这个文件是框架内置的，每次构建都会被覆盖，而且手动加的监听器要么被打包工具清掉，要么时机不对没生效。好在不用eject也能搞定，给你两种靠谱的方法：

方法一：在Service Worker注册完成后添加监听器 #

CRA的registerServiceWorker函数会返回一个Promise，当Service Worker注册成功后，这个Promise会resolve出对应的registration对象。我们可以在项目的入口文件（比如src/index.js）里，用这个对象来添加fetch监听器，这样代码属于你的项目源码，不会被覆盖：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// 注册完成后添加fetch监听器
registerServiceWorker().then(registration => {
  registration.addEventListener('fetch', (event) => {
    // 这里写你的fetch处理逻辑
    console.log('捕获到fetch请求:', event.request.url);
    
    // 举个缓存优先的例子：
    // event.respondWith(
    //   caches.match(event.request)
    //     .then(cachedResponse => {
    //       return cachedResponse || fetch(event.request);
    //     })
    // );
  });
});

为什么之前的尝试没用？

• 直接修改registerServiceWorker.js：这个文件是CRA依赖包中的文件，不是你项目的源码，每次构建都会被重新生成，所以你的修改会被自动覆盖。
• 在第20行加navigator.serviceWorker.addEventListener：这个时机太早了，Service Worker还没完成注册，监听器无法绑定到有效的registration上。

方法二：自定义Service Worker文件（适合复杂逻辑） #

如果你的Service Worker需要更复杂的逻辑（比如缓存策略、消息通信等），可以直接在项目中创建src/service-worker.js文件，CRA会自动识别并使用这个文件，而不是默认的registerServiceWorker.js里的逻辑。

比如在src/service-worker.js中写fetch监听器：

// 监听fetch事件
self.addEventListener('fetch', (event) => {
  // 自定义你的处理逻辑
  event.respondWith(
    // 先从缓存找，找不到再请求网络
    caches.match(event.request)
      .then(cachedResponse => {
        return cachedResponse || fetch(event.request);
      })
  );
});

然后在src/index.js中，把原来的注册代码改成：

import { register } from 'react-scripts/service-worker';

if (process.env.NODE_ENV === 'production') {
  register();
}

这种方式更灵活，适合需要完全自定义Service Worker行为的场景，而且同样不需要eject。

总结 #

不用执行eject操作，只要在项目源码层面处理：要么在注册成功的回调里添加监听器，要么自定义service-worker.js文件。这两种方法都能避开修改CRA内置文件的问题，保证代码不会被构建工具覆盖。

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