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

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

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

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

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

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

内容

创建 PWA 应用

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

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

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

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

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

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

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

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

Chrome 应用清单 JSON 文件和图像

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

测试 PWA 应用

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

在中启用扩展开发者模式 Chrome 浏览器并添加本地解压扩展文件夹

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

选择 Chrome 用于测试的 App PWA 文件夹 Chrome 浏览器

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

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

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

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

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

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

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

压缩 Chrome 应用程序文件夹到 ZIP

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

注册为 Chrome 网上商店开发人员

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

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

提交 Chrome 供审查的 PWA 应用程序

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

提交 Chrome 与开发团队一起审查的 Web 应用程序

您的应用将接受审核并发布到 Chrome 网上商店 如果一切正常（如果您将目标受众设置为公开）。

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

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

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

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

添加 Chrome 延期 Chrome 网页启动器

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

添加 Chrome 网上商店启动器 Chrome 浏览器

就是这样; 该应用程序已成功安装到您的 PC 上，可在 chrome：//应用/.

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

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

URL 或地址栏中的安装图标

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

安装 Squoosh PWA 应用程序 Chrome 浏览器

底线：创建和安装 PWA

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

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

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

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

Related Posts