ReactApp 中缺少 serviceWorker

Question

大家好，我最近才意识到，当 CRA(npx create-react-app myapp) src 文件夹中缺少 serviceWorker 时，我注意到了 reportWebVitals()。React 是否有一些更新可以使用 serviceWorker 并将其替换为 reportWebVitals ？或者是我做错了什么？请lmk。谢谢你

Answer 1

我这里也有同样的问题！我不知道是不是我做错了什么。但似乎 create-react-app 已经改变了管理 Service Worker 的方式。

我在 create-react-app GitHub 中找到了一种解决方法：

https://github.com/facebook/create-react-app/issues/10032

Answer 2

是的，这是 CRAv4 和 React 17 之后的更新。 Create-React-App (CRA) 样板现在设置为开箱即用地记录这些测量值。如果您想立即查看这些值，请检查您的 index.js 并将 console.log 传递到 reportWebVitals 函数中。

在更新中，他们从 Service worker 切换到 Workbox InjectManifest 插件，并将 PWA 模板移动到他们自己的存储库中。有关更多信息，您可以参考此发布文档 https://github.com/facebook/create-react-app/releases/tag/v4.0.0

Answer 3

有点晚了，但如果您想让服务人员选择加入，请尝试

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

用打字稿，

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

来源。

生产版本具有生成一流渐进式 Web 应用程序所需的所有工具，但离线/缓存优先行为仅是可选的。

从 Create React App 4 开始，您可以将 src/service-worker.js 文件添加到您的项目中，以使用对 Workbox 的 InjectManifest 插件的内置支持，该插件将编译您的 Service Worker 并向其中注入要预缓存的 URL 列表。

如果您使用 PWA 自定义模板之一启动新项目，您将获得一个 src/service-worker.js 文件，该文件可以作为离线优先 Service Worker 的良好起点。