将你的网站转换为高质量 PWA

将网站转变为功能齐全的高质量 PWA（渐进式 Web 应用程序）可以在午餐时间完成！ 本文将介绍端到端过程。

步骤 1：在 PWA 生成器中创建报告卡

首先，需要检查网站是否具有出色的 PWA 所需的功能和元数据。

1. 导航到 PWA 生成器
2. 输入要转换为 PWA 的网站的 URL，然后单击“开始”
3. PWA 生成器将显示 PWA 报告卡，指示网站具有和没有的功能。

步骤 2：查看 PWA 报告卡

PWA 报告卡包含网站分数（最高分数为 100）。 该分数基于三个功能类别。

file:///

PWA 评估网站的 Web 应用程序清单（如果有）并标识必填、建议和可选的字段或值。 可以通过添加缺失值，要么编辑和重新发布清单文件，要么使用联机清单编辑器来提高分数。

警告

联机清单编辑器中所做的更改不会发布到网站。 所做的更改仅在创建 PWA 时由 PWA 生成器使用。

必填值必须存在，否则 PWA 生成器将无法创建 PWA。 必填字段仅包括一个清单、图标、名称、短名称和一个 start_url。

建议字段不是必需的，但对于 PWA 用户体验非常重要。 强烈建议你提供所有建议的值，虽然 PWA 生成器可以在没有这些值的情况下创建 PWA。 建议的值包括显示模式、初始屏幕背景颜色、说明、方向、屏幕截图、高分辨率图标、可屏蔽图标、类别和快捷方式。

可选字段不是必需的，但可在适当情况下指定。 可选字段包括年龄分级和相关应用程序。

服务工作进程

服务辅助角色在后台运行以启用丰富的 Web 应用功能，否则会出现 404 错误。 PWA 生成器需要服务工作进程来创建 PWA，但是如果没有服务工作进程，可以使用由 PWA 生成器提供的多个预生成服务工作进程中的一个。 若要使用预生成的服务工作进程，请执行以下操作：

1. 在菜单中选择“服务工作进程选项”选项卡。
2. 从精选列表中选择相应的服务工作进程。 请注意，有许多预生成选项；确保选择最适合特定用例的服务工作进程。
3. 选择要使用的服务工作进程后，将返回到 PWA 报告卡。

安全性

使用 PWA 生成器生成的所有 PWA 都需要三个安全协议。

1. 站点必须使用 HTTPS。

2. 站点必须具有相应的 HTTPS 证书。

   如果网站没有 HTTPS 证书，你可以发布到 Azure 以获得内置的 HTTPS 支持。 此外，还有免费的第三方工具（如 Letsencrypt）允许你免费获取 HTTPS 证书。

3. 你的站点不得包含混合内容。 混合内容是指通过 HTTPS 提供的页面包含通过 HTTP 加载的资源。 混合内容会影响 HTTPS 和 PWA 的安全性。

步骤 3：从合作伙伴中心收集重要信息

需要从合作伙伴中心帐户获取信息块，以创建 PWA。 如果没有 MSA，请单击此处获取入门说明。 还需要注册 Windows 开发人员计划。

如果尚未这样做，则需要通过保留新名称创建 PWA 应用。 保留名称后，单击“开始提交”按钮以创建新的应用提交。

接下来，单击“产品管理”选项卡，然后选择“产品标识”。 产品标识页将列出产品的包 ID、发布者 ID 和发布者显示名称。 保存这些值并返回到 PWA 生成器。

步骤 4：在 PWA 生成器上生成 PWA

现在，你已拥有在 PWA 生成器上创建 PWA 所需的一切。 返回到 PWA 生成器站点，然后单击“生成”。

PWA 生成器将提示你输入从步骤 3 合作伙伴中心获取的信息。 填写值，然后单击“生成”。

在 PWA 生成器创建 PWA 后，浏览器会自动下载它。 PWA 打包在包含六个文件的 .zip 文件中。

msix 文件是 PWA 的主应用包。 此文件将在用户计算机上安装 PWA。

appx 文件是经典应用包。 它用于在旧版本的 Windows 上安装 PWA。 有关详细信息，请参阅经典应用包。

步骤 5：将应用包提交到 Microsoft Store

这些包可以提交到 Microsoft Store，与其他任何打包为 MSIX 文件的应用的方式相同。 有关向应用商店提交 PWA 包的更多说明，请参阅应用提交。