感谢原创博主分享~!~
项目地址 : https://github.com/hjhrq1991/JsBridge
问题描述
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 | |
远程调试 | 不支持 | 支持 | 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依赖
<dependency>
<groupId>com.hjhrq1991.library.tbs</groupId>
<artifactId>tbsjsbridge</artifactId>
<version>1.0.0</version>
<type>pom</type>
</dependency>
添加gradle依赖
compile 'com.hjhrq1991.library.tbs:tbsjsbridge:1.0.0'
添加权限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.READ_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
在你的布局上添加TbsBridgeWebView
<com.hjhrq1991.library.tbs.TbsBridgeWebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
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接入文档