2023 年 Android 网页的新变化

开发者将 Web 引入 Android 的原因有很多:可能是在 Android 应用中重复使用 Web 微件、纳入第一方或第三方内容,甚至将其整个 Web 应用引入平台。无论应用场景如何,Android 都有很多工具可助您实现目标。

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

  • 改进了隐私保护,并更好地支持大屏幕,例如支持在 WebView 中拖放图片。
  • 自定义标签页现在支持部分自定义标签页。
  • 集成了 PWA 功能,例如 Trusted Web Activity 中提供了更丰富的安装界面和 Play Billing API。

让我们来深入了解一下吧。

WebView

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

X-Requested-With 标头

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

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

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

WebView 测试

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

  1. WebView 现在支持 Chrome 源试用。您可以通过源试用使用 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 引擎

有时,您可能需要在不显示任何 Web 内容的情况下在应用中运行 JavaScript;例如,跨网站和移动应用共享业务逻辑时。为了简化这一过程,去年我们推出了新版 JetPack JavaScript 引擎的 Alpha 版。此库使用 Chrome 的 JavaScript 引擎 V8,可让您的应用评估 JavaScript 或 WebAssembly 代码,而无需创建 WebView 实例。新的 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 内容。它们的一大优势是用户无需再次登录他们喜欢的网站。这是因为它们是用户默认浏览器和所共享的 Cookie 的实例,并且它们提供了驱动它的浏览器所支持的所有网络平台功能和 API。

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

自定义标签页的优势在于,您可以根据应用的外观和风格,设置自定义标签页的样式,并通过操作添加自定义互动元素,并且使用您自己的工具栏。

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

部分式自定义标签页

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

您只需连接到自定义标签页服务,将会话传递给 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 版中推出,并将于 2003 年 7 月左右推出。如果您想试用,请查看 Chromium 自定义标签页示例应用的源代码。

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

衡量互动信号

自定义标签页的第二项重大更新是衡量特定会话的用户互动度。如果您的应用经常向用户显示包含链接的内容(例如在新闻信息流中),如果能够辨别出用户认为哪些链接有价值,哪些链接没有价值,那该多好?这些信息非常有助于确定向用户显示哪些链接的优先顺序。

Chrome 团队为 Chrome 自定义标签页添加了特定于会话的指标公开范围。除了用户在网页上停留的时长外,您现在还可以了解滚动距离、滚动方向,以及与 Web 内容的总体互动度。

从 Chrome 114 开始提供互动信号,并且需要 androidx.browser:browser:1.6.0-alpha01 支持库或更高版本。如需了解详情,请参阅互动度信号入门指南。

PWA

PWA 也有更新,借助一组技术,您可以在网络上构建和部署打造类似应用的体验。

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

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

我们来了解一下有哪些功能可让您的可安装 Web 应用在 Android 中拥有得体的使用体验。

我们希望让用户能够安装他们最关心的网站。第一步是移除 Service Worker 提取处理程序(作为在 Android 和 Chrome 上安装的必要条件)。此外,如果提取处理程序为空,Chrome 就会跳过启动 Service Worker。Chrome 将会运行实验,以扩大用户安装应用的权限。请留意这些问题,并提供反馈。

为了创建与其他 Android 应用一致的用户体验,存在 Service Worker 要求。它可用于创建一个页面,通知用户离线时无法使用应用。

我们意识到,我们可以减轻开发者的工作负担,并确保这些应用从一开始就提供良好的安装体验。因此,Chrome 添加了默认离线体验,可向用户显示包含应用图标的屏幕,让用户知道自己处于离线状态,而无需开发者执行额外的操作。

当然,Service Worker API 仍然可用于构建自定义离线体验,以及实现缓存等其他功能以提高性能。

还有一些其他功能可以为 Android 带来完善的 Web 应用体验,例如更丰富的安装界面。将 descriptionscreenshots 字段添加到您的网络清单中后,用户获得的安装体验会更接近应用商店在描述您的应用时所显示的信息。

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

使用 Web ShareWeb Share Target API,您的应用可以与其他应用互动,就像任何其他平台应用一样。您的应用将作为共享表格中的一个选项,提供和接收照片、文字和其他文件的功能。

您可以观看 I/O 大会上的演讲“网络:您的发展平台”,详细了解企业如何利用这些技术。

可信网络活动

将 Web 带到 Android 的另一种方法是使用 Trusted Web Activity (TWA)

TWA 是在应用中全屏展示第一方 Web 内容的最佳方式。如果开发者希望将 Web 应用封装为 Android 应用,或希望将网站作为一个应用的一部分进行封装,TWA 是理想的解决方案。

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

Trusted Web Activity 由用户的浏览器呈现,呈现方式与用户在浏览器中看到的完全相同,区别在于前者是全屏运行,且不显示网址栏。这意味着它们支持驱动它的浏览器所支持的所有网络平台功能和 API。

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

发布到 Google Play,让应用获得 Google Play 的公开范围和分发权限。 能够访问 Play Billing API,让开发者能够管理其应用中的数字商品销售,从而更轻松地设置商品、销售、订阅等。 将通知和地理定位权限委托给 Android 应用而非网站。

请参阅这篇文章,详细了解 ContactsDirect 如何利用 TWA 让用户受益并将转化率提高至原来的 3 倍。

总结

如您所见,将 Web 内容嵌入应用的方法有很多,而且所有这些选项都在不断改进。