如何在计算机上创建和安装 Progressive Web App？

渐进式 Web 应用程序或 Chrome 应用程序是在基于 Chrome 的操作系统和浏览器上安装和执行的轻量级应用程序。它支持大多数计算机设备，主要是为 Chrome OS 机器构建的。我们可以手动创建 Progressive Web 应用程序，然后将它们作为 Chrome OS 或 Chromium 浏览器中的独立应用程序安装在计算机上。

渐进式 Web 应用程序，或更通俗地称为 Chrome 应用程序，是小型 Web 应用程序，主要是内置的 JavaScript，并且与所有主要浏览器兼容。

尽管它们是轻量级的，但它们仍然设法打包了大多数必需的功能集。它们的安装只需要几秒钟，而 PWA 受欢迎的原因是它拥有人们能想到的一切。

这些应用程序提供了如此多的好处，以至于许多出版商已经开始将 PWA 对应物集成到他们的网站中。

因此，如果您是想要加入这一潮流的出版商或开发人员，那么本指南可以为您提供帮助。

以下详细说明将帮助您在计算机上创建、测试、提交和随后安装渐进式 Web 应用程序。

内容

创建 PWA 应用

在桌面上创建一个空白文件夹，为 PWA 应用程序提供与文件夹名称相同的名称。

之后，您需要在该文件夹中编写代码并创建一个清单文件。为此，请使用文本编辑器，例如 记事本++ 并创建一个新的 JSON 或者 JavaScript 对象表示法 文件。

在您的 PWA 应用程序的清单文件中输入所需的信息。它应该具有以下值：

• name - 将出现在 Chrome 网上应用店中的名称
• version - 元数据的版本
• icons - 指定项目使用的图标的数组
• description — 描述您的扩展程序的 132 个字符（最多）的字符串

例如，这是一个书签应用程序的 JSON 文件，您可以参考：

继续前进，一旦编码完成，您需要验证代码的格式是否正确。为此，您可以使用 JSON 验证器工具，例如 JSONLint .

如果验证成功，则将此文件另存为 清单.json .

接下来，您必须为您的应用程序设计一个徽标。确保尺寸为 128p x 128p .创建徽标后，将其另存为 128.png 在您的 JSON 文件所在的同一文件夹中。

而已。您已成功创建所需的 PWA 应用程序的微型版本。现在让我们对其进行测试。

测试 PWA 应用

在您的 PC 上启动 Chrome 浏览器，然后前往以下位置： 铬：//扩展/ 打开 Chrome 扩展程序页面。启用 开发者模式 从页面右上角切换，然后单击 加载未包装 按钮。

现在在资源管理器窗口中浏览并选择 PWA App 文件夹，然后点击 选择文件夹 按钮。

加载应用程序后，打开一个新选项卡并单击 Chrome 浏览器中的应用程序图标。或者，您也可以访问 铬：//应用程序/ 在地址栏中。

选择您创建的 PWA 并检查它是否正常工作。如果您发现任何问题，请对 清单.json 文件并通过上面提到的 Load Unpacked 选项将包重新加载到 Chrome。

现在再次执行检查，如果您已经解决了所有错误，请将其发布到 Chrome 网上应用店！

将您的应用发布到 Chrome 网上应用店

在继续发布应用程序之前，您首先必须验证您的目标受众。它们分为四个部分：

• 上市： 您的应用程序将可供所有人使用。
• 未上市： 仅适用于与您共享 PWA 直接链接的人。它不会出现在 Chrome 网上应用店中。
• 私人的： 仅适用于您已在开发人员仪表板中列出其名称的测试人员和调试人员。
• 集团出版商 ：适用于已支付一次性开发者费用的发布者。

下定决心后，让我们开始发布应用程序的步骤。第一的， 创建一个 ZIP 文件 您的应用程序包具有 128.png 和 清单.json 文件。

接下来，您必须将自己注册为 Chrome 网上应用店开发者 .前往 这个网站 并按照屏幕上的说明将自己注册为 Chrome 网上应用店开发者。

创建帐户后，转到 Chrome 开发者仪表板 并使用您的凭据登录。点击 添加新项目 > 选择文件 并导航到您应用的 ZIP 文件；选择并点击 上传 按钮。

上传文件后，您必须填写一些其他详细信息。填写详细信息并点击 提交审核 按钮位于右上角。

之后，如果您想在 PWA 应用程序通过审核后自动使用 Publish 公开 PWA 应用程序，请启用该复选框，然后单击 提交审核 在确认对话框中。

您的应用将接受审核并发布到 Chrome 网上应用店 如果一切都很好（如果您将目标受众设置为 上市）。

如果一切正常，您还将收到审核状态并自动发布。

在计算机上安装 PWA 应用程序

现在您的应用程序已发布，让我们将其安装到您的 PC 上。

前往 Chrome 网上应用店并打开应用详情页面。点击 添加到 Chrome 按钮（示例如下）。

点击 添加扩展 出现的确认对话框中的按钮。

而已;该应用程序已成功安装到您的 PC 上，可在 铬：//应用程序/ .

如果您已将 PWA 应用程序添加到网站，则该过程将略有不同。

前往您的网站，然后单击位于多功能框最右侧的安装图标（作为参考，让我们以 Google 的图像压缩网站 Squoosh 为例）

点击 安装 在确认框中，然后安装 PWA。

底线：创建和安装 PWA

我们完善了有关如何创建 Chrome 应用程序的指南。同样，还列出了发布然后将它们安装到您的计算机上的步骤。

考虑将您的人口统计设置为 上市 如果你想让你的 PWA 覆盖更广泛的受众。但是如果应用程序目前处于测试阶段，那么最好为其分配 Private/Unlisted 标签，对其进行全面测试，然后再将其设为 Public。

此外，验证您的应用程序没有固定的时间范围。这通常取决于您提交的应用程序的类型。无论结果如何，团队都会通过电子邮件通知您。

话虽如此，我们总结了如何创建和安装 PWA 应用程序的指南。如果您对上述说明有任何疑问，请告诉我们。

最后，这里是推荐的适用于您的计算机和手机的网络浏览器，您应该尝试一下。

如果你有任何想法 如何在计算机上创建和安装 Progressive Web App？ ，然后随时在下面