在 Android 应用中使用 PWA

在 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 版起,此功能已在 Chrome 中推出,Firefox 在其夜间版中也实现了此功能。

质量标准

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

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

此外,为了符合用户对 Android 应用的预期行为,Chrome 86 引入了一项变更,即未能处理以下情形会被视为崩溃:

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

当可信 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 商店本身下载该 APK。

为避免向用户显示损坏的应用,请将应用部署到封闭式测试渠道,将其安装到测试设备上,然后使用 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 配对。

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