【发布时间】：2022-06-21 21:08:17
【问题描述】：
我已经使用 React 实现了一个 Web 应用程序。现在我想让它成为一个可安装的 Progressive Web App (PWA)，即当用户在移动设备上打开应用程序时，浏览器应该显示默认的安装提示。
我如何做到这一点？
【问题讨论】：
标签： reactjs progressive-web-apps
【发布时间】：2022-06-21 21:08:17
【问题描述】：
首先，您应该阅读有关 PWA 的一般指南，例如，这里是：Learn PWA
在您的情况下，您应该特别阅读本节：PWA installation
简而言之：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 应用程序，请尝试以下操作。
- 在另一个目录中，从https://create-react-app.dev/docs/making-a-progressive-web-app/ 签出启动项目（按照那里的步骤操作）
- 将清单 (
public/manifest.json) 和相关文件（例如图标，如果您还没有的话）复制到您现有的项目目录中 - 同时复制 service worker 相关文件：
service-worker.js和serviceWorkerRegistration.js - 在您的
index.js文件中注册服务人员：
serviceWorkerRegistration.register();
- 从 package.json 文件中用“workbox”复制所有内容。 （感谢 dArKrEsQ）
【讨论】：
-
对于情况 B，您还应该从 package.json 文件中复制带有“workbox”的所有内容。