将 React 项目转换为 Progressive Web App

Question

我创建了一个 Web 应用程序（symfony 后端和 React 前端），我对制作一个渐进式 Web 应用程序很感兴趣。总的来说，这似乎是可行的。你需要创建一个 manifest.json 和一个 service worker。 但是，我不知道在哪里创建这两个文件，以便在我进行 npm run build （或者甚至 npm run dev server 如果可行的话）时将其考虑在内。当我将这些文件拖到根目录时，浏览器告诉我它没有找到任何这些文件。

Answer 1

您可以按照以下命令使用 PWA 模板引导您的应用程序：

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

添加参数--template cra-template-pwa 以创建具有服务工作者的应用程序。

您新创建的项目的目录包含文件index.js。打开它，找到如下代码：

serviceWorker.unregister();

这里可以看到serviceWorker还没有注册。您必须将unregister() 调用更改为register()。

serviceWorker.register();

为您的渐进式网络应用配置网络应用清单，该清单位于 public 目录中的 manifest.json 文件中。在这里，您需要更改负责应用程序外观的元数据。