Android 自定义标签页概览

自定义标签页是 Android 浏览器中的一项功能,可让应用开发者直接在其应用内添加自定义浏览器体验。

从智能手机问世起,加载 Web 内容便已成为移动应用的一部分,但较旧的选项可能会给开发者带来挑战。对于用户而言,启动实际浏览器会造成无法自定义的繁重上下文切换,而 WebView 不支持 Web 平台的所有功能,请勿与浏览器共享状态,还会增加维护开销。

与打开外部浏览器相比,自定义标签页可提供更好的用户体验。它们可以让用户在浏览时继续留在应用内,从而提高互动度并降低用户放弃应用的风险。这种实现是通过直接由用户的首选浏览器提供支持,并自动共享该浏览器提供的状态和功能来实现的。您无需编写自定义代码即可管理请求、权限授予或 Cookie 存储。

自定义标签页有哪些用途?

使用自定义标签页,您的 Web 内容将会在支持用户首选浏览器的任何渲染引擎中加载。所有 API 或网络平台功能在此均提供,并在您的自定义标签页中提供。用户的浏览会话、已保存的密码、付款方式和地址都会显示给用户,并如常显示一样。

我可以在自定义标签页中自定义哪些内容?

非常差!通过自定义标签页,您可以精细控制许多浏览器 Chrome 和用户体验。在您的应用中,使用 Intent 启动自定义标签页。调用此 intent 时,您可以向 CustomTabIntent 添加一些属性,以获得所需的确切体验。此处列出了您可以添加的一些自定义设置。

自定义进入和退出动画,以匹配应用的其余部分

在屏幕之间传输的移动浏览器,以自定义标签页中加载的网站结尾

修改工具栏颜色,使其与应用的品牌信息相符。

移动浏览器,正在过渡到颜色与网站相匹配的自定义标签页

即使在浅色主题和深色主题之间切换,应用也能保持颜色一致性。

即使在浅色主题和深色主题之间切换,您的应用也能保持颜色一致性。

浏览器的工具栏和菜单中的自定义操作和条目。

显示其菜单的自定义标签页,其中包含自定义条目。

控制自定义标签页的启动高度,以便在与网店互动的同时流式传输视频等。

采用固定高度的部分自定义标签页打开。

用户可以将自定义标签页最小化,以便与底层应用互动,并随时恢复标签页,而不会丢失任何进度以便继续其历程。这样一来,用户无需关闭自定义标签页,便可在网页和原生应用之间无缝地进行多任务处理。从 Chrome 122 Beta 版开始,自定义标签页会默认启用此功能。

最小化自定义标签页,以便与后台应用互动。

这远远不够。自定义标签页功能非常强大,并且正在积极开发中。每个浏览器都需要在这些功能推出时添加对它们的支持。虽然几乎所有应用程序都会提供一定程度的支持,但了解用户浏览器可能提供或不提供哪些功能非常重要。请参阅功能对比表,快速检查不同功能在主流 Android 浏览器中的可用性。

您现在可以使用我们在 GitHub 上的示例对其进行测试。

何时应使用自定义标签页?

加载网页内容的方法没有单一的“正确”方式。在某些情况下,WebView 是适合使用的技术。例如,如果您在应用内独自托管自己的内容,或者您需要直接从应用中注入 JavaScript。如果您的应用会将用户定向到网域外的网址,那么自定义标签页中的内置共享状态意味着他们可能是更好的选择。自定义标签页的其他优势包括:

  1. 安全性:自定义标签页使用 Google 的安全浏览功能保护用户和设备免受危险网站的侵害。
  2. 性能优化:
    1. 在后台预热浏览器,同时避免从应用中窃取资源。
    2. 通过提前推测性加载网址可缩短网页加载时间。
  3. 生命周期管理:在标签页使用期间,启动自定义标签页的应用不会被逐出,其重要性会提升到“前台”级别。
  4. 共享 Cookie jar 和权限模型,这样用户就不必登录他们已连接的网站,也不必重新授予已经授予的权限。
  5. 流量节省程序等浏览器功能(若已启用)会共享,加载速度更快、费用更低。
  6. 可在不同设备之间同步自动填写功能,提高表单填写速度。
  7. 用户可以使用集成的返回按钮返回应用。

自定义标签页与 Trusted Web Activity

Trusted Web Activity 扩展了自定义标签页协议,并具备其大部分优势。但是,它并不提供自定义界面,而是允许开发者打开完全不含任何界面的浏览器标签页。如果开发者想要在自己的 Android 应用中以全屏模式打开自己的渐进式 Web 应用,建议使用。

哪些地方提供了自定义标签页?

Android 平台上的浏览器支持自定义标签页功能。它最初由 Chrome 推出的第 45 版引入。大多数 Android 浏览器都支持该协议。

我们衷心期待收到有关此项目的反馈、问题和建议,因此建议您在 crbug.com 上提交问题,并在 Twitter @ChromiumDev 上提问。

开始使用

除了 GitHub 演示之外,我们还提供了许多可帮助您开始使用自定义标签页的指南。

如有问题,请查看 StackOverflow 上的 chrome-custom-tabs 标签。