如何使现有的 React 应用程序可安装（PWA）？

Question

我已经用 React 实现了一个网络应用程序。现在我想让它成为一个可安装的渐进式网络应用程序（PWA），即当用户在移动设备上打开该应用程序时，浏览器应显示默认安装提示。

我该如何实现这一目标？

Answer 1

首先，您应该阅读有关 PWA 的一般指南，例如，这里的指南：学习 PWA

对于您的情况，您应该特别阅读本节：PWA 安装

简而言之：Manifest 和 Service Worker

它们都需要出现在您的应用程序中，以便浏览器将其检测为可安装的 PWA。

情况 A：使用 PWA 功能从头开始启动一个新的 React 应用程序

有一个可用的入门项目create-react-app，其中包括可安装的 PWA 应用程序的工作设置：https://create-react-app.dev/docs/making-a-progressive-web-app/

情况 B：使用 PWA 功能扩展现有的 React 应用程序

如果您已经在开发没有 PWA 功能的现有 React 应用程序，请尝试以下操作。

1. 在另一个目录中，从https://create-react-app.dev/docs/making-a-progressive-web-app/查看起始项目（按照那里的步骤操作）
2. 将清单 ( public/manifest.json) 和相关文件（例如图标，如果还没有的话）复制到现有项目目录中
3. 还复制 Service Worker 相关文件：service-worker.js和serviceWorkerRegistration.js
4. 在您的文件中注册 Service Worker index.js：

serviceWorkerRegistration.register();

5. 复制 package.json 文件中带有“workbox”的所有内容。（感谢 dArKrEsQ）