使用create-react-app创建的应用程序无法获取服务工作者

Question

最近，我创建了两个React应用程序，但它们都没有服务工作者，相反生成了一个名为'reportWebVitals.js'的新文件。

这是我创建新应用后src文件夹结构：

另外，如果我们运行该应用程序并检查浏览器，它会显示“未检测到匹配的服务工作者”。

- Sumit

---

没问题。现在 CRA 默认情况下不再有 Web Worker，而是需要单独使用模板：https://create-react-app.dev/docs/making-a-progressive-web-app/。 - jonrsharpe

Answer 1

感谢 @jonrsharpe 因此，CRA在默认安装命令中不直接支持服务工作者，因为开发人员可能不会将应用程序制作为渐进式网络应用（PWA）。因此，他们决定将其作为可选项。如果您想在创建新应用程序时安装服务工作者，建议使用：

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

不要使用默认的 npx create-react-app my-app 命令创建项目。 如果需要更多帮助，请参考 https://create-react-app.dev/docs/making-a-progressive-web-app/

- Sumit

Answer 2

如果您已经有一个现有的项目，想要迁移到新版本的CRA，您可以按照以下步骤进行：

1 在电脑上的某处创建一个带有服务工作器模板的新CRA：

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

2 将新创建应用程序的 service-worker.js 文件复制到您的 src 目录中

3 从 package.json 中复制 "workbox-*" 依赖项到您的 package.json 依赖项中

4 （可选）如果要使用 web-vitals，请将 package.json 中的 web-vitals 依赖项复制到您的 package.json 文件中

不要忘记再次运行 'yarn install' 或 'npm install'

就这样了

- bukso

---

这就是我需要做的吗？我不需要调用 registerServiceWorker() 或其他什么吗？ - Ali Bdeir

如果您正在从带有现有Service Worker的CRA 3迁移到CRA 4，则我假设您已经在index.js中调用了registerServiceWorker()。如果您开始一个新项目或想要迁移旧项目而没有现有的服务工作者，则只需调用npx create-react-app my-app --template cra-template-pwa并使用/复制模板即可。 - bukso

你还需要复制 serviceWorkerRegistration.js 文件并更改 index.js 中的导入语句和函数调用，使其引用这个新文件。请注意不要改变原来的意思。 - benmneb

Answer 3

如果您已经有一个不带模板的React项目，另一种解决方法是：前往位于public文件夹中的index.html文件，在那里添加

- DarkCoder

---

感谢您分享一个不需要创建新项目的解决方案。 - Gradyn Wursten

Answer 4

你需要运行这个命令。

npx create-react-app your-app-name --template cra-template-pwa

替代

npx create-react-app your-app-name

- Aakash Tiwari

Answer 5

使用命令"npx create-react-app your-app-name --template cra-template-pwa"来创建React应用，而不是使用"npx create-react-app your-app-name"。

- Aman Gupta

---

与先前的答案重复。 - Amine Belmahi

Answer 6

当迁移全栈应用程序时，请确保完成“bukso”中的所有步骤，以及以下步骤：

• 将serviceWorkerRegistration.js文件添加到src的根目录中，就像service-worker.js一样
• 构建您的全栈应用程序，使用“npm install --global serve”安装静态服务器
• 进入客户端目录，并在静态创建的构建文件夹上运行服务器，使用“serve -s build”

- Kamen Kanchev