使用嵌入式 Web 进行应用内浏览

应用内浏览器可为用户提供完整的 Web 体验,而无需让用户离开您的应用。Android 提供了两个用于实现应用内浏览器的主要 API:自定义标签页WebView。当您有指向网页的链接或广告时,请使用应用内浏览器。您可以在应用内直接打开该网页,如图 1 所示。

红框中显示一个应用内链接,箭头指向另一屏幕,展示通过自定义标签页打开该链接的效果。
图 1. 点击应用内链接(左),并通过自定义标签页打开应用内浏览器(右)。

选择自定义标签页还是 WebView 是一项重大的架构决策,会影响您的开发速度、用户体验以及您对界面的控制程度。

快速比较

下表可帮助您确定哪种工具适合您的需求:

功能 WebView 自定义标签页
主要用途 构建以 Web 为主要内容或辅助内容、展示广告、应用内广告系列或服务条款页面的混合应用。 显示来自外部网站(例如新闻报道或产品页面)的内容。
界面控件 Full。它是一个可以放置在任何位置的 View 组件。您可以控制所有周围界面。 受限。您可以设置工具栏颜色主题,并添加一些自定义操作。
数据和会话 沙盒化。它不会与用户的主浏览器共享 Cookie 或登录信息。 共享。它使用用户的默认浏览器会话,包括 Cookie 和已保存的密码。
原生 <-> Web 桥 可以。您可以使用 JavaScript 桥接在 Web 内容和原生应用代码之间实现深层双向通信。 受限。您可以使用 window.postMessage() 方法进行基本的字符串传递。
开发者工作量 。您需要自行管理生命周期、导航和性能。 。只需编写几行代码即可实现。

WebView

WebView 是一种视图,可让网页成为应用布局的组成部分。 它功能强大,但与自定义标签页相比,处理起来稍微复杂一些。

WebView 可以加载远程或本地网络内容、执行 JavaScript,并实现网络内容与原生应用代码之间的双向通信。如需详细了解其功能,请参阅 WebView 的功能

您还可以使用 WebView 来提供 Web 应用或显示在线网页作为应用的一部分。例如,您需要定期更新的最终用户协议。如需了解详情,请参阅在 WebView 中构建 Web 应用

为何应选择 WebView

以下是一些适合使用 WebView 的场景:

  • 混合应用:您正在构建一个应用,其中网页内容和原生组件(例如导航栏或悬浮操作按钮)并排显示。
  • 第一方内容:您的 Web 内容是应用体验的核心互动部分,例如文档编辑器或设计画布。
  • 完全控制界面:您需要修改网页本身的内容,或在其顶部叠加原生界面元素。
  • 深入分析:您需要详细了解网页视图中的用户互动和活动情况。

主要权衡因素

以下是使用 WebView 时需要考虑的一些关键权衡因素:

  • 性能:WebView 可能会占用大量内存。如果不仔细管理,您可能会遇到性能问题或 ANR(应用无响应错误)。
  • 安全性和维护:您负责加强安全性并管理生命周期。不过,WebView 更新会通过 Google Play 在全球范围内推出,因此您无需担心底层引擎过时。

自定义标签页

自定义标签页是引导用户访问外部网址的绝佳选择,因为它们提供了一个快速、安全且用户友好的浏览器窗口,该窗口会滑入您的应用。

为什么应选择自定义标签页

以下是一些适合使用自定义标签页的场景:

  • 外部链接:当用户点按指向您不拥有的网站的链接时,自定义标签页可让用户在应用环境中获得完整的浏览器体验。
  • 易于集成:这是最简单的嵌入式网页体验实现方式。
  • 共享状态:由于它与用户的默认浏览器共享 Cookie,因此用户无需再次登录已访问过的网站。
  • 第三方登录:它们非常适合第三方登录流程(例如“使用 Google 账号登录”或“使用 Facebook 账号登录”),因为浏览器可以安全地处理凭据。

虽然大多数浏览器都支持自定义标签页,但有些浏览器提供的自定义选项比其他浏览器更多。如需了解详情,请参阅浏览器支持

在 Jetpack Compose 中使用 Web 内容

使用 Jetpack Compose 进行构建时,您可以同时使用自定义标签页和 WebView:

  • 自定义标签页:由于自定义标签页使用 Intent,因此您可以在 Compose 函数中通过任何 Context 启动它们,从而实现无缝集成。
  • WebView:Compose 尚无原生 WebView 可组合项,因此您需要使用 AndroidView 将标准 WebView 嵌入到布局中。

其他资源

如需使用 WebView 或自定义标签页 API 针对 Android 设备开发网页,请参阅以下文档: