使用create-react-app创建项目无Service Worker，生成reportWebVitals.js问题咨询

嘿，我之前也碰到过一模一样的情况！这其实是Create React App（简称CRA）版本更新后的默认行为变更导致的，不用慌，咱们一步步来解决：

为什么没生成Service Worker？ #

从CRA v4版本开始，官方默认不再自动生成Service Worker了——取而代之的是reportWebVitals.js，它的作用是帮你监控应用的核心性能指标（比如LCP、FID这些用户体验相关的指标）。而之前的CRA版本（v3及更早）默认会开启PWA支持，自动生成Service Worker文件。

如何找回Service Worker？ #

根据你的项目状态，有两种解决方案：

1. 新建项目时直接开启PWA支持 #

如果是刚创建项目，直接在创建命令里加上PWA模板参数就行：

npx create-react-app my-react-app --template cra-template-pwa

这样生成的项目会自带完整的Service Worker相关配置，执行npm run build打包后就能正常注册使用了。

2. 给已有的项目添加PWA支持 #

如果项目已经创建好了，可以手动改造：

• 首先安装必要的依赖：

  npm install workbox-webpack-plugin --save-dev
  

• 然后在src/index.js里，把原来引入reportWebVitals的代码替换成PWA的注册逻辑。你可以参考官方PWA模板的写法，引入serviceWorkerRegistration（需要复制官方模板里的serviceWorkerRegistration.js和service-worker.js文件到src目录）
• 最后运行npm run build打包项目，此时dist目录下就会生成service-worker.js文件了。

关于浏览器的"No matching service worker detected"提示 #

这个提示是因为当前运行环境里没有注册有效的Service Worker：

• 开发环境下，CRA默认不会启用Service Worker（避免缓存影响开发时的代码更新），所以即使你配置了，在npm start时也不会注册，自然会出现这个提示；
• 只有运行生产打包后的版本（比如用serve -s build启动），Service Worker才会被注册，这个提示就会消失。

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