向 Google Play 添加渐进式 Web 应用

1. 欢迎

在本实验中，您将使用一个已部署的现有 Progressive Web App，并将其封装到一个应用中，以供在 Google Play 商店中分发。

学习内容

  • 如何使用 Bubblewrap 为 Google Play 商店打包渐进式 Web 应用
  • 什么是签名密钥以及如何使用签名密钥
  • 如何在 Google Play 开发者控制台中创建新应用以及如何设置测试版本以在发布之前测试您的应用
  • 什么是 Digital Asset Links，以及如何将它们添加到您的 Web 应用

注意事项

您需要满足的条件

  • 一种在互联网上发布的渐进式 Web 应用，您可以对其进行更改
  • 已安装并可供使用的对话泡命令行界面
  • Google Play 开发者帐号
  • 您的现有签名密钥（如果您已在 Google Play 中发布应用）
  • 要用于测试的 Android 或 Chrome 操作系统设备

哪些项目不在保证范围内

  • 将 PWA 限制为仅适用于 Android 或 Chrome 操作系统设备
  • 在同一个应用下，为 Chrome 操作系统部署 PWA，并为移动设备部署 PWA。
  • 如何遵循 PWA 中的 Google Play 付款政策。

2. 对话泡封装 PWA

对话泡封装是一款工具，可让您像运行几个 CLI 命令一样轻松地将渐进式 Web 应用封装到 Android App Bundle 中。为实现此目的，它会生成将 PWA 作为可信网络活动启动的 Android 项目。

首先，为您的项目创建一个目录并在其中移入：

$ mkdir my-pwa && cd my-pwa

然后，运行 Bubblewrap 命令行工具，为您将要上传到 Play 的 Android App Bundle 生成配置和 Android 项目：

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

在此示例中，Bubblewrap 使用 PWA 的 Web 应用清单文件的位置进行初始化。此操作会从 Web 应用清单中生成默认配置，并启动控制台向导，让您更改默认配置。按照向导更改该工具生成的任何值。

气泡封装 CLI 向导会显示来自 Airhorner 的初始化，网域已替换为 example,.com，且起始网址已被替换。

签名密钥

Google Play 商店要求在上传应用软件包时用证书进行数字签名，通常称为签名密钥。这是一个自签名证书，不同于通过 HTTPS 提供应用的证书。

创建应用时，气泡框会要求您提供密钥的路径。如果您的应用使用的是现有的 Play 商品详情，您需要添加指向该商品详情使用的相同密钥的路径。

气泡封装 CLI 向导会询问用户现有的签名密钥位置和名称。

如果您当前没有签名密钥，并且要在 Play 商店中创建新的商品详情，则可以使用 Bubblewrap 提供的默认值，让它为您创建新密钥：

气泡封装 CLI 向导会询问用户是否要创建新的签名密钥。

气泡封装输出

初始化对话泡项目并完成向导后，系统将会创建以下内容：

  • twa-manifest.json - 项目配置，反映在 Bubblewrap 向导中选择的值。您需要使用版本控制系统跟踪此文件，因为它可用于重新生成整个对话泡封装项目（如果需要）。
  • Android 项目文件 - 目录中的其余文件是生成的 Android 项目。此项目是用于 Bubblewrap 构建命令的源代码。您也可以使用版本控制系统跟踪这些文件。
  • （可选）签名密钥 - 如果您选择让气泡框为您创建签名密钥，该密钥将输出到向导中所述的位置。请务必将密钥保存在安全的地方，并限制有权访问该密钥的人数；该密钥用于证明 Play 商店中的应用由您提供。

有了这些文件，我们现在就可以构建 Android App Bundle 了。

构建 Android App Bundle

在运行 Bubblewrap' 初始化命令的同一目录中，运行以下命令（需要使用签名密钥的密码）：

$ bubblewrap build

用于构建项目的 Bubblewrap CLI 输出，要求提供签名密钥的密码，并显示不同版本的 Android 应用的生成。

构建命令将生成两个重要文件：

  • app-release-bundle.aab - 您的 PWA 的 Android App Bundle。该文件就是您要上传到 Google Play 商店的文件。
  • app-release-signed.apk - 一种 Android 打包格式，可用于使用 bubblewrap install 命令将应用直接安装到开发设备上。

3.试试看 - 气泡膜

现在该您亲自试试了！使用您在上一步中学到的知识来尝试完成以下操作：

  1. 创建一个目录以保存生成的 Android 项目。
  2. 使用 Bubblewrap 和 PWA 的 Web 应用清单初始化该目录。
  3. 请生成新的签名密钥，或重复使用现有的密钥（如果有）。
  4. 从生成的 Android 项目构建 Android App Bundle。

4.将应用添加到 Google Play 商店

现在，您已获得适用于 PWA 的 Android App Bundle，现在可以将其上传到 Google Play 商店了！注册开发者帐号后，您可以前往 Play 管理中心登录并开始使用。

创建应用

登录后，您会看到一个屏幕，其中显示所有应用。顶部附近有一个创建应用按钮；点击该按钮后，系统会显示以下屏幕，用于指导您创建新的 Android 应用详情。

显示 Play 管理中心的“创建应用”表单的屏幕。

您可以填写很多字段，包括应用名称、默认语言、应用、游戏、免费还是付费，以及多种声明。您必须同意声明，才能创建应用，因此在同意声明之前，请务必仔细阅读和理解相应声明。

填写所有信息并点击表单底部的创建应用按钮后，系统会将您转到新应用的信息中心。在该信息中心，您会看到一些任务核对清单，其中包括完成设置、开始测试和发布应用所需完成的任务。

设置内部测试

通过内部测试，您可以快速让应用顺利发布，而无需经过审核向所选的一组受信任的测试人员进行审核。查看立即开始测试核对清单中的任务，然后选择选择测试人员。

“立即开始测试”核对清单

点击该任务可转到 Internal Testing 页面。您可以在此处管理应用的测试设置。要打开应用，可以打开边栏的发布菜单下的测试部分。要做的第一件事，就是创建测试人员列表，以便测试您的应用。为此，请点击页面的测试人员部分中的创建电子邮件收件人列表链接。这将打开一个弹出式窗口，以创建您的电子邮件列表。

这个弹出式窗口显示创建电子邮件收件人列表表单，其中包括列表名称、电子邮件地址、用于上传电子邮件地址 CSV 文件的链接，以及显示上传哪些电子邮件地址的区域。

在此弹出式窗口中，您可以为电子邮件列表命名，并可手动输入电子邮件地址或上传 CSV 格式的电子邮件地址。完成后，按保存更改按钮。您将能够返回到您已创建的电子邮件列表，根据需要添加或移除电子邮件地址。添加测试人员后，您就可以创建测试版本了。点击页面顶部的创建新版本按钮。

内部测试页，其中有指向“新建版本”按钮的箭头。

创建测试版本

点击创建新版本按钮后，系统会提示您查看多个部分。第一个是应用完整性，您可以在其中选择如何管理应用的签名密钥。默认选项是让 Google 来管理您的签名密钥。我们推荐使用这种方法，因为该选项既安全又便于应用恢复，以防您丢失上传密钥。

Play 应用签名

该流程图展示的是开发者及其上传密钥（从左到右），随后他们的应用签名，并将其发送给 Google。然后，Google 会获得一个应用签名密钥并使用该密钥为应用签名，然后将该密钥提供给用户

应用上传和最终确定

选择如何管理您的签名密钥后，系统会要求您将 app bundle 上传到您的版本。为此，请将 Bubblewrap 生成的 app-release-bundle.aab 文件拖放到该表单中。要完成发布，请先填写其余版本的详细信息，点击保存，然后点击检查版本，最后点击开始发布内部测试按钮，开始发布该版本。这样，内部测试人员就可以获取您的应用！返回内部测试页面的测试人员标签页后，您可以复制链接并分享给测试人员，以便他们能够访问您的应用。

内部测试页，其中带有一个指向复制链接的链接的箭头，用于与测试人员分享测试链接。

5. 试试看 - 创建应用

现在该您亲自试试了！使用您在上一步中学到的知识来尝试完成以下操作：

  1. 在 Play 管理中心内为您的 PWA 创建新应用。
  2. 为应用设置内部测试，并将您自己添加为测试人员。
  3. 上传您的 app bundle 并为您的应用创建测试版本。
  4. 使用测试链接在 Android 或 Chrome 操作系统设备上从 Play 商店安装您的应用！

6. 数字资产链接

如果您曾在 Play 中测试过 PWA，可能会发现它并未全屏运行。这是因为您尚未通过 Digital Asset Links 文件验证网站的所有权。虽然 Bubblewrap 能够配置和构建您的 Android App Bundle，但您需要通过更新 Web 应用来完成关联。

获取您的应用的 SHA-256 指纹

要配置 PWA 的数字资产链接，您需要使用 SHA-256 指纹作为证书，证书用于对用户在手机上收到的文件包签名。

使用 Play 应用签名功能

如果您在创建版本时为您的应用设置了 Play 应用签名（以前建议使用此版本），则可以在 Play 管理中心内找到 SHA-256 指纹。请注意，此证书与用于上传应用的证书不同。要获取指纹，请在 Play 管理中心的应用内转到 Releases->Setup->App Integrity。然后，您会在应用签名密钥证书下看到许多选项。复制 SHA-256 证书指纹的值。

“应用完整性”屏幕，其中突出显示了 SHA-256 证书指纹。

不使用 Play 应用签名功能

如果您选择退出 Play 应用签名计划，则用于签署最终应用的密钥将与您将应用上传到 Play 管理中心时使用的密钥相同。您可以使用 Java 的 keytool 来提取指纹：

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

要使用此密钥，您需要知道签名密钥的路径以及相关密码。复制 SHA256 密钥的十六进制值。

气泡封装功能可以管理您已检索到的签名指纹，并为您生成正确的 Digital Asset Links 文件。如需使用 Bubblewrap 添加指纹，请从 Bubblewrapping Your PWA 中创建的同一目录中运行以下命令，将 <fingerprint> 替换为从上一步中复制的指纹。

$ bubblewrap fingerprint add <fingerprint>

此命令会将指纹添加到应用的指纹列表中，并生成 assetlinks.json 文件。将此文件上传到 PWA 所在同一来源的 .well-known 目录中。

7. 试试看 - Digital Asset Links

现在该您亲自试试了！使用您在上一步中学到的知识来尝试完成以下操作：

  1. 查找您的应用的 SHA-256 指纹。
  2. 为您的应用生成 Digital Asset Links 文件。
  3. 将您的 Digital Asset Links 文件上传到 PWA。
  4. 使用 API 和测试应用验证您的 Digital Asset Links 文件的设置是否正确。

8. 知识测验

在学完本课程之前，请回答下列问题，测试您对所学知识的掌握情况，并了解所学内容。不要看一看答案！

在使用 Bubblewrap 生成 Android 项目后，Sally 将生成的 ______ 文件提交到版本控制系统，这样，她就可以随时重新构建此文件。

twa-manifest.json 签名密钥 app-release-bundle.aab build.gradle

小杰希望他的质量检查团队测试他的 PWA Android 应用。他将他的 Android App Bundle ______ 开发为内部测试轨道。

uploads build 和 upload release signs and uploads

Oogie Boogie 的 PWA Android 应用未全屏运行。为了解决此问题，他们会获得其 ______ 的 SHA-256 证书指纹，并将其上传到与 PWA 同源的 ______ 数字资产链接文件。

上传密钥，/.well-known/assetlinks.json 上传密钥，/assetlinks.json 签名密钥，/.well-known/assetlinks.json 签名密钥，/assetlinks.json

9. 知识测验 - 答案

知识测验问题的解答！

  1. 在使用 Bubblewrap 生成 Android 项目后，Sally 将生成的 ______ 文件提交到版本控制系统，这样，她就可以随时重新构建此文件。
  2. 小杰希望他的质量检查团队测试他的 PWA Android 应用。他将他的 Android App Bundle ______ 开发为内部测试轨道。
  3. Oogie Boogie 的 PWA Android 应用未全屏运行。为了解决此问题，他们会获得其 ______ 的 SHA-256 证书指纹，并将其上传到与 PWA 同源的 ______ 数字资产链接文件。

10. 恭喜！

恭喜！您已成功了解如何将 PWA 添加到 Google Play 商店！

如果您觉得应该这么做，请自行尝试执行以下步骤：

乐享编码！