Android WebView 总结

总结 Android WebView 常用的相关知识点，令包含以下干货内容分析：Js注入漏洞、WebView 遇到的坑、JsBridge 原理以及框架使用( JsBridge, DSBridge-Android)、缓存机制应用、性能优化、腾讯开源框架 VasSonic (之后会进行代码分析)。

一、简介

这部分主要介绍下 WebView，WebView 是一个用来显示 Web 网页的控件，继承自 AbsoluteLayout，和使用系统其他控件没什么区别，只是 WeView 控件方法比较多比较丰富。因为它就是一个微型浏览器，包含一个浏览器该有的基本功能，例如：滚动、缩放、前进、后退下一页、搜索、执行 Js等功能。

在 Android 4.4 之前使用 WebKit 作为渲染内核，4.4 之后采用 chrome 内核。Api 使用兼容低版本。

二、基本使用

//配置网络权限
<uses-permission android:name="android.permission.INTERNET"/>

 //布局
<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/main"
      android:layout_width="match_parent"
      android:layout_height="match_parent">

<com.webview.SafeWebView
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</LinearLayout>

  // BaseWebView 是我自己封装的 WebView 

  //实际使用时请采用 new 的方式
  mWebView = (SafeWebView) findViewById(R.id.web_view);
  mWebView.addJavascriptInterface(new NativeInterface(this), "AndroidNative");
  mWebView.loadUrl("http://www.jianshu.com/u/fa272f63280a");

三、WebView 方法

主要包含 WebView 的使用方法。我们基于这些方法能扩展很多其他功能，例如：JsBridge、缓存等。

常用方法

void loadUrl(String url):加载网络链接 url
boolean canGoBack():判断 WebView 当前是否可以返回上一页
goBack():回退到上一页
boolean canGoForward():判断 WebView 当前是否可以向前一页
goForward():回退到前一页
onPause():类似 Activity 生命周期，页面进入后台不可见状态
pauseTimers():该方法面向全局整个应用程序的webview，它会暂停所有webview的layout，parsing，JavaScript Timer。当程序进入后台时，该方法的调用可以降低CPU功耗。
onResume():在调用 onPause()后，可以调用该方法来恢复 WebView 的运行。
resumeTimers():恢复pauseTimers时的所有操作。(注：pauseTimers和resumeTimers 方法必须一起使用，否则再使用其它场景下的 WebView 会有问题)
destroy():销毁 WebView
clearHistory():清除当前 WebView 访问的历史记录。
clearCache(boolean includeDiskFiles):清空网页访问留下的缓存数据。需要注意的时，由于缓存是全局的，所以只要是WebView用到的缓存都会被清空，即便其他地方也会使用到。该方法接受一个参数，从命名即可看出作用。若设为false，则只清空内存里的资源缓存，而不清空磁盘里的。
reload():重新加载当前请求
setLayerType(int layerType, Paint paint):设置硬件加速、软件加速
removeAllViews():清除子view。
clearSslPreferences():清除ssl信息。
clearMatches():清除网页查找的高亮匹配字符。
removeJavascriptInterface(String interfaceName):删除interfaceName 对应的注入对象
addJavascriptInterface(Object object,String interfaceName):注入 java 对象。
setVerticalScrollBarEnabled(boolean verticalScrollBarEnabled):设置垂直方向滚动条。
setHorizontalScrollBarEnabled(boolean horizontalScrollBarEnabled):设置横向滚动条。
loadUrl(String url, Map<String, String> additionalHttpHeaders):加载制定url并携带http header数据。
evaluateJavascript(String script, ValueCallback<String> resultCallback):Api 19 之后可以采用此方法之行 Js。
stopLoading():停止 WebView 当前加载。
clearView():在Android 4.3及其以上系统这个api被丢弃了，并且这个api大多数情况下会有bug，经常不能清除掉之前的渲染数据。官方建议通过loadUrl("about:blank")来实现这个功能，阴雨需要重新加载一个页面自然时间会收到影响。
freeMemory():释放内存，不过貌似不好用。
clearFormData():清除自动完成填充的表单数据。需要注意的是，该方法仅仅清除当前表单域自动完成填充的表单数据，并不会清除WebView存储到本地的数据。

我这里在介绍下下面几组方法，比较重要，项目当中可能会遇到坑

onPause() 尽力尝试暂停可以暂停的任何处理，如动画和地理位置。不会暂停JavaScript。要全局暂停JavaScript，可使用pauseTimers。
onResume() 恢复onPause() 停掉的操作；
pauseTimers() 暂停所有WebView的布局，解析和JavaScript定时器。这个是一个全局请求，不仅限于这个WebView。
resumeTimers() 恢复所有WebView的所有布局，解析和JavaScript计时器，将恢复调度所有计时器.

另外注意 JS 端setTimeout()、setInterval() 方法使用，自测来看，当不使用 pauseTimers() 和 pauseTimers() ，从 Activity 返回上一个包含WebView 的Activity时，页面里的 setTimeout() 是不执行的，setInterval() 是可以恢复执行的。

在适当的生命周期使用 pauseTimers() 和 pauseTimers() 既可以恢复setTimeout() 执行。

一份 WebView 方法使用清单

    mWebView.loadUrl("http://www.jianshu.com/u/fa272f63280a");// 加载url，也可以执行js函数
    mWebView.setWebViewClient(new SafeWebViewClient());// 设置 WebViewClient 
    mWebView.setWebChromeClient(new SafeWebChromeClient());// 设置 WebChromeClient
    mWebView.onResume();// 生命周期onResume
    mWebView.resumeTimers();//生命周期resumeTimers
    mWebView.onPause();//生命周期onPause
    mWebView.pauseTimers();//生命周期pauseTimers (上数四个方法都是成对出现)
    mWebView.stopLoading();// 停止当前加载
    mWebView.clearMatches();// 清除网页查找的高亮匹配字符。
    mWebView.clearHistory();// 清除当前 WebView 访问的历史记录
    mWebView.clearSslPreferences();//清除ssl信息
    mWebView.clearCache(true);//清空网页访问留下的缓存数据。需要注意的时，由于缓存是全局的，所以只要是WebView用到的缓存都会被清空，即便其他地方也会使用到。该方法接受一个参数，从命名即可看出作用。若设为false，则只清空内存里的资源缓存，而不清空磁盘里的。
    mWebView.loadUrl("about:blank");// 清空当前加载
    mWebView.removeAllViews();// 清空子 View
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2) {
        mWebView.removeJavascriptInterface("AndroidNative");// 向 Web端注入 java 对象
    }
    mWebView.destroy();// 生命周期销毁

四、常用属性

主要包含三部分：WebSettings、WebViewClient、WebChromeClient。

WebSettings

常用方法

setJavaScriptEnabled(boolean flag):是否支持 Js 使用。
setCacheMode(int mode):设置 WebView 的缓存模式。
setAppCacheEnabled(boolean flag):是否启用缓存模式。
setAppCachePath(String appCachePath):Android 私有缓存存储，如果你不调用setAppCachePath方法，WebView将不会产生这个目录。
setSupportZoom(boolean support):是否支持缩放。
setTextZoom(int textZoom):Sets the text zoom of the page in percent. The default is 100。
setAllowFileAccess(boolean allow):是否允许加载本地 html 文件/false。
setDatabaseEnabled(boolean flag):是否开启数据库缓存
setDomStorageEnabled(boolean flag):是否开启DOM缓存。
setUserAgentString(String ua):设置 UserAgent 属性。
setLoadsImagesAutomatically(boolean flag):支持自动加载图片
setAllowFileAccessFromFileURLs(boolean flag：:允许通过 file url 加载的 Javascript 读取其他的本地文件,Android 4.1 之前默认是true，在 Android 4.1 及以后默认是false,也就是禁止。
setAllowUniversalAccessFromFileURLs(boolean flag):允许通过 file url 加载的 Javascript 可以访问其他的源，包括其他的文件和 http，https 等其他的源，Android 4.1 之前默认是true，在 Android 4.1 及以后默认是false,也就是禁止如果此设置是允许，则 setAllowFileAccessFromFileURLs 不起做用。
boolean getLoadsImagesAutomatically():是否支持自动加载图片。

一份使用清单

    WebSettings webSettings = mWebView.getSettings();
    if (webSettings == null) return;
    // 支持 Js 使用
    webSettings.setJavaScriptEnabled(true);
    // 开启DOM缓存
    webSettings.setDomStorageEnabled(true);
    // 开启数据库缓存
    webSettings.setDatabaseEnabled(true);
    // 支持自动加载图片
    webSettings.setLoadsImagesAutomatically(hasKitkat());
    // 设置 WebView 的缓存模式
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
    // 支持启用缓存模式
    webSettings.setAppCacheEnabled(true);
    // 设置 AppCache 最大缓存值(现在官方已经不提倡使用，已废弃)
    webSettings.setAppCacheMaxSize(8 * 1024 * 1024);
    // Android 私有缓存存储，如果你不调用setAppCachePath方法，WebView将不会产生这个目录
    webSettings.setAppCachePath(getCacheDir().getAbsolutePath());
    // 数据库路径
    if (!hasKitkat()) {
        webSettings.setDatabasePath(getDatabasePath("html").getPath());
    }
    // 关闭密码保存提醒功能
    webSettings.setSavePassword(false);
    // 支持缩放
    webSettings.setSupportZoom(true);
    // 设置 UserAgent 属性
    webSettings.setUserAgentString("");
    // 允许加载本地 html 文件/false
    webSettings.setAllowFileAccess(true);
    // 允许通过 file url 加载的 Javascript 读取其他的本地文件,Android 4.1 之前默认是true，在 Android 4.1 及以后默认是false,也就是禁止
    webSettings.setAllowFileAccessFromFileURLs(false);
    // 允许通过 file url 加载的 Javascript 可以访问其他的源，包括其他的文件和 http，https 等其他的源，
    // Android 4.1 之前默认是true，在 Android 4.1 及以后默认是false,也就是禁止
    // 如果此设置是允许，则 setAllowFileAccessFromFileURLs 不起做用
    webSettings.setAllowUniversalAccessFromFileURLs(false);

WebViewClient

1、常用方法

onPageStarted(WebView view, String url, Bitmap favicon):WebView 开始加载页面时回调，一次Frame加载对应一次回调。
onLoadResource(WebView view, String url):WebView 加载页面资源时会回调，每一个资源产生的一次网络加载，除非本地有当前 url 对应有缓存，否则就会加载。
shouldInterceptRequest(WebView view, String url):WebView 可以拦截某一次的 request 来返回我们自己加载的数据，这个方法在后面缓存会有很大作用。
shouldInterceptRequest(WebView view, android.webkit.WebResourceRequest request):WebView 可以拦截某一次的 request 来返回我们自己加载的数据，这个方法在后面缓存会有很大作用。
shouldOverrideUrlLoading(WebView view, String url):是否在 WebView 内加载页面。
onReceivedSslError(WebView view, SslErrorHandler handler, SslError error):WebView ssl 访问证书出错，handler.cancel()取消加载，handler.proceed()对然错误也继续加载。
onPageFinished(WebView view, String url):WebView 完成加载页面时回调，一次Frame加载对应一次回调。
onReceivedError(WebView view, int errorCode, String description, String failingUrl):WebView 访问 url 出错。

2、一份使用清单

public class SafeWebViewClient extends WebViewClient {

    /**
     * 当WebView得页面Scale值发生改变时回调
     */
    @Override
    public void onScaleChanged(WebView view, float oldScale, float newScale) {
        super.onScaleChanged(view, oldScale, newScale);
    }

    /**
     * 是否在 WebView 内加载页面
     *
     * @param view
     * @param url
     * @return
     */
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }

    /**
     * WebView 开始加载页面时回调，一次Frame加载对应一次回调
     *
     * @param view
     * @param url
     * @param favicon
     */
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }

    /**
     * WebView 完成加载页面时回调，一次Frame加载对应一次回调
     *
     * @param view
     * @param url
     */
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
    }

    /**
     * WebView 加载页面资源时会回调，每一个资源产生的一次网络加载，除非本地有当前 url 对应有缓存，否则就会加载。
     *
     * @param view WebView
     * @param url  url
     */
    @Override
    public void onLoadResource(WebView view, String url) {
        super.onLoadResource(view, url);
    }

    /**
     * WebView 可以拦截某一次的 request 来返回我们自己加载的数据，这个方法在后面缓存会有很大作用。
     *
     * @param view    WebView
     * @param request 当前产生 request 请求
     * @return WebResourceResponse
     */
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        return super.shouldInterceptRequest(view, request);
    }

    /**
     * WebView 访问 url 出错
     *
     * @param view
     * @param request
     * @param error
     */
    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        super.onReceivedError(view, request, error);
    }

    /**
     * WebView ssl 访问证书出错，handler.cancel()取消加载，handler.proceed()对然错误也继续加载
     *
     * @param view
     * @param handler
     * @param error
     */
    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        super.onReceivedSslError(view, handler, error);
    }
}

WebChromeClient

1、常用方法

onConsoleMessage(String message, int lineNumber,String sourceID):输出 Web 端日志。
onProgressChanged(WebView view, int newProgress):当前 WebView 加载网页进度。
onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result):处理 JS 中的 Prompt对话框
onJsAlert(WebView view, String url, String message, JsResult result): Js 中调用 alert() 函数，产生的对话框。
onReceivedTitle(WebView view, String title):接收web页面的 Title。
onReceivedIcon(WebView view, Bitmap icon):接收web页面的icon。

2、一份使用清单

public class SafeWebChromeClient extends WebChromeClient {

    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        return super.onConsoleMessage(consoleMessage);
    }

    /**
     * 当前 WebView 加载网页进度
     *
     * @param view
     * @param newProgress
     */
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
    }

    /**
     * Js 中调用 alert() 函数，产生的对话框
     *
     * @param view
     * @param url
     * @param message
     * @param result
     * @return
     */
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }

    /**
     * 处理 Js 中的 Confirm 对话框
     *
     * @param view
     * @param url
     * @param message
     * @param result
     * @return
     */
    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        return super.onJsConfirm(view, url, message, result);
    }

    /**
     * 处理 JS 中的 Prompt对话框
     *
     * @param view
     * @param url
     * @param message
     * @param defaultValue
     * @param result
     * @return
     */
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }

    /**
     * 接收web页面的icon
     *
     * @param view
     * @param icon
     */
    @Override
    public void onReceivedIcon(WebView view, Bitmap icon) {
        super.onReceivedIcon(view, icon);
    }

    /**
     * 接收web页面的 Title
     *
     * @param view
     * @param title
     */
    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
    }

}

五、于 JavaScript 交互

介绍

注：这里着重介绍下第一种标准方式，后面会介绍其他两种方式。

1、使用系统方法 addJavascriptInterface 注入 java 对象来实现。

2、利用 WebViewClient 中 shouldOverrideUrlLoading (WebView view, String url) 接口，拦截操作。这个就是很多公司在用的 scheme 方式，通过制定url协议，双方各自解析，使用iframe来调用native代码，实现互通。

3、利用 WebChromeClient 中的 onJsAlert、onJsConfirm、onJsPrompt 提示接口，同样也是拦截操作。

使用清单：

//开启Js可用
mWebView.getSettings().setJavaScriptEnabled(true);

// 创建要注入的 Java 类
public class NativeInterface {

    private Context mContext;

    public NativeInterface(Context context) {
        mContext = context;
    }

    @JavascriptInterface
    public void hello() {
        Toast.makeText(mContext, "hello", Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void hello(String params) {
        Toast.makeText(mContext, params, Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public String getAndroid() {
        Toast.makeText(mContext, "getAndroid", Toast.LENGTH_SHORT).show();
        return "Android data";
    }

}

// WebView 注入即可
mWebView.addJavascriptInterface(new NativeInterface(this), "AndroidNative");

//Js编写
<script>
    function callHello(){
        AndroidNative.hello();
    }

    function callHello1(){
        AndroidNative.hello('hello Android');
    }

    function callAndroid(){
        var temp = AndroidNative.getAndroid();
        console.log(temp);
        alert(temp);
    }  

</script>

Native 调用 Js：mWebView.loadUrl(js);

Js 调用 Native :AndroidNative.getAndroid();

4.2版本以下会存在漏洞，4.2以上需要添加 @JavascriptInterface 注解才能被调用到，Js 调用方式不变。

六、Js 注入漏洞

虽然可以通过注入方式来实现 WebView 和 JS 交互，但是实现功能的同时也带了安全问题，通过注入的 Java 类作为桥梁，JS 就可以利用这个漏洞。

常见漏洞

目前已知的 WebView 漏洞有 4 个,分别是：

1、CVE-2012-6636，揭露了 WebView 中 addJavascriptInterface 接口会引起远程代码执行漏洞；
2、CVE-2013-4710，针对某些特定机型会存在 addJavascriptInterface API 引起的远程代码执行漏洞；
3、CVE-2014-1939 爆出 WebView 中内置导出的 “searchBoxJavaBridge_” Java Object 可能被利用，实现远程任意代码；
4、CVE-2014-7224，类似于 CVE-2014-1939 ，WebView 内置导出 “accessibility” 和 “accessibilityTraversal” 两个 Java Object 接口，可被利用实现远程任意代码执行。

如何解决漏洞

1、Android 4.2 以下不要在使用 JavascriptInterface方式，4.2 以上需要添加注解 @JavascriptInterface 才能调用。（这部分和JsBrige 有关，更详细的内容后面会介绍）

2、同1解决；

3、在创建 WebView 时，使用 removeJavascriptInterface 方法将系统注入的 searchBoxJavaBridge_ 对象删除。

4、当系统辅助功能服务被开启时，在 Android 4.4 以下的系统中，由系统提供的 WebView 组件都默认导出 ”accessibility” 和 ”accessibilityTraversal” 这两个接口，这两个接口同样存在远程任意代码执行的威胁，同样的需要通过 removeJavascriptInterface 方法将这两个对象删除。

       super.removeJavascriptInterface("searchBoxJavaBridge_");
       super.removeJavascriptInterface("accessibility");
       super.removeJavascriptInterface("accessibilityTraversal");

以上都是系统机制层面上的漏洞，还有一些是使用 WebView 不挡产生的漏洞。

5、通过 WebSettings.setSavePassword(false) 关闭密码保存提醒功能，防止明文密码存在本地被盗用。

6、WebView 默认是可以使用 File 协议的，也就是 setAllowFileAccess(true)，我们应该是主动设置为 setAllowFileAccess(false),防止加载本地文件，移动版的 Chrome 默认禁止加载 file 协议的文件

setAllowFileAccess(true);//设置为 false 将不能加载本地 html 文件
setAllowFileAccessFromFileURLs(false);
setAllowUniversalAccessFromFileURLs(false);
if (url.startsWith("file://") {
    setJavaScriptEnabled(false);
} else {
    setJavaScriptEnabled(true);
}

安全修复案例

推荐 SafeWebView 这个库中解决了 Android WebView 中 Js 注入漏洞问题，另外还包含了一些异常处理。可以自行下载阅读源码。

七、一些坑

主要总结 WebView 相关的疑难 bug，由于 Android 版本严重碎片化，在使用 WebView 的时候也会遇到各种个样的坑，特别是 4.4 之后更换了 WebView 内核，4.2 以下有部分漏洞，所以想把经历过的 WebView 这些坑记录下来，仅供参考。

1、android.webkit.AccessibilityInjector$TextToSpeechWrapper

java.lang.NullPointerException
    at android.webkit.AccessibilityInjector$TextToSpeechWrapper$1.onInit(AccessibilityInjector.java:753)
    at android.speech.tts.TextToSpeech.dispatchOnInit(TextToSpeech.java:640)
    at android.speech.tts.TextToSpeech.initTts(TextToSpeech.java:619)
    at android.speech.tts.TextToSpeech.<init>(TextToSpeech.java:553)
    at android.webkit.AccessibilityInjector$TextToSpeechWrapper.<init>(AccessibilityInjector.java:676)
    at android.webkit.AccessibilityInjector.addTtsApis(AccessibilityInjector.java:480)
    at android.webkit.AccessibilityInjector.addAccessibilityApisIfNecessary(AccessibilityInjector.java:168)
    at android.webkit.AccessibilityInjector.onPageStarted(AccessibilityInjector.java:340)
    at android.webkit.WebViewClassic.onPageStarted(WebViewClassic.java:4480)
    at android.webkit.CallbackProxy.handleMessage(CallbackProxy.java:366)
    at android.os.Handler.dispatchMessage(Handler.java:107)
    at android.os.Looper.loop(Looper.java:194)
    at android.app.ActivityThread.main(ActivityThread.java:5407)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:525)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:833)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:600)
    at dalvik.system.NativeStart.main(Native Method)

此问题在4.2.1和4.2.2比较集中，关闭辅助功能，google 下很多结果都是一样的。

修复方法：在初始化 WebView 时调用disableAccessibility方法即可。

public static void disableAccessibility(Context context) {
        if (Build.VERSION.SDK_INT == 17/*4.2 (Build.VERSION_CODES.JELLY_BEAN_MR1)*/) {
            if (context != null) {
                try {
                    AccessibilityManager am = (AccessibilityManager) context.getSystemService(Context.ACCESSIBILITY_SERVICE);
                    if (!am.isEnabled()) {
                        //Not need to disable accessibility
                        return;
                    }

                    Method setState = am.getClass().getDeclaredMethod("setState", int.class);
                    setState.setAccessible(true);
                    setState.invoke(am, 0);/**{@link AccessibilityManager#STATE_FLAG_ACCESSIBILITY_ENABLED}*/
                } catch (Exception ignored) {
                    ignored.printStackTrace();
                }
            }
        }
    }

2、android.content.pm.PackageManager$NameNotFoundException

AndroidRuntimeException: android.content.pm.PackageManager$NameNotFoundException: com.google.android.webview
    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4604)
    at android.app.ActivityThread.access$1500(ActivityThread.java:154)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1389)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:135)
    at android.app.ActivityThread.main(ActivityThread.java:5302)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:916)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:711)
Caused by: android.util.AndroidRuntimeException: android.content.pm.PackageManager$NameNotFoundException: com.google.android.webview
    at android.webkit.WebViewFactory.getFactoryClass(WebViewFactory.java:174)
    at android.webkit.WebViewFactory.getProvider(WebViewFactory.java:109)
    at android.webkit.WebView.getFactory(WebView.java:2194)
    at android.webkit.WebView.ensureProviderCreated(WebView.java:2189)
    at android.webkit.WebView.setOverScrollMode(WebView.java:2248)
    at android.view.View.<init>(View.java:3588)
    at android.view.View.<init>(View.java:3682)
    at android.view.ViewGroup.<init>(ViewGroup.java:497)
    at android.widget.AbsoluteLayout.<init>(AbsoluteLayout.java:55)
    at android.webkit.WebView.<init>(WebView.java:544)
    at android.webkit.WebView.<init>(WebView.java:489)
    at android.webkit.WebView.<init>(WebView.java:472)
    at android.webkit.WebView.<init>(WebView.java:459)
    at android.webkit.WebView.<init>(WebView.java:449)

现象：在创建 WebView 时崩溃，跟进栈信息，我们需要在 setOverScrollMode 方法上加异常保护处理

修复方法：

try {
    super.setOverScrollMode(mode);
} catch (Throwable e) {
    e.printStackTrace();
}

不过上面捕获的异常范围有点广，在github上找到一个更全面的修复方法

try{
    super.setOverScrollMode(mode);
} catch(Throwable e){
        String messageCause = e.getCause() == null ? e.toString() : e.getCause().toString();
String trace = Log.getStackTraceString(e);
if (trace.contains("android.content.pm.PackageManager$NameNotFoundException")
  || trace.contains("java.lang.RuntimeException: Cannot load WebView")
    || trace.contains("android.webkit.WebViewFactory$MissingWebViewPackageException: Failed to load WebView provider: No WebView installed")) {
      e.printStackTrace();
    }else{
      throw e;
    }        
}

3、android.webkit.WebViewClassic.clearView

at android.webkit.BrowserFrame.nativeLoadUrl(Native Method)
System.err:     at android.webkit.BrowserFrame.loadUrl(BrowserFrame.java:279)
System.err:     at android.webkit.WebViewCore.loadUrl(WebViewCore.java:2011)
System.err:     at android.webkit.WebViewCore.access$1900(WebViewCore.java:57)
System.err:     at android.webkit.WebViewCore$EventHub$1.handleMessage(WebViewCore.java:1303)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:99)
System.err:     at android.os.Looper.loop(Looper.java:137)
System.err:     at android.webkit.WebViewCore$WebCoreThread.run(WebViewCore.java:812)
System.err:     at java.lang.Thread.run(Thread.java:856)
webcoreglue: *** Uncaught exception returned from Java call!
System.err: java.lang.NullPointerException
System.err:     at android.webkit.WebViewClassic.clearView(WebViewClassic.java:2868)
System.err:     at android.webkit.WebViewCore.setupViewport(WebViewCore.java:2497)
System.err:     at android.webkit.WebViewCore.updateViewport(WebViewCore.java:2479)
System.err:     at android.webkit.BrowserFrame.nativeLoadUrl(Native Method)
System.err:     at android.webkit.BrowserFrame.loadUrl(BrowserFrame.java:279)
System.err:     at android.webkit.WebViewCore.loadUrl(WebViewCore.java:2011)
System.err:     at android.webkit.WebViewCore.access$1900(WebViewCore.java:57)
System.err:     at android.webkit.WebViewCore$EventHub$1.handleMessage(WebViewCore.java:1303)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:99)
System.err:     at android.os.Looper.loop(Looper.java:137)

这个bug是在某些设备上发生的，是在调用webView.destroy() 之前调用了loadurl操作发生的，也不是毕现问题，所以只能跟进源码查看，
在清空 webview destroy 时，调用清理方法，内部可能时机有问题，会出现，WebViewClassic 中 mWebViewCore 对象为null，其内部为handler消息机制。

修复方法：

public void logdUrl(final String url) {
    try {
        super.loadUrl(url);
    } catch (NullPointerException e) {
        e.printStackTrace();
    }
}

八、JSBridge

相信很多都或多或少的了解 JsBridge,不管是 iOS 平台还是 Android平台，特别是 Hybrid 应用，肯定是要用的 JsBridge 这个机制来建立 Native 和 Web 端的通信。

本部分简单阐述下 JsBridge 原理，以及分析两个实际案例。

JsBridge 介绍：

JSBridge 我们可以比喻成一座桥或者一根管道，一端是 Web一端是 Native。我们搭建这个通道的目的就是让 Native 和 Web 之间互相调用更为方便统一和简洁。
JSBridge 做得好的一个典型就是微信，微信给开发者提供了 JSSDK，该SDK中暴露了很多微信native层的方法，比如支付，定位等。使用起来非常方便。

JsBridge 原理：

前面我们分析了 WebView 如何于 JavaScript 交互的，JSBridge 就是在这些基础之上做扩展使它支持更复杂的功能，三种形式两种原理分析如下：

1、使用 addJavascriptInterface

原理：这是Android提供的Js与Native通信的官方解决方案，将 java 对象注入到 Js 中直接作为window的某一变量来使用。

2、WebViewClient 中 shouldOverrideUrlLoading (WebView view, String url)。

利用 scheme iframe 机制，只要有iframe 加载，shouldOverrideUrlLoading 方法就会有回调。可以构造一个特殊格式的url，使用shouldOverrideUrlLoading 方法拦截url，根据解析url来之行native方法逻辑。

3、利用 WebChromeClient 中的 onJsAlert、onJsConfirm、onJsPrompt 提示接口，同样也是拦截操作。

利用 js调用window对象的对应的方法，即 window.alert，window.confirm，window.prompt，WebChromeClient 对象中的三个方法 onJsAlert、onJsConfirm、onJsPrompt 就会被触发，有了js到native的通道，那么我们就可以制定协议来约束对方。最终我们选择使用 prompt 方法，onJsPrompt()方法的message参数的值正是Js的方法window.prompt()的message的值。

汇总：后面两种虽然形式不同，但是原理是相同的，都是对url或者参数做文章，通过制定参数协议，不管是url还是message，到native拦截处理。native 调用 Js 只有一种方式，就是使用loadUrl(js),js 为在web端定义好的javascript 函数。

以上就是所有 JsBridge 的原理，自己可以写给demo跑一下，下面看几个问题：

1、如何避免 JS、Android、iOS 相互调用时，需要事先“约定”方法名称和参数？
2、原生调用 JS 方法，能否类似原生开发一样，使用 Callback（block）做为回调方式？
3、JS 调用原生能否使用 function 获得返回值?

问题来源于网络，基本上都是这几个疑问，下面我们带着疑问去分析三个个方案。

JsBridge 案例：

一、 H5与Native交互之JSBridge技术

本案例为有赞技术团队博客分享的H5与Native交互之JSBridge技术，并没有最终完全的代码，不过很清楚的分析了IOS和Android与Javascript的底层交互原理。

1、实现原理

通过schema方式，使用shouldOverrideUrlLoading方法对url协议进行解析。

var url = 'jsbridge://doAction?title=分享标题&desc=分享描述&link=http%3A%2F%2Fwww.baidu.com';  
var iframe = document.createElement('iframe');  
iframe.style.width = '1px';  
iframe.style.height = '1px';  
iframe.style.display = 'none';  
iframe.src = url;  
document.body.appendChild(iframe);  
setTimeout(function() {  
    iframe.remove();
}, 100);

可以到看有赞技术是通过自定义url协议来作为传输媒介，这样 Android 就可以拦截这个请求，从而解析出相应的方法和参数

不过此 url 中的参数是以键值对的方式传递，我是建议使用 Json 作为传输参数比较好，灵活清楚。

2、库的封装

有赞将 Js与 Native 通讯封装了一个通用的方法，我这里直接复制过来分析下：

YouzanJsBridge = {  
    doCall: function(functionName, data, callback) {
        var _this = this;
        // 解决连续调用问题
        if (this.lastCallTime && (Date.now() - this.lastCallTime) < 100) {
            setTimeout(function() {
                _this.doCall(functionName, data, callback);
            }, 100);
            return;
        }
        this.lastCallTime = Date.now();

        data = data || {};
        if (callback) {
            $.extend(data, { callback: callback });
        }

        if (UA.isIOS()) {
            $.each(data, function(key, value) {
                if ($.isPlainObject(value) || $.isArray(value)) {
                    data[key] = JSON.stringify(value);
                }
            });
            var url = Args.addParameter('youzanjs://' + functionName, data);
            var iframe = document.createElement('iframe');
            iframe.style.width = '1px';
            iframe.style.height = '1px';
            iframe.style.display = 'none';
            iframe.src = url;
            document.body.appendChild(iframe);
            setTimeout(function() {
                iframe.remove();
            }, 100);
        } else if (UA.isAndroid()) {
            window.androidJS && window.androidJS[functionName] && window.androidJS[functionName](JSON.stringify(data));
        } else {
            console.error('未获取platform信息，调取api失败');
        }
    }
}

这样不管是和iOS通信还是 Android，都只需要调用 YouzanJsBridge.doCall() 方法即可，讲两个平台的不同屏蔽在封装基础上，这样也有利于 Web 端代码的整洁和代码兼容。

当然这里的Android 平台是没有 callback 回调的，如果你想实现两端互调的机制，请参考下一个案例，里面会详细介绍这部分。

3、一些优化

将项目通用方法抽象

例如：

1.getData(datatype, callback, extra) H5从Native APP获取数据
使用场景：H5需要从Native APP获取某些数据的时候，可以调用这个方法。

2.putData(datatype, data) H5告诉Native APP一些数据
使用场景：H5告诉Native APP一些数据，可以调用这个方法。

3.gotoWebview(url, page, data) Native APP新开一个Webview窗口，并打开相应网页

4.doAction(action, data) 功能上的一些操作

等等其他方法，我相信如果你自己写过 native和js 调用demo，上面抽象出来的方法并不陌生，所以，如果你的业务没有那么复杂，没有像微信那样，需要提供给数以万计开发者去用去扩展，这种抽象出一些通用方法的方式不是为一种节省成本，快速迭代，方便的方式。

小结：总之万变不离其宗，所有封装或者框架的东西，使用的东西都还是最基本的方法，只是对基础做一个什么样程度扩展，或深或浅，唯一的只要用着舒服就行。

二：JsBridge

1、使用方法:

注意Android 和 Web 使用方式

webView.registerHandler("submitFromWeb", new BridgeHandler() {

    @Override
    public void handler(String data, CallBackFunction function) {
      function.onCallBack("native submitFromWeb 方法, 返回 data");
    }
  });

  webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
    @Override
    public void onCallBack(String data) {
      Log.i(TAG, "onCallBack : " + data);
    }
  });

  window.WebViewJavascriptBridge.callHandler(
      'submitFromWeb'
      , {'param': '中文测试'}
            , function(responseData) {
    document.getElementById("show").innerHTML = "send get responseData from Android 端, data = " + responseData
  }
        );

  bridge.registerHandler("functionInJs", function(data, responseCallback) {
    document.getElementById("show").innerHTML = ("data from Java: = " + data);
    var responseData = "call functionInJs success,return android!";
    responseCallback(responseData);
  });

2、关键类作用：

在讲 JsBridge 的实现之前，首先要讲下各个文件的作用

Message.java:JsBridge 中的消息对象，用来封装native与js交互时的json数据，包含：callid、responseid、responseData、handlerName等字段。
WebViewJavascriptBridge.js:改js文件会被注入到各个页面，和native中封装处理Message消息逻辑类似，同样提供了初始化、注册Handler、调用Handler等方法，之后js都是通过此文件中的方法和native统一沟通。
WebViewJavascriptBridge.java:native 端，Bridge接口类,定义了发送信息的方法，由BridgeWebView来实现，之后调用可以通过webview.send()方式调用。
BridgeWebView.java:WebView的子类，实现了WebViewJavascriptBridge接口，并提供了注册、调用 Handler等方法，之后都是通过webview.registerHandler()或者webview.callHandler()方式调用js.
BridgeWebViewClient.java:WebViewClient的子类，重写了ShouldOverrideUrlLoading，onPageFinish，onPageStart等方法。
BridgeHandler.java:作为native与web交互的通道。native通过Handler的名称来找到响应的Handler来操作，这样才能实现js回调给native端，也就是registerHandler时候注册的监听。
CallBackFunction.java:native定义的回调函数， Handler处理完成后，用来给Js发送消息，对应处理js中function中。

3、实现原理：

看完这些主要类的作用，在看流程就清晰了。

native 调 js：

1、WebView.callHandler('handlerName','{}',callBack);
2、doSend 中组装要传输的 Message 对象，并设置setCallbackId（生成唯一的id是为了方便在js回调回来的时候在android端查找对于的 callback）
3、dispatchMessage javascript:WebViewJavascriptBridge._handleMessageFromNative(message);方法 message 为上一步的Message 对象对应的 Json 数据。
4、在 Js _dispatchMessageFromNative 函数中，根据 messageJSON json 数据中的字段 handlerName 找到对对应的 handler 方法执行。
handler = messageHandlers[message.handlerName];handler 这个就是在 html 中 registerHandler 注册的回调function(data, responseCallback)函数
5、之后执行 html 中 responseCallback(responseData); 会触发 WebViewJavascriptBridge.js 文件中的 _doSend函数，_doSend 通过 messagingIframe.src 形式传给 android端，shouldOverrideUrlLoading 接受，并拦截内容处理。
6、第一次：拦截执行到 webView.flushMessageQueue()方法，并调用 responseCallbacks.put(jsUrl,returnCallback);，同时调用 javascript:WebViewJavascriptBridge._fetchQueue(); 来查询消息的返回值，并执行一次messagingIframe.src。
7、第二次：拦截执行到 webView.handlerReturnData() 方法，并调用上一步注册的 CallBackFunction.onCallBack，然后根据responseId 即 android 传过来的 message.callbackId，找到使用者注册的 CallBackFunction 回调。

本次的流程就走完了,看几十遍就看懂了哈。

Js -> android:

1、window.WebViewJavascriptBridge.callHandler
2、执行 Js 函数 _doSend() 触发 messagingIframe.src
3、android 端拦截，shouldOverrideUrlLoading
4、第一次：拦截执行到 webView.flushMessageQueue()方法，并调用 responseCallbacks.put(jsUrl,returnCallback);，同时调用 javascript:WebViewJavascriptBridge._fetchQueue(); 来查询消息的返回值，并执行一次messagingIframe.src。
5、第二次：拦截执行到 webView.handlerReturnData() 方法，并调用上一步注册的 CallBackFunction.onCallBack -> responseId 为空 -> handler.handler(m.getData(), responseFunction)-> 外部回调（ function.onCallBack("native submitFromWeb 方法, 返回 data");）-> queueMessage -> dispatchMessage ->loadUrl(javascriptCommand) -> 回调结束

注意两端的每一次通讯，Android 端的 shouldOverrideUrlLoading 方法都会执行两次，但是携带url不同，这里要注意两次访问是相互配合的，没有第一次的消息查询，也就不会有第二次的数据返回回调。

4、小结

通过url拦截方式，注入一个本地js文件，来桥接native和web，屏蔽了一些通性工作，在使用上方式相同，好理解，通过两次来回调用实现了可回调function。

github 上也有很多类似的方案，这里就不一一分析了，如果你不是看的这个库，建议好好看看，挺巧妙的机制。

这块逻辑也是看了好久，挺绕的，可以结合打log和debug来分析。

三：DSBridge-Android

1、使用方法

注意Android 和 Web 使用方式

    webView.callHandler("addValue",new Object[]{1,"hello"},new CallBackFunction(){
        @Override
        public void onCallBack(String retValue) {
            Log.d("jsbridge","call succeed,return value is "+retValue);
        }
    });
   webView.callHandler("test",null);

   dsBridge.call("testNever", {msg: "testSyn"});

   dsBridge.call("testNoArgAsyn", function (v) {
       alert(v);
   });

2、关键类作用：

DWebView:WebView的子类，提供了注册、调用 Handler等方法，之后都是通过 webview.callHandler()方式调用js.
CompletionHandler:作为native与web交互的通道，异步回调的关键操作类。
OnReturnValue:js 回调 android的接口，根据 handlerMap 储存的id作为 handler 标示即OnReturnValue实现类。
JsApi:需要注册到 Js java 类。

看完这些主要类的作用，在看流程就清晰了。

3、实现原理：

本质还是使用的系统默认 addJavascriptInterface 方式，其中做了扩展。

首先需要将这段js注入到 Web 页面

function getJsBridge() {
    window._dsf = window._dsf || {};
    return {
        call: function(b, a, c) {
            "function" == typeof a && (c = a, a = {});
            if ("function" == typeof c) {
                window.dscb = window.dscb || 0;
                var d = "dscb" + window.dscb++;
                window[d] = c;
                a._dscbstub = d
            }
            a = JSON.stringify(a || {});
            return window._dswk ? prompt(window._dswk + b, a) : "function" == typeof _dsbridge ? _dsbridge(b, a) : _dsbridge.call(b, a)
        },
        register: function(b, a) {
            "object" == typeof b ? Object.assign(window._dsf, b) : window._dsf[b] = a
        }
    }
}

dsBridge = getJsBridge();

native -> js：

1、webview.callHandler(method,args,handler)；
2、拼接Js，并生成唯一的callID，将 handler保存到map中；
3、执行js，同时回调 java returnValue()，然后回调使用者调用。

js -> android:

1、dsBridge.call(method,json,function)-> native call(methodName,args)；
2、通过反射来查找methodName对应的方法，并注册 CompletionHandler；
3、JsApi 通过 handler.complete() 方法，并拼装js方法和参数，再次调用js函数实现回调操作，并删除上一次的 callback id。

4、小结：

这个方案比较简单，使用了系统的注入方式，虽然 4.2以下存在漏洞，但是它里面只能反射包含 @JavascriptInterface 注解的方法，所以和4.2以上注入是一样的，也是安全的。

相对案例一，案例二实现方式比较简单粗暴，也比较容易懂。

不过这个库在我的 4.2 设备上有 bug，下面函数执行时找不到 dsBridge 对象，导致 Native 调用 Js 失败。

 dsBridge.register('addValue',function(l,r){
     return l+r;
 })

可能和内核执行有关系，我这做了修复，放到 function 函数中执行就可以了，如果你也遇到，可以参考我的修复方法 DSBridge-Android

九、WebView 缓存原理分析和应用

这部分内容可以参考这两篇博文:

写的已经很清楚了，我这里就不赘述了。

主要包含一下内容：

1、WebView 的5中缓存类型，以及每个缓存类型工作原理、相同点和不同点、。
2、缓存在手机上的存储。
3、每种缓存机制案例。

如果你想通过过滤来减缓 WebView 请求网络，可以参考 rexxar-android 中关于拦截url操作读取本地操作。

十、性能、体验分析与优化

参考美团：WebView性能、体验分析与优化

这部分美团的技术博客已经写的很好了，不仅从性能、内存消耗、体验、安全几个维度，来系统的分析客户端默认 WebView 的问题，还给出了对应的优化方案。

我的感受：文章中也提到了 QQ 的 Hybrid 架构演进，主要的优化方向和内容和下面的Hybrid 开源框架 VasSonic 基本一直，当然都是腾讯东东，应该是有所借鉴的。而且关于 WebView 的优化也就是那几部分，串行该并行、缓存 WebView、客户端代替 WebView 网络请求，WebView 拦截url加载本地资源，还有Web 端(cdn 神马的，哈哈，不太熟悉)等等几个主要方面，但是能将上数几个方面都完美的结合到一起的市面上很少，VasSonic就做到了。

十一、Hybrid 开源框架

1、VasSonic

VasSonic 是腾讯出品的一个轻量级的高性能的Hybrid框架，专注于提升页面首屏加载速度，完美支持静态直出页面和动态直出页面，兼容离线包等方案。

我的感受：比豆瓣的框架复杂很多，不是一个量级的，可能和业务也相关吧，毕竟鹅厂用户很多服务也很多啊。我也是断断续续看了很久，逻辑还是挺复杂的，不过思路挺清晰，就是能利用上的资源统统要利用，不能让 CPU 或者网络空等，主要是在WebView 和加载之间做一个完美的桥接，让内容不管在什么情况下都能衔接自如。不过，其中并不包含 JsBridge 部分内容。

VasSonic/wiki wiki 写的也特别清楚，值得好好去研究，另外这个库的QQ群也特别活跃，里面有负责维护的同学帮忙解答疑问，值得点赞！

辛辛苦苦开源了，作为平时想提高 WebView 访问速度的朋友肯定不会错过这么好的内容，强烈建议大家去阅读源码，库更新也很快。

2、rexxar-android

rexxar-android 是豆瓣的混合开发框架，包含 Web、iOS、Android 三端，Android 部分主要内容围绕路由表、容器、缓存。其他部分可以阅读豆瓣的混合开发框架 -- Rexxar 更详细介绍。

我的感觉：rexxar-android 在缓存部分还是值得学习的，缓存 Cache 分为两部分：本地预装、本地 file 缓存。其中将每一个需要 Native 完成的功能抽象成一个 widget ，通过制定url协议，过滤并解析url的携带的参数。

作者：無名小子的杂货铺
链接：https://www.jianshu.com/p/fd61e8f4049e
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一、简介

二、基本使用

三、WebView 方法

常用方法

一份 WebView 方法使用清单

四、常用属性

WebSettings

常用方法

一份使用清单

WebViewClient

1、常用方法

2、一份使用清单

WebChromeClient

1、常用方法

2、一份使用清单

五、于 JavaScript 交互

介绍

使用清单：

六、Js 注入漏洞

常见漏洞

如何解决漏洞

安全修复案例

七、一些坑

1、android.webkit.AccessibilityInjector$TextToSpeechWrapper

2、android.content.pm.PackageManager$NameNotFoundException

3、android.webkit.WebViewClassic.clearView

八、JSBridge

JsBridge 介绍：

JsBridge 原理：

JsBridge 案例：

一、 H5与Native交互之JSBridge技术

二：JsBridge

三：DSBridge-Android

九、WebView 缓存原理分析和应用

十、性能、体验分析与优化

十一、Hybrid 开源框架

1、VasSonic

2、rexxar-android

猜你喜欢