Android產品研發（十八）-->webview問題集錦

轉載請標明出處：一片楓葉的專欄

上一篇文章中我們介紹了hybrid開發相關的知識。重點介紹了hybrid開發的概念，hybrid開發的作用，Android中如何實現hybrid開發，Android中實現hybrid開發的例子，以及產品開發中hybrid開發實踐等，通過對以上這些概念的介紹我們對hybrid開發應該已經有了大概的瞭解，更多具體的內容可參考我的：Android產品研發（十七）–>Hybrid開發

本文中我們將介紹一下Android中webview在使用過程中會遇到的一些問題。這些問題主要是webview在使用過程中我已經趟過的坑，希望通過這篇文章的介紹能夠幫助大家更好的使用webview。

下面是本文主要介紹的一些知識點，後續使用過程中可能會有更新。

• webview的性能優化

• webview注入cookie信息

• webview退出activity異常

• webview中native與js交互

• webview下載文件

• 騰訊X5瀏覽服務

最近App中相當一部分的頁面內容使用的是webview。而使用webview加載頁面一個需要注意的地方就是性能，所以最近也研究了一下webview的性能優化問題。

webview的性能問題

在講解webview的性能問題之前，我們先來了解一下Android webview的緩存機制。

• Android WebView緩存機制

WebView中存在着兩種緩存：網頁數據緩存（網頁數據，url等）、H5緩存（H5代碼緩存數據）

不同的緩存數據會保存在不同的文件目錄下，這裏引用一下其他blog的說法：

當我們加載Html時候，會在我們data/應用package下生成database與cache兩個文件夾:
我們請求的Url記錄是保存在webviewCache.db裏，而url的內容是保存在webviewCache文件夾下。

webview中也是可以設置緩存是否可用的，一般是通過WebSettings對象設置，下面我們就來看一下WebSettings對象的使用。

• Android中webview組件有幾個重要的方法

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setAllowFileAccess(false);
webSettings.setUseWideViewPort(false);
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webSettings.setDatabaseEnabled(false);
webSettings.setAppCacheEnabled(false);
webSettings.setBlockNetworkImage(true);
// 設置WebView的Client
mWebView.setWebViewClient(new MWebViewClient(this));
// 設置可現實js的alert彈窗
mWebView.setWebChromeClient(new WebChromeClient());

可以看到我們可以使用WebSettings對象設置緩存是否可用，緩存DB是否可用等。我們需要首先確保這裏設置了緩存可用，纔可以繼續設置使用何種緩存策略。

下面我們來看一下webview的五種緩存模式：
LOAD_CACHE_ONLY: 不使用網絡，只讀取本地緩存數據
LOAD_DEFAULT: 根據cache-control決定是否從網絡上取數據。
LOAD_CACHE_NORMAL: API level 17中已經廢棄, 從API level 11開始作用同LOAD_DEFAULT模式
LOAD_NO_CACHE: 不使用緩存，只從網絡獲取數據.
LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否過期，或者no-cache，都使用緩存中的數據。

• 幾種緩存方式的實現

（1）使用LOAD_CACHE_ELSE_NETWORK緩存模式，這樣需要在APP退出的時候清除webview緩存，但是這樣做有一個弊端就是如果當前App已經是打開狀態，網頁內容有更新的話不會看到；

（2）使用LOAD_DEFAULT這種緩存方式，數據從緩存中獲取還是從網絡中獲取根據H5頁面的參數判斷，這樣做的好處是可以動態的處理更新內容；

• 設置緩存

mWebView.getSettings().setJavaScriptEnabled(true); 
     mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);  mWebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);  //設置 緩存模式 
        // 開啓 DOM storage API 功能 
        mWebView.getSettings().setDomStorageEnabled(true); 
        //開啓 database storage API 功能 
        mWebView.getSettings().setDatabaseEnabled(true);  
        String cacheDirPath = getFilesDir().getAbsolutePath()+APP_CACAHE_DIRNAME; 
//      String cacheDirPath = getCacheDir().getAbsolutePath()+Constant.APP_DB_DIRNAME; 
        Log.i(TAG, "cacheDirPath="+cacheDirPath); 
        //設置數據庫緩存路徑 
        mWebView.getSettings().setDatabasePath(cacheDirPath); 
        //設置  Application Caches 緩存目錄 
        mWebView.getSettings().setAppCachePath(cacheDirPath); 
        //開啓 Application Caches 功能 
        mWebView.getSettings().setAppCacheEnabled(true); 

• 退出App時清除緩存

//清理Webview緩存數據庫 
        try { 
            deleteDatabase("webview.db");  
            deleteDatabase("webviewCache.db"); 
        } catch (Exception e) { 
            e.printStackTrace(); 
        } 

        //WebView 緩存文件 
        File appCacheDir = new File(getFilesDir().getAbsolutePath()+APP_CACAHE_DIRNAME); 
        Log.e(TAG, "appCacheDir path="+appCacheDir.getAbsolutePath()); 

        File webviewCacheDir = new File(getCacheDir().getAbsolutePath()+"/webviewCache"); 
        Log.e(TAG, "webviewCacheDir path="+webviewCacheDir.getAbsolutePath()); 

        //刪除webview 緩存目錄 
        if(webviewCacheDir.exists()){ 
            deleteFile(webviewCacheDir); 
        } 
        //刪除webview 緩存 緩存目錄 
        if(appCacheDir.exists()){ 
            deleteFile(appCacheDir); 
        }

• 其他的緩存策略

網頁在加載的時候暫時不加載圖片，當所有的HTML標籤加載完成時在加載圖片具體的做法如下初始化webview的時候設置不加載圖片

webSettings.setBlockNetworkImage(true);

然後在html標籤加載完成之後在加載圖片內容:

@Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        mWebView.getSettings().setBlockNetworkImage(false);   
    }

O(∩_∩)O哈哈~，這樣做的好處就是可以給人的感覺網頁加載速度很快…

• 將網頁內容中需要的js，css引用文件保存在App本地

加載網頁內容時，在加載完成html後替換頁面內容引用的地址改爲本地的資源文件地址，這樣可以直接加載本地的資源文件加快資源的訪問速度，目前主流的新聞客戶端訪問webview時多采用這種方式。

好吧，講解完了webview的性能優化問題之後我們在講解一下如何在H5頁面種入Cookie信息。

H5頁面種入Cookie問題

app中存在webview控件，既可以通過Native與js代碼交互的方式實現信息的交互也可以通過cookie的方式與實現Native與H5端的交互，查詢的好多資料各種各樣的實現方式都有，最終不斷嘗試基本實現了需求，現說明一下最終的實現方式；

/**
     * 客戶端將cookie種入H5頁面中，H5頁面可以通過js代碼實現對native種入cookie信息的讀取操作
     */
    public static void synCookies(Context context, String url, String cookie) {
        CookieSyncManager.createInstance(context);
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.setAcceptCookie(true);

        Uri uri = null;
        String domain = "";
        try {
            uri = Uri.parse(URLDecoder.decode(url, "utf-8"));
            domain = uri.getHost();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        String cookieStr = cookieManager.getCookie(url);
        // 判斷token是否發生變化，發生變化的話則更新cookie
        L.i("cookieEquce:" + cookie.equals(H5Constant.TOKEN + "="));
        if (!TextUtils.isEmpty(cookieStr) && cookieStr.contains(cookie) && !cookie.equals(H5Constant.TOKEN + "=")) {
            return;
        }
        // 更新domain(不再從UserInfo中獲取，更改爲從UrlInfo中獲取)
        if (!TextUtils.isEmpty(URLConfig.getUrlInfo().getB4Domain())) {
            domain = URLConfig.getUrlInfo().getB4Domain();
        }
        List<String> uaList = SysConfig.getSystemUa(context);
        String md = ";domain=" + domain;
        // 添加經緯度信息到Cookie中
        cookieManager.setCookie(url, "lat=" + Config.lat + md);
        cookieManager.setCookie(url, "lng=" + Config.lng + md);
        cookieManager.setCookie(url, cookie + ";" + md);
        if (uaList != null && uaList.size() > 0) {
            for (String coo : uaList) {
                cookieManager.setCookie(url, coo + md);
            }
        }

        CookieSyncManager.getInstance().sync();
    }

其中CookieManager是cookie的管理對象，主要實現對網頁cookie的注入與清除等工作。注入字符串的形式是：key=value;domain=url的形式（其中url爲需要注入cookie的url鏈接地址）

那麼如何移除cookie呢？

/**
     * 移除cookie
     */
    public static void removeCookies(Context context) {
        CookieSyncManager.createInstance(context);
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.removeSessionCookie();

        CookieSyncManager.getInstance().sync();
    }

一般情況下都是在打開H5頁面的時候種入Cookie信息，然後在離開H5頁面的時候清除cookie信息。當然了通過cookie實現native與js的交互只是實現信息交互的一種方式，我們還可以通過js與java代碼相互調用的方式實現相互交互，文章的後面會有介紹。

而下面我們再來講解一下activity退出時webview報錯的問題。

Activity退出時webview報錯的問題

前段時間在調試代碼的時候，有一段關於webview的代碼，即退出Fragment的時候清除webview，這時候在其他手機上是沒有問題的，但是在三星Grand2中報錯，而其報錯信息是：

java.lang.Throwable: Error: WebView.destroy() called while still attached!
at Android.webkit.WebViewClassic.destroy(WebViewClassic.java:4173)
at Android.webkit.WebView.destroy(WebView.java:707)
at com.youyou.uuelectric.renter.UI.web.H5Fragment.onDestroyView(H5Fragment.java:202)
at Android.support.v4.app.Fragment.performDestroyView(Fragment.java:2167)
at Android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1141)
at Android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1248)
at Android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1230)
at Android.support.v4.app.FragmentManagerImpl.dispatchDestroy(FragmentManager.java:2079)
at Android.support.v4.app.FragmentController.dispatchDestroy(FragmentController.java:235)
 at Android.support.v4.app.FragmentActivity.onDestroy(FragmentActivity.java:326)
at Android.support.v7.app.AppCompatActivity.onDestroy(AppCompatActivity.java:161)
at com.youyou.uuelectric.renter.UI.base.BaseActivity.onDestroy(BaseActivity.java:136)
at Android.app.Activity.performDestroy(Activity.java:5543)
at Android.app.Instrumentation.callActivityOnDestroy(Instrumentation.java:1134)
at Android.app.ActivityThread.performDestroyActivity(ActivityThread.java:3637)
at Android.app.ActivityThread.handleDestroyActivity(ActivityThread.java:3672)
at Android.app.ActivityThread.access$1300(ActivityThread.java:168)
at Android.app.ActivityThread$H.handleMessage(ActivityThread.java:1382)
at Android.os.Handler.dispatchMessage(Handler.java:99)
at Android.os.Looper.loop(Looper.java:176)
at Android.app.ActivityThread.main(ActivityThread.java:5493)
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:1225)
at com.Android.internal.os.ZygoteInit.main(ZygoteInit.java:1041)
at dalvik.system.NativeStart.main(Native Method)

程序也沒有異常退出之類的動作，清除webview的代碼是這樣寫的：

@Override
    public void onDestroyView() {
        super.onDestroyView();
        mWebView.removeAllViews();
        mWebView.destroy();
    }

這個錯誤大概的意思是：當你結束webview的時候，webview還依附在其父控件之下，應當在調用webview.destory()方法之前接觸他們之間的依附關係，那麼既然錯誤提示信息已經很明顯了，我們就根據錯誤信息嘗試着首先執行webview父控件的清除工作，然後在執行webview控件的清除操作，所以代碼中應該這樣實現：

@Override
    public void onDestroyView() {
        super.onDestroyView();
        swipeRefreshLayout.removeView(mWebView);
        mWebView.removeAllViews();
        mWebView.destroy();
    }

這樣經過修改之後特定機型上關於webview的錯誤就不在了。

webview中實現Native與js相互調用

上面我們介紹的通過cookie實現Android native與H5的信息交互只是一種方式，我們也可以通過java代碼與js代碼直接相互調用的方式實現Android native與H5信息的相互，這裏簡單的介紹一下使用方式

• native代碼調用H5的js代碼

（1）在H5頁面中添加一個js函數

<script type="text/javascript">
function uu_click(clicked_id) {
    alert(clicked_id);
}

（2）在Native中通過java代碼調用
若這時候H5頁面已經被加載到webview中,則可以通過java代碼直接調用js函數：

h5Fragment.mWebView.loadUrl("javascript:uu_click" + "('" + clickId + "')");

是的，沒錯就是這麼簡單，這樣就實現了java代碼對js代碼的調用，但是需要指出的是這裏無法調用含有返回值的js函數，這裏也算是小小的問題吧，但是話說回來，一般也沒有這種需要調用js代碼並獲得返回值的場景吧。

• js代碼調用java函數

（1）首先在java端編寫能夠被js代碼調用的java函數

• native方法的實現

/**
 * 自定義實現的native函數，可被js代碼調用
 */
class JsInteration {
    ...
    @JavascriptInterface
        public void toastMessage(String message) {
            Toast.makeText(getActivity(), message, Toast.LENGTH_LONG).show();
        }
    ...
}

（2）在native中注入本地方法，供js調用；

mWebView.addJavascriptInterface(new JsInteration(), "control");

（3）在js代碼中調用java代碼：

function reply_click(clicked_id {
    window.control.toastMessage(clicked_id)
}

以上就是webview中使用js代碼與java代碼相互調用的簡單例子。

webview下載文件

在使用webview開發中還遇到一個問題，app中webview中存在下載鏈接，但是在手機瀏覽器中點擊下載是沒有問題的，在webview中怎麼都不好使。查詢了好久，原來是因爲WebView默認沒有開啓文件下載的功能，如果要實現文件下載的功能，需要設置WebView的DownloadListener，通過實現自己的DownloadListener來實現文件的下載。

• 設置webview的setDownloadListener方法

mWebView.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
                L.i("tag", "this is a message!!!");
            }
        });

• 重寫onDownloadStart回調方法，實現下載文件的邏輯

比如在瀏覽器中實現下載：

@Override  
        public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype,  
                                    long contentLength) {  
            Uri uri = Uri.parse(url);  
            Intent intent = new Intent(Intent.ACTION_VIEW, uri);  
            startActivity(intent);  
        }  

這樣我們的webview中如果包含了下載鏈接就可以通過打開瀏覽器的方式實現下載了。

注：個人感覺webview沒有默認實現下載鏈接的功能更多的可能是考慮權限，安全方面的問題。

騰訊X5瀏覽服務

由於不同的手機版本問題，各個廠商的定製化操作，webview在不同的手機上表現有很大的不同，所以webview的適配工作在Android機上顯得比較重要，這裏我們就簡單的介紹一下騰訊的X5瀏覽服務，其相當於Android上webview的第三方框架。

這裏先暫時看一下騰訊X5服務的官方介紹，其官網是：騰訊瀏覽服務，然後我們看一下X5瀏覽服務官網對其的描述。

騰訊瀏覽服務由QQ瀏覽器團隊出品，致力於優化移動端webview體驗的整套解決方案，使用QQ瀏覽器X5內核SDK和X5雲端服務，解決移動端webview使用過程中出現的一切問題，優化用戶的瀏覽體驗，同時騰訊還將持續提供後續的更新和優化，爲開發者提供最新最優秀的功能和服務。

X5SDK是通過調用微信/手機QQ/空間的X5內核，解決系統webview兼容性差、加載速度慢、功能缺陷等問題，開發接入便捷，大小隻有253K，僅需幾行代碼，即可解決一切令開發者們頭疼的問題，爲用戶提供最優秀的瀏覽體驗。
同時，QQ瀏覽器團隊還將持續更新和優化X5內核，持續優化功能，並保證兼容各種web新特性。

• 騰訊X5瀏覽服務的優勢：

1) 速度快：相比系統webView的網頁加載速度有近30%的提升。
2) 省流量：雲端優化技術使流量節省20%
3) 更安全：24小時安全問題解決機制
4) 更穩定：經過億級用戶的使用考驗，CRASH率0.15%
5) 集成強大的視頻播放器，支持各種視頻格式直接打開
6) 適屏排版、字體設置等瀏覽增強功能的提供
7) Html5更完整支持。
8) 無系統內核的碎片化問題，更少的兼容性問題

那麼現在那些App具體接入了X5服務了呢？

可以發現已經有不少的牛擦的App接入了X5服務（當然主要是騰訊系的，原因你懂的），其相對於原生的webview的最大優勢是做了各種型號手機的適配工作，而且其也添加了不少有特色的小功能，對於使用webview開發App的同學而言，可以考慮一下集成X5服務哈。

總結：

• webview的有一定的性能問題，可以設置不同的緩存策略提高webview的加載速率

• webview與native可以通過cookie的方式實現信息交互

• webview下載文件，需要重寫自己的native的DownloadListener類，以及其回調方法

• 實現Native與H5端信息的交互既可以使用cookie的方式也可以通過java代碼與js代碼實現

• 原生的webview在不同手機上可能存在不同的表現，建議可以使用騰訊的X5瀏覽服務屏蔽的不同手機的差別，添加了不少特色的小功能

• 其他關於webview的問題集錦，可參考：Android WebView常見問題及解決方案彙總，總結的很全面哈

另外對產品研發技術，技巧，實踐方面感興趣的同學可以參考我的：
Android產品研發（一）–>實用開發規範
Android產品研發（二）–>啓動頁優化
Android產品研發（三）–>基類Activity
Android產品研發（四）–>減小Apk大小
Android產品研發（五）–>多渠道打包
Android產品研發（六）–>Apk混淆
Android產品研發（七）–>Apk熱修復
Android產品研發（八）–>App數據統計
Android產品研發（九）–>App網絡傳輸協議
Android產品研發（十）–>不使用靜態變量保存數據
Android產品研發（十一）–>應用內跳轉scheme協議
Android產品研發（十二）–>App長連接實現
Android產品研發（十三）–>App輪訓操作
Android產品研發（十四）–>App升級與更新
Android產品研發（十五）–>內存對象序列化
Android產品研發（十六）–>開發者選項
Android產品研發（十七）–>hybrid開發

---

本文以同步至github中：https://github.com/yipianfengye/AndroidProject，歡迎star和follow

---