快速入门指南

Peter Conn
Peter Conn

Trusted Web Activity 可能设置起来有点复杂,尤其是当您只想显示网站时。本指南将引导您创建一个使用 Trusted Web Activity 的基本项目,并涵盖所有问题。

学完本指南后,您将能够:

  • 使用了 Bubblewrap 构建使用 Trusted Web Activity 并通过验证的应用。
  • 了解何时使用您的签名密钥。
  • 能够确定构建您的 Android 应用时使用的签名。
  • 了解如何创建基本的 Digital Asset Links 文件。

要遵照本指南操作,您需要:

  • 开发计算机上已安装 Node.js 10 或更高版本。
  • 连接并针对开发进行设置的 Android 手机或模拟器(如果您使用的是实体手机,请启用 USB 调试)。
  • 开发手机上支持 Trusted Web Activity 的浏览器。 您可以使用 Chrome 72 或更高版本。很快就会支持其他浏览器。
  • 您想在 Trusted Web Activity 中查看的网站。

借助 Trusted Web Activity,您的 Android 应用无需任何浏览器界面即可启动全屏浏览器标签页。此功能仅限您拥有的网站使用,您可以通过设置 Digital Asset Links 来证明此功能。我们稍后会详细介绍它们

当您启动 Trusted Web Activity 时,浏览器会检查 Digital Asset Links 是否签出,这称为“验证”。如果验证失败,浏览器将回退为将您的网站显示为自定义标签页

安装和配置 Bubblewrap

Bubblewrap 是一组适用于 Node.js 的库和命令行工具 (CLI),可帮助开发者使用 Trusted Web Activity 在 Android 应用中生成、构建和运行渐进式 Web 应用。

可使用以下命令安装 CLI:

npm i -g @bubblewrap/cli

设置环境

首次运行 Bubblewrap 时,它会主动询问是否自动下载并安装所需的外部依赖项。我们建议允许该工具执行此操作,因为它能保证依赖项配置正确。如需使用现有 Java 开发套件 (JDK) 或安装的 Android 命令行工具,请参阅 Bubblewrap 文档

初始化和构建项目

通过运行 init 命令来初始化封装 PWA 的 Android 项目:

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

气泡将读取网络清单,要求开发者确认要在 Android 项目中使用的值,并使用这些值生成项目。生成项目后,请运行以下命令来生成 APK:

bubblewrap build

运行

构建步骤将输出名为 app-release-signed.apk 的文件。该文件可以安装在开发设备上进行测试,也可以上传到 Play 商店以供发布。

Bubblewrap 提供了一个命令,用于在本地设备上安装和测试应用。将开发设备连接到计算机后,运行以下命令:

bubblewrap install

此外,您也可以使用 adb 工具。

adb install app-release-signed.apk

现在,该应用应可在设备启动器中使用。打开应用时,您会发现您的网站是作为自定义标签页启动的,而不是作为 Trusted Web Activity 启动的,这是因为我们尚未设置 Digital Asset Links 验证,但首先...

对话泡的图形界面 (GUI) 替代方案

PWA Builder 提供了一个 GUI 界面,该界面使用 Bubblewrap 库来生成 Trusted Web Activity 项目。如需详细了解如何使用 PWA Builder 创建用于打开您的 PWA 的 Android 应用,请参阅这篇博文

关于签名密钥的说明

Digital Asset Links 会考虑 APK 的签名密钥,而验证失败的一个常见原因是使用了错误的签名。(请注意,验证失败意味着您将以自定义标签页的形式启动网站,且其浏览器界面在网页顶部。)在 Bubblewrap 构建应用时,系统会创建一个 APK,并在 init 步骤中设置密钥。不过,当您在 Google Play 上发布应用时,系统可能会为您创建另一个密钥,具体取决于您选择处理签名密钥的方式。详细了解签名密钥以及签名密钥与气泡框和 Google Play 之间的关系

Digital Asset Links 实质上由您网站上的一个文件(指向您的应用)和一些应用中指向您网站的元数据组成。

创建 assetlinks.json 文件后,将其上传到您的网站(相对于根目录的 .well-known/assetlinks.json),以便浏览器可以正确验证您的应用。如需详细了解 Digital Asset Links 与签名密钥的关系,请参阅 Digital Asset Links 的深度解析

正在检查您的浏览器

Trusted Web Activity 会尝试遵循用户的默认浏览器选择。 如果用户的默认浏览器支持 Trusted Web Activity,它会启动。 否则,如果已安装的浏览器支持 Trusted Web Activity,就会选择该浏览器。 最后,默认行为是回退到“自定义标签页”模式。

这意味着,如果您要调试与 Trusted Web Activity 有关的内容,则应确保自己所用的浏览器是您自己所用的浏览器。您可以使用以下命令检查用户使用的是哪种浏览器:

> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome

后续步骤

希望您按照本指南中的说明操作后,就能获得一个正常运行的 Trusted Web Activity,并掌握足够的知识来调试验证失败时发生的情况。如果没有,请查看更多面向 Web 开发者的 Android 概念,或根据这些文档提交 GitHub 问题。

在后续步骤中,建议您首先为应用创建图标。然后,您可以考虑将应用部署到 Play 商店。