将渐进式 Web 应用添加到 Google Play

1. 欢迎

在本实验中,您将使用已部署的现有渐进式 Web 应用,并将其封装在应用中,以便在 Google Play 商店中分发。

学习内容

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

注意事项

所需条件

  • 已在互联网上正式发布的渐进式 Web 应用,您可以对其进行更改
  • Bubblewrap 命令行界面已安装并可供使用
  • Google Play 开发者账号
  • 您现有的签名密钥(如果您已在 Google Play 中发布应用)
  • 用于测试的 Android 或 ChromeOS 设备

哪些项目不在保修范围内

  • 将 PWA 限制为仅在 Android 或仅在 ChromeOS 设备上运行
  • 在同一应用下部署 ChromeOS PWA 和移动设备 Android 应用。
  • 如何在 PWA 中遵守 Google Play 的支付政策

2. 为 PWA 添加 Bubblewrap

Bubblewrap 是一款工具,可让您只需运行几个 CLI 命令,即可轻松将渐进式 Web 应用封装到 Android App Bundle 中。为此,它会生成一个 Android 项目,该项目会将您的 PWA 作为 Trusted Web Activity 启动。

首先,创建一个目录来存放您的项目,然后移至该目录:

$ 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 应用清单生成默认配置,并启动控制台向导,以便您更改默认配置。按照向导的说明更改工具生成的任何值。

Bubblewrap CLI 向导,显示了从 airhorner 进行的初始化,其中网域被替换为 example.com,并且起始网址被替换。

签名密钥

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

Bubblewrap 会在创建应用时要求提供密钥的路径。如果您要使用应用现有的 Play 商店商品详情,则需要添加该商品详情所用密钥的路径。

Bubblewrap CLI 向导询问用户现有签名密钥的位置和名称。

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

Bubblewrap CLI 向导询问用户是否要创建新的签名密钥。

Bubblewrap 输出

初始化 Bubblewrap 项目并完成向导后,系统会创建以下项:

  • twa-manifest.json - 项目配置,反映了在 Bubblewrap 向导中选择的值。您需要使用版本控制系统跟踪此文件,因为在必要时,可以使用此文件重新生成整个 Bubblewrap 项目。
  • Android 项目文件 - 目录中的其余文件是生成的 Android 项目。此项目是 Bubblewrap 构建命令使用的来源。您也可以选择使用版本控制系统跟踪这些文件。
  • (可选)签名密钥 - 如果您选择让 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. 试用 - Bubblewrap

现在该您亲自试试了!运用在上一步中学到的知识,尝试完成以下任务:

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

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

现在,您已为 PWA 创建了 Android App Bundle,接下来需要将其上传到 Google Play 商店!注册开发者账号后,您可以前往 Play 管理中心登录并开始使用。

创建应用

登录后,您会看到一个显示所有应用的界面。顶部附近有一个按钮,即创建应用。点击该按钮后,系统会显示以下界面,引导您创建新的 Android 应用详情。

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

您需要在此处填写多个字段,包括应用名称、默认语言、是应用还是游戏、是免费还是付费,以及多项声明。如果您不同意这些声明,将无法创建应用,因此请务必先仔细阅读并理解这些声明,然后再同意。

填写完所有信息并点击表单底部的创建应用按钮后,您将进入新应用的控制台。在控制台中,您会看到任务清单,其中列出了您需要完成的任务,以便设置、开始测试和发布应用。

设置内部测试

内部测试是一种绝佳的方式,可让您在未经审核的情况下快速向您选择的一组可信测试人员发布应用。查看立即开始测试清单中的任务,然后选择选择测试人员

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

点击该任务即可前往内部测试页面。您可以在此处管理应用的测试设置。如需再次前往此页面,请打开边栏中的发布菜单,然后选择测试部分。首先,您需要创建一个电子邮件地址列表,其中包含要测试您的应用的测试人员。为此,请点击页面测试人员部分中的创建电子邮件地址列表链接。系统会打开一个弹出式窗口,供您创建电子邮件名单。

显示“创建电子邮件名单”表单的弹出式窗口,其中包含名单名称、电子邮件地址、用于上传电子邮件地址 CSV 文件的链接,以及用于显示已上传的电子邮件地址的区域。

在此弹出式窗口中,您将为电子邮件名单命名,然后可以手动输入电子邮件地址,也可以上传包含电子邮件地址的 CSV 文件以供使用。完成后,按保存更改按钮。您可以返回到已创建的电子邮件名单,根据需要添加或移除电子邮件地址。添加测试人员后,接下来就可以创建测试版本了。点击页面顶部的创建新的发布版本按钮。

“内部测试”页面,其中有一个箭头指向“创建新的发布版本”按钮。

创建测试版本

点击创建新的发布版本按钮后,系统会提示您完成多个部分。第一个是应用完整性,您可以在其中选择如何管理应用的签名密钥。默认选项是让 Google 管理您的签名密钥,这是推荐的选项,因为这样既安全,又可在您丢失上传密钥时确保您的应用可恢复。

Play 应用签名

一个流程图,从左到右依次显示了开发者及其上传密钥,然后是使用该密钥对应用进行签名并将其发送给 Google。然后,Google 会获得应用签名密钥,并使用该密钥为应用签名,然后将应用交付给用户

应用上传和最终确定

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

内部测试页面,其中一个箭头指向“复制链接”链接,用于与测试人员分享测试链接。

5. 试用 - 创建应用

现在该您亲自试试了!运用在上一步中学到的知识,尝试完成以下任务:

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

6. Digital Asset Links

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

获取应用的 SHA-256 指纹

如需配置 PWA 的数字资产链接,您需要用于对用户在手机上收到的软件包进行签名的证书的 SHA-256 指纹。

使用 Play 应用签名功能

如果您在创建发布版本时为应用设置了 Play 应用签名(之前建议这样做),则可以在 Play 管理中心内找到 SHA-256 指纹。请注意,此证书与用于上传应用的证书不同。如需获取指纹,请在 Play 管理中心内从您的应用中依次前往发布版本->设置->应用完整性。在“应用签名密钥证书”下,您会看到多个选项。复制 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 密钥的十六进制值。

Bubblewrap 可以管理您检索到的签名指纹,并为您生成正确的 Digital Asset Links 文件。如需使用 Bubblewrap 添加指纹,请在使用 Bubblewrap 封装 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

Jack 希望让他的质检团队测试他的 PWA Android 应用。他将 Android App Bundle ______ 到内部测试轨道。

上传 构建和上传 发布 签名和上传 上传密钥,/.well-known/assetlinks.json 上传密钥,/assetlinks.json 签名密钥,/.well-known/assetlinks.json 签名密钥,/assetlinks.json

9. 知识测验 - 答案

“测试您的知识面”问题的答案!

  1. Sally 使用 Bubblewrap 生成 Android 项目后,将生成的 ______ 文件提交到版本控制系统,以便在需要时重新构建该文件。
  2. Jack 希望让他的质检团队测试他的 PWA Android 应用。他将 Android App Bundle ______ 到内部测试轨道。
  3. Oogie Boogie 的 PWA Android 应用未以全屏模式运行。为了解决这个问题,他们获取了 ______ 的 SHA-256 证书指纹,并将其上传到位于 ______ 的 Digital Asset Links 文件中,该文件与 PWA 位于同一来源。

10. 恭喜!

恭喜!您已顺利了解如何将 PWA 添加到 Google 的 Play 商店!

当您觉得准备就绪时,可以尝试自行完成以下后续步骤:

祝大家编码顺利!