2023 年 Android 网页的新变化

开发者将网页引入 Android 的原因有很多:可能会在 Android 应用中重复使用网页 widget、整合第一方或第三方内容,甚至将整个 Web 应用引入平台。无论应用场景如何,Android 都提供了许多工具来实现您的目标。

以下是这些工具的最新动态。例如:

  • 改进了隐私保护功能,并更好地支持大屏设备,例如支持在 WebView 中拖放图片。
  • 自定义标签页现在支持部分式自定义标签页。
  • PWA 的集成功能,例如 Trusted Web Activity 中的 Richer Install UI 和 Play Billing API。

下面我们就来详细了解一下。

WebView

WebView 是将 Web 内容嵌入 Android 应用的最常用方法,因为绝大多数 Android 应用都使用 WebView。这是一种将 Web 界面无缝集成到原生 Android 应用体验中的绝佳方式。例如,您可以将不同的 Web 界面嵌入到应用中,例如广告、微件,甚至是应用内浏览器。WebView 的一大优势是其强大的 API,可用于控制和修改正在加载的 Web 内容。WebView 有哪些新变化?

X-Requested-With 标头

我们先从隐私权和 X-Requested-With 标头弃用开始。当用户安装并运行使用 WebView 嵌入 Web 内容的应用时,WebView 会向发送到服务器的每个请求添加 X-Requested-With 标头。此标头的值为应用的 APK 名称。这意味着每个请求都包含有关用户浏览 Web 内容的情境的具体信息,并会将应用的身份信息泄露给在线服务。为保护用户隐私,WebView 团队已开始一项弃用试用计划,该计划会从所有 WebView 请求中移除此标头。

但是,如果您的应用依赖于 X-Requested-With 标头,该怎么办?我们建议您使用新的“用户选择启用”API,以便选择性地将请求标头发送到特定来源。这意味着,您可以两全其美:一方面,您可以继续支持基于此标头构建的现有功能;另一方面,您可以确保在所有其他情况下保护用户隐私。如果您想保留现有行为,还可以注册 X-Requested-With Deprecation 来源试用。

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("https://example.com")
);

WebView 测试

下一个主题是测试。如果您是 Web 开发者,并且您的网站通过 WebView 获得大量流量,请注意以下两项更新:

  1. WebView 现在支持 Chrome 来源试用版。您可以通过源试用来使用 Chrome 中的新功能或实验性功能。您可以使用这些版本在新功能面向所有用户发布之前抢先试用。在此之前,源试用仅支持桌面版和移动版 Chrome,但从 Chrome M110 开始,WebView 中也支持源试用。

  2. 现在,可以更轻松地安装 WebView Beta 版。我们强烈建议您使用 WebView Beta 渠道测试您的网站,以确保您的网站在即将推出的 WebView 版本中可以正常运行。为此,请加入 Google Play 商店中的 WebView Beta 版测试计划,您的设备会自动注册。

用于加入 WebView Beta 版计划的网站的屏幕截图。

大屏设备支持

我们的目标是让 WebView 在大屏设备上正常运行。朝着这个方向迈出的一步是,WebView 现在支持图片拖放。例如,在分屏视图模式下,您可以将图片从 WebView 拖动到其他应用中。

向 WebView 添加拖放功能非常简单:只需在 AndroidManifest 中声明 DropDataProvider 即可。

<application...>
     ...
     <provider
         android:authorities="com.example.webviewdemo.DropDataProvider"
         android:name="androidx.webkit.DropDataContentProvider"
         android:exported="false"
         android:grantUriPermissions="true"/>
 </application>

Android U 上的 Chrome 和 WebView 将全面支持在 HTML 文本输入字段中进行手写,并提供用于删除文本或添加空格的输入手势。所有搭载 One UI 5.1 的三星设备(例如 S23 Ultra)都已支持手写功能。对于使用 Android T 的其他设备,您可以在“开发者选项”下启用 HTML 输入中的手写功能。

Jetpack JavaScript 引擎

有时,您可能需要在应用中运行 JavaScript,而无需显示任何 Web 内容;例如,在 Web 应用和移动应用之间共享业务逻辑时。为此,我们于去年发布了全新 JetPack JavaScript 引擎的 Alpha 版。此库使用 V8(Chrome 的 JavaScript 引擎),可让您的应用无需创建 WebView 实例即可评估 JavaScript 或 WebAssembly 代码。新 JavaScript 引擎的一大优势在于,它会在不同的进程中执行 JavaScript,是一种在应用中运行 JavaScript 的安全稳定的方式。与 WebView 实例相比,它还需要更少的资源。

ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);

自定义标签

采用默认样式的 Android 自定义标签页。

WebView 非常适合将 Web 界面集成到应用中。但如果要让用户在应用中浏览 Web 内容,该怎么办?

这是自定义标签页的绝佳用例。借助该功能,您可以以一种安全且便于操作的方式让用户查看应用中的 Web 内容。其一大优势在于,用户无需重新登录喜爱的网站。这是因为它们是用户默认浏览器的实例,并且会共享用户的 Cookie,还提供其所依托的浏览器支持的所有 Web 平台功能和 API。

这也意味着,如果您的默认浏览器是 Chrome,自定义标签页会在 Chrome 中打开;如果您的默认浏览器是 Firefox,自定义标签页会在 Firefox 中打开。Android 上的大多数主流浏览器都支持“自定义标签页”,而如果默认浏览器不支持“自定义标签页”,则会打开浏览器应用。

自定义标签页的一大优势在于,您可以为其设置样式,使其与应用的外观和风格相匹配,并通过操作和您自己的工具栏添加自定义互动。

采用自定义颜色主题和工具栏的 Android 自定义标签页。

部分式自定义标签页

自定义标签页经过重大升级后,可以支持部分式自定义标签页。用户可以在应用和网站之间处理多项任务。在此之前,使用自定义标签页时,浏览器标签页叠加层会覆盖整个屏幕。现在,您可以控制自定义标签页叠加层的高度。这样,用户就可以同时与您的应用和网站内容互动。如果用户的浏览器不支持部分自定义标签页,用户只会看到支持的全屏自定义标签页。

您只需连接到 Custom Tabs 服务,将会话传递给 CustomTabsBuilder,然后调用 setActivityHeight 即可。

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
  .setInitialActivityHeightPx(500)
  .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
  // ...
  .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

YouTube 成功地为直接反应广告推出了可调整大小的内嵌自定义标签页。这样一来,他们便能够在不中断应用中的自然体验的情况下,实现与广告和网页内容互动的新方式。

使用部分自定义标签页的 YouTube 直接响应广告体验。

那么平板电脑和其他大屏设备呢?Chrome 团队目前正在为横向模式和大屏设备开发新的并排自定义标签页体验。通过定义标签页宽度上限和断点,自定义标签页体验将自动在底部动作条叠加层和并排体验之间切换。此功能已在 Canary 版中推出,并将于 2023 年 7 月左右发布。如果您想试用一下,请查看 Chromium 自定义标签页示例应用的源代码。

与主要应用内容并排显示的自定义标签页。

衡量互动信号

自定义标签页的第二项重大更新是衡量会话专用用户互动情况。如果您的应用会定期向用户展示内容(例如在新闻信息流中展示链接),那么如果您能够了解哪些链接对用户有价值,哪些链接没有价值,那不是很棒吗?此信息在确定向用户显示哪些链接的优先顺序时非常有用。

Chrome 团队为 Chrome 自定义标签页新增了会话专用指标的显示设置。除了用户在网页上停留的时间外,您现在还可以了解滚动距离、滚动方向以及用户与网页内容的总体互动情况。

从 Chrome 114 开始,您可以使用互动信号,但需要 androidx.browser:browser:1.6.0-alpha01 支持库或更高版本。如需了解详情,请查看互动信号入门指南。

PWA

PWA 也进行了更新,这套技术可让您在 Web 上构建和部署类似应用的体验。

在 Android 上使用 PWA 时,您的 Web 应用可以安装:它将与其他平台应用一起显示在主屏幕、启动器、设置和其他界面上。

PWA 功能基于 Web 标准构建;它们侧重于跨平台兼容性,可让开发者使用相应工具构建一次 Web 应用,并允许用户在他们选择的任何设备上安装该应用。构建可安装的 Web 应用并不意味着您不能或不应拥有原生 Android 应用,但它是将 Web 引入 Android 的另一种方式。

我们来看看一些可让您的可安装 Web 应用在 Android 设备上如鱼得水的功能。

我们希望让用户能够安装他们最关心的网站。首先,我们移除了在 Android 和 Chrome 上安装时需要的 Service Worker 提取处理脚本。此外,如果提取处理脚本为空,Chrome 将跳过启动服务工作线程。Chrome 将开展实验,以扩大用户安装扩展程序的权限。请留意这些问题,并提供反馈。

Service Worker 旨在让开发者打造与其他 Android 应用一致的用户体验。它可用于创建一个页面,告知用户他们无法在离线状态下使用应用。

我们意识到,我们可以减轻开发者的工作量,并确保这些应用从一开始就提供良好的安装体验。因此,Chrome 添加了默认的离线体验,该体验会向用户显示一个带有应用图标的界面,让用户知道自己处于离线状态,而无需开发者额外付出工作。

当然,您仍然可以使用 Service Worker API 构建自定义离线体验,并实现缓存等其他功能来提升性能。

富媒体安装界面等一些功能也能为 Android 带来出色的 Web 应用体验。向您的网站清单添加 descriptionscreenshots 字段后,用户获得的安装体验将更接近应用商店为了描述您的应用而显示的内容。

我们还提供了快捷方式。通过添加一个名为 shortcuts 的数组,用于描述用户在您的应用中经常执行的一组快速操作,之后用户可以通过长按应用图标来访问这些操作。

借助 Web ShareWeb Share Target API,您的应用可以与其他应用(如任何其他平台应用)互动。您的应用将成为共享表格中的选项,并且可以共享和接收照片、文本和其他文件。

您可以观看 I/O 大会演讲“The Web: Your platform for growth”(网络:助力您实现业务增长的平台),详细了解各个企业如何利用这些技术。

Trusted Web Activity

将 Web 内容引入 Android 的另一种方法是使用 Trusted Web Activity (TWA)

TWA 是应用中显示全屏第一方 Web 内容的最佳方式。对于想要将 Web 应用封装为 Android 应用或将其网站用作其中一部分的开发者,它是理想的解决方案。

请注意,TWA 听起来似乎与 PWA 密切相关,但实际上并非如此。可以,使用 TWA 后,您可以将安装版 Web 应用发布到 Google Play,但也可以在 Web 上构建单个 activity,并将其添加到 Android 应用中。

受信任的 Web 活动由用户的浏览器呈现,呈现方式与用户在浏览器中看到的完全相同,只不过它们会全屏运行,并且不会显示网址栏。也就是说,它们支持浏览器支持的所有网络平台功能和 API。

使用 TWA 封装 Web 应用的几个优势包括:

发布到 Google Play,让您的应用能够在 Google Play 上展示和分发。 可以访问 Play Billing API,该 API 可让开发者管理应用中的数字商品销售事宜,从而更轻松地设置商品、促销活动、订阅等。 将通知和地理定位权限委托给 Android 应用(而非网站)。

如需详细了解 ContactsDirect 如何使用 TWA 为用户带来益处并将转化率提高了三倍,请参阅这篇文章

总结

正如您所见,有许多不同的方法可用于将 Web 内容嵌入到您的应用中,并且所有这些方法都在不断改进。