Android优化不同版本系统WebView版本兼容性问题

项目地址：传送门

问题描述

App开发时或多或少加载web页面，但是使用h5或者一些新特性来写的web页在Android低版本系统上经常出现各种兼容适配问题。

前言

WebView是Android系统提供能显示网页的系统控件，它是一个特殊的View，同时它也是一个ViewGroup可以有很多其他子View。在Android 4.4以下(不包含4.4)系统WebView底层实现是采用WebKit内核，而在Android 4.4及其以上Google 采用了chromium内核作为系统WebView的底层内核支持。在这一变化中Android 提供的WebView相关API并没有发生大变化，在4.4上也兼容低版本的API并且引进了少部分API。这里简单介绍下基于Chromium 的Webview和基于Webkit webview的差异，基于Chromium Webview提供更广的HTML5,CSS3,Javascript支持，在目前最新Android 系统版本5.0上基于chromium 37，Webview提供绝大多数的HTML5特性支持。Webkit Javascript引起采用WebCore Javascript 在Android 4.4上换成了V8能直接提升Javascript性能。另外Chromium 支持远程调试(Chrome DevTools)。

WebKit for WebView VS Chromium for WebView性能比对

Webkit Chromium 备注
HTML5 278 434 http://html5test.com
远程调试 不支持 支持 Android 4.4及以上支持
内存占用 小 大 相差20-30M左右
WebAudio 不支持 支持 Android 5.0及以上支持
WebGL 不支持 支持 Android 5.0及以上支持
WebRTC 不支持 支持 Android 5.0及以上支持


因此问题在于WebView内核上，为了解决适配问题，只能使用第三方内核。

内核对比

目前开源的浏览器内核sdk不多，主要有以下几个：ChromeView、Crosswalk、TbsX5(腾讯浏览服务)。

1.基于Chromium内核的开源ChromeView目前基本上没有维护，另一个问题是所编译出来的动态库太大，ARM 29M，x86 38M，这无疑对app体积来说是个大难题。因此放弃采用基于Chromium的ChromeView。

2.Crosswalk同样是基于Chromium内核，同样存在上述app体积问题，因此也放弃。

3.TbsX5基于谷歌Blink内核，并提供两种集成方案：1)只共享微信手Q空间的x5内核(for share)，2)独立下载x5内核(with download)。

TbsBridgeWebView使用

考虑App用户群的极少数没装有微信、手Q的情况，因此采用TbsX5 for share。下文基于Tbs for share来实现。

之前写过一篇Android-使用JsBridge来优化js与本地的交互的文章，这次的TbsBridgeWebView同样集成了这套JsBridge，同时使用TbsX5解决web适配问题。

添加maven依赖


com.hjhrq1991.library.tbs
tbsjsbridge
1.0.0
pom



添加gradle依赖

compile 'com.hjhrq1991.library.tbs:tbsjsbridge:1.0.0'


添加权限

在你的布局上添加TbsBridgeWebView

android:id="@+id/webView"
android:layout_
android:layout_ />


JsBridge的使用请参考Android-使用JsBridge来优化js与本地的交互。

重要Tips

Tbs替换android.webkit相同的类

#系统内核 #SDK内核
android.webkit.ConsoleMessage com.tencent.smtt.export.external.interfaces.ConsoleMessage
android.webkit.CacheManager com.tencent.smtt.sdk.CacheManager(deprecated)
android.webkit.COOKIEManager com.tencent.smtt.sdk.COOKIEManager
android.webkit.COOKIESyncManager com.tencent.smtt.sdk.COOKIESyncManager
android.webkit.CustomViewCallback com.tencent.smtt.export.external.interfaces.IX5WebChromeClient.CustomViewCallback
android.webkit.DownloadListener com.tencent.smtt.sdk.DownloadListener
android.webkit.GeolocationPermissions com.tencent.smtt.export.external.interfaces.GeolocationPermissionsCallback
android.webkit.HttpAuthHandler com.tencent.smtt.export.external.interfaces.HttpAuthHandler
android.webkit.JsPromptResult com.tencent.smtt.export.external.interfaces.JsPromptResult
android.webkit.JsResult com.tencent.smtt.export.external.interfaces.JsResult
android.webkit.SslErrorHandler com.tencent.smtt.export.external.interfaces.SslErrorHandler
android.webkit.ValueCallback com.tencent.smtt.sdk.ValueCallback
android.webkit.WebBackForwardList com.tencent.smtt.sdk.WebBackForwardList
android.webkit.WebChromeClient com.tencent.smtt.sdk.WebChromeClient
android.webkit.WebHistoryItem com.tencent.smtt.sdk.WebHistoryItem
android.webkit.WebIconDatabase com.tencent.smtt.sdk.WebIconDatabase
android.webkit.WebResourceResponse com.tencent.smtt.export.external.interfaces.WebResourceResponse
android.webkit.WebSettings com.tencent.smtt.sdk.WebSettings
android.webkit.WebSettings.LayoutAlgorithm com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm
android.webkit.WebStorage com.tencent.smtt.sdk.WebStorage
android.webkit.WebView com.tencent.smtt.sdk.WebView
android.webkit.WebViewClient com.tencent.smtt.sdk.WebViewClient


关于COOKIE

com.tencent.smtt.sdk.COOKIEManager和com.tencent.smtt.sdk.COOKIESyncManager的相关接口的调用，在接入SDK后，需要放到创建X5的WebView之后（也就是X5内核加载完成）进行；否则，COOKIE的相关操作只能影响系统内核。

参考文章

1.主流浏览器内核介绍（前端开发值得了解的浏览器内核历史）
2.Android各个版本WebView
3.第三方浏览器内核嵌入：Crosswalk
4.Tbs接入文档