很多 App 都会有加载网页的场景

一般有如下几种方式：

  • 跳转外部浏览器打开（简单粗暴，一行代码，但是业务形态割裂，我们自己的 App 会进入后台）
  • 内嵌 WebView/WKWebView 实现（页面交互逻辑可控，细节可定制，为主流方式，但缺点是性能以及兼容问题，同时也无法与外部浏览器共享 cookies 等数据）
  • Android Custom Tabs/iOS SFSafariViewController 🎉

Android Custom Tabs 基于 Intent 调用，依赖手机里 Chrome 浏览器（或基于 Chromium 内核的浏览器）实现，不同版本可能会有差异。
早在 2015 年 Google 就发布了对应的 support 依赖库，后在 2018 年迁移到了 AndroidX，更名为 browser。目前国外的主流 App 都实现了该功能，例如 X、Telegram 等，而国内却寥寥无几。

iOS 平台也提供了类似的解决方案：SFSafariViewController
WKWebView 是 WebKit 框架的一部分，SFSafariViewController 是 SafariServices 框架的一部分，可让用户直接在应用内浏览网页，享受与在 Safari 中相同的网页浏览体验 - 包括密码自动填充、阅读器和安全浏览等功能，而无需离开我们的应用。

开始使用

  1. 添加依赖
dependencies {
   implementation 'androidx.browser:browser:1.8.0'
}
  1. 判断手机系统是否支持
    手机需要安装 Chrome 45 或以上版本，并且设为默认浏览器，实测 Edge 浏览器也支持
    如果条件都不满足，则跳转其他外部浏览器打开
String packageName = CustomTabsClient.getPackageName(context, Collections.emptyList());
if (packageName == null) {
    // not supported
}
Intent activityIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.example.com"));
PackageManager packageManager = context.getPackageManager();
List<ResolveInfo> viewIntentHandlers = packageManager.queryIntentActivities(activityIntent, 0);
String packageName = CustomTabsClient.getPackageName(context, viewIntentHandlers, true);
if (packageName == null) {    
    // not supported
}
  1. AndroidManifest.xml 处理包可见性（Android 11 及以上）
<queries>
    <intent>
        <action android:name=
            "android.support.customtabs.action.CustomTabsService" />
    </intent>
</queries>
  1. 发起调用
String url = "https://developers.android.com";
CustomTabsIntent intent = new CustomTabsIntent.Builder().build();
intent.launchUrl(MainActivity.this, Uri.parse(url));

详细特性

  • 支持定制部分 UI
  • 支持预热和预加载
  • 支持最小化（画中画）
  • 支持 ToolBar 自定义按钮
  • 支持指定高度打开
  • 支持设置进入和退出动画
  • 支持传递 HTTP headers 等

优点

  • Custom Tabs 提供了一致的浏览体验，与 Chrome 浏览器的外观和功能保持一致，用户在使用时感到熟悉和舒适。
  • 由于使用 Chrome 浏览器，Custom Tabs 在性能上通常优于 WebView，能够更快地加载网页。
  • Custom Tabs 在安全性上更强，利用 Chrome 的安全功能，例如对恶意软件的防护和强大的隐私设置。
  • 可以利用浏览器的所有功能，包括自动填充、书签和跨设备的同步，使得用户能够享受到更全面的浏览体验。
  • 与 WebView 相比，Custom Tabs 不需要开发者维护网页内容的呈现，减少了开发和维护的工作量。
  • 开发者可以对 Custom Tabs 进行一些定制，比如修改颜色和添加自定义菜单，增强品牌识别度。

缺点

  • 开发者对 Custom Tabs 的控制相对有限，无法像使用 WebView 那样对网页的行为和外观进行全面控制。
  • Custom Tabs 依赖于用户的 Chrome 浏览器或其他支持 Custom Tabs 的浏览器。如果用户没有安装支持的浏览器，可能会导致体验不佳。
  • 某些特定的 WebView 功能可能无法在 Custom Tabs 中使用，例如与 JavaScript 的深度交互。

最佳实践场景

  • 展示类：隐私协议、用户协议等
  • 互动类：论坛、帮助手册、视频教程等

参考资料

  • https://developer.chrome.com/docs/android/custom-tabs
  • https://www.chromium.org/Home/
  • https://developer.apple.com/news/?id=trjs0tcd