在 Android 应用中使用 PWA

渐进式 Web 应用 (PWA) 是一种 Web 应用,利用类似应用的功能打造快速、可靠和有吸引力的高品质体验。

网络拥有极大的覆盖面,为用户提供了探索新体验的强大途径。不过,用户也习惯在操作系统商店中搜索应用。在许多情况下,这些用户已经熟悉他们所寻找的品牌或服务,并且具有很高的意向,因此其互动指标会高于平均水平。

Play 商店是 Android 应用的商店,开发者通常希望通过 Android 应用打开其渐进式 Web 应用。

Trusted Web Activity 是一种开放式标准,允许浏览器提供完全兼容的 Web 平台容器,以便在 Android 应用内呈现 PWA。Chrome 中提供了此功能,Firefox Nightly 中还在开发中。

一直以来,您都可以使用 Android WebView 等技术或 Cordova 等框架在 Android 应用中添加 Web 体验。

Android WebView 的限制在于,它不适合用作浏览器替代方案。Android WebView 是一款用于在 Android 应用中使用 Web 界面的开发者工具,但无法完全访问联系人选择器文件系统等现代 Web 平台功能。

Cordova 旨在弥补 WebView 的缺点,但 API 仅限于 Cordova 环境。这意味着,您需要额外维护一个代码库,以便为您的 Android 应用使用 Cordova API,这与开放 Web 上的 PWA 区分开来。

此外,功能可检测性通常并不总能按预期运行,Android 版本和原始设备制造商 (OEM) 之间的兼容性问题也可能是一个问题。使用其中一种解决方案时,开发者需要额外的质量保证流程,并需要承担额外的开发费用来检测和创建权宜解决方法。

Trusted Web Activity 是 Android 上 Web 应用的新容器

开发者现在可以使用 Trusted Web Activity 作为容器,将 PWA 添加为 Android 应用的启动 activity。该技术利用浏览器以全屏模式呈现 PWA,确保 Trusted Web Activity 与底层浏览器具有相同的 Web 平台功能和 API。此外,还有一些开源实用程序,可让您更轻松地使用 Trusted Web Activity 实现 Android 应用。

其他解决方案没有的另一个优势是容器与浏览器共享存储空间。登录状态和用户偏好设置可在各种体验间无缝共享。

浏览器兼容性

此功能从 Chrome 75 版开始提供,Firefox 在其夜间版本中实现了此功能。

质量标准

如果 Web 开发者想要在 Android 应用中添加 Web 内容,则应使用 Trusted Web Activity。

Trusted Web Activity 中的 Web 内容必须符合 PWA 可安装性标准。

此外,为了与用户对 Android 应用的行为保持一致,Chrome 86 引入了一项变更。在 Chrome 86 中,如果无法处理以下情形,即视为发生崩溃:

  • 在应用发布时未能验证数字资产链接。
  • 无法针对离线网络资源请求返回 HTTP 200。
  • 返回 HTTP 404 或 5xx 错误的导航请求”。

当 Trusted Web Activity 中发生上述任一情况时,就会导致 Android 应用对用户可见的崩溃。请参阅有关在服务工件中处理这些场景的指南

应用还必须符合其他 Android 专用标准,例如政策合规性

一张屏幕截图,显示了 AirHorn 的 Lighthouse 得分,其中包含 PWA 徽章和 100 的性能得分。
Lighthouse 中的 PWA 徽章会显示您的 PWA 是否通过了可安装性标准。

工具

想要利用 Trusted Web Activity 的 Web 开发者无需学习新技术或 API,即可将其 PWA 转换为 Android 应用。Bubblewrap 和 PWABuilder 可共同以库、命令行界面 (CLI) 和图形界面 (GUI) 的形式提供开发者工具。

气泡膜

Bubblewrap 项目以 NodeJS 库和命令行界面 (CLI) 的形式生成 Android 应用。

通过运行该工具并传递 Web 清单的网址,即可引导启动新项目:

npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json

该工具还可以构建项目,运行以下命令将输出一个可上传到 Play 商店的 Android 应用:

npx @bubblewrap/cli build

运行此命令后,项目的根目录中将会有一个名为 app-release-signed.apk 的文件。系统会将这个文件上传到 Play 商店

PWABuilder

PWABuilder 可帮助开发者将现有网站转换为渐进式 Web 应用。它还与 Bubblewrap 集成,以提供一个 GUI 界面,用于将这些 PWA 封装到 Android 应用中。PWABuilder 团队撰写了一篇精彩的博文,介绍了如何使用该工具生成 Android 应用。

在 Android 应用中验证 PWA 的所有权

构建出色的渐进式 Web 应用的开发者不会希望其他开发者在未经其许可的情况下使用该应用构建 Android 应用。为避免这种情况,必须使用名为 Digital Asset Links 的工具将 Android 应用与渐进式 Web 应用配对。

Bubblewrap 和 PWABuilder 会处理 Android 应用的必要配置,但仍有最后一步,即将 assetlinks.json 文件添加到 PWA。

如需生成此文件,开发者需要用于为用户正下载的 APK 签名的密钥的 SHA-256 签名。

您可以通过多种方式生成该密钥,若要确定用于为提供给最终用户的 APK 签名的签名密钥,最简单的方法就是从 Play 商店本身下载该密钥。

为避免向用户显示损坏的应用,请将应用部署到封闭式测试渠道,将其安装到测试设备上,然后使用 Peter 的 Asset Link 工具为应用生成正确的 assetlinks.json 文件。将生成的 assetlinks.json 文件提供在要验证的网域中的 /.well-known/assetlinks.json 中。

下一步做什么

渐进式 Web 应用可提供优质的 Web 体验。Trusted Web Activity 是一种全新方式,可在 Android 应用符合最低质量标准时打开这些高品质体验。

如果您刚刚开始接触渐进式 Web 应用,请参阅有关如何构建出色的 PWA 的指南。对于已有 PWA 的开发者,请使用 Lighthouse 验证其是否符合质量标准。

然后,使用 BubblewrapPWABuilder 生成 Android 应用,将应用上传到 Play 商店上的封闭式测试渠道,并使用 Peter 的 Asset Link 工具将其与 PWA 配对。

最后,将应用从封闭式测试渠道移至正式版渠道!