2.3.1 （下）WebView 文件下載、緩存、內(nèi)存泄露

前言：

本篇給大家介紹的是 WebView 下載文件的知識點，當我們在使用普通瀏覽器的時候，比如UC， 當我們點擊到一個可供下載鏈接的時候，就會進行下載。WebView 作為一個瀏覽器般的組件， 當然也是支持下載的，我們可以自己來寫下載的流程，設置下載后的文件名稱以及存儲位置，當然也可以調(diào)用其它內(nèi)置的瀏覽器來進行下載，比如Chrome、UC等，下面給大家演示下用法。

本節(jié)例程下載地址：WillFlowWebViewDowmload

一、WebView文件下載

（1）調(diào)用其它瀏覽器下載文件

這個很簡單，我們只需為 WebView 設置 setDownloadListener，然后重寫 DownloadListener 的 onDownloadStart，然后在里面寫個Intent，然后startActivity對應的Activity即可！

  • 關(guān)鍵代碼如下：
        mWebView.setDownloadListener(new DownloadListener(){
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition,
                                        String mimetype, long contentLength) {
                Log.i(TAG,"onDownloadStart");
                Log.i(TAG,"url : " + url);
                Log.i(TAG,"userAgent : " + userAgent);
                Uri uri = Uri.parse(url);
                Intent intent = new Intent(Intent.ACTION_VIEW,uri);
                startActivity(intent);
            }
        });

如果你手機內(nèi)存在多個瀏覽器的話，會打開一個對話框供你選擇其中一個瀏覽器進行下載。

（2）自己寫線程下載文件

當然，你可能不想把下載文件放到默認路徑下，或者想自己定義文件名等等，你都可以自己來寫 一個線程來下載文件，實現(xiàn)示例代碼如下：

  • DownLoadThread.java
/**
 * Created by   : WGH.
 */
public class DownLoadThread implements Runnable {
    private static final String TAG = DownLoadThread.class.getSimpleName();

    private String dUrl;

    public DownLoadThread(String dUrl) {
        this.dUrl = dUrl;
    }
    
    @Override
    public void run() {
        Log.i(TAG, "開始下載!");
        InputStream in = null;
        FileOutputStream fout = null;
        try {
            URL httpUrl = new URL(dUrl);
            HttpURLConnection conn = (HttpURLConnection) httpUrl.openConnection();
            conn.setDoInput(true);
            conn.setDoOutput(true);
            in = conn.getInputStream();
            File downloadFile, sdFile;
            if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
                Log.i(TAG,"SD卡可寫");
                downloadFile = Environment.getExternalStorageDirectory();
                sdFile = new File(downloadFile, "testDownload.apk");
                fout = new FileOutputStream(sdFile);
            }else{
                Log.e(TAG,"SD卡不存在或者不可讀寫!");
            }
            byte[] buffer = new byte[1024];
            int len;
            while ((len = in.read(buffer)) != -1) {
                assert fout != null;
                fout.write(buffer, 0, len);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (in != null) {
                try {
                    in.close();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
            if (fout != null) {
                try {
                    fout.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        Log.i(TAG, "下載完畢!");
    }
}
  • 然后MainActivity.java中創(chuàng)建并啟動該線程：
wView.setDownloadListener(new DownloadListener(){
    @Override
    public void onDownloadStart(String url, String userAgent, String contentDisposition, 
    String mimetype, long contentLength) {
            Log.e("HEHE","onDownloadStart被調(diào)用：下載鏈接：" + url);
            new Thread(new DownLoadThread(url)).start();
    }
});
  • 另外，別忘了寫SD卡的讀寫權(quán)限以及Internet訪問網(wǎng)絡的權(quán)限：
<uses-permission android:name="android.permission.INTERNET"/>
<!-- 在SDCard中創(chuàng)建與刪除文件權(quán)限 -->
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<!-- 往SDCard寫入數(shù)據(jù)權(quán)限 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

后續(xù)我們還會用Java實現(xiàn)多線程斷點續(xù)傳，用Kotlin實現(xiàn)異步下載文件等功能，保持關(guān)注就好！

二、WebView緩存問題

現(xiàn)在很多門戶類信息網(wǎng)站，比如虎嗅、鈦媒體等等的APP，簡單點說是信息閱讀類的APP，很多都是直接嵌套一個WebView用來顯示相關(guān)資訊的，這可能就涉及到了WebView的緩存了！
所謂的頁面緩存就是指：
保存加載一個網(wǎng)頁時所需的HTML，JS，CSS等頁面相關(guān)的數(shù)據(jù)以及其他資源，當沒網(wǎng)的時候或者網(wǎng)絡狀態(tài)較差的時候，我們會優(yōu)先加載本地保存好的相關(guān)數(shù)據(jù)，而這個相關(guān)數(shù)據(jù)就是之前在請求成功后保存好的數(shù)據(jù)！
實現(xiàn)這個緩存的方式有兩種：
一種是后臺寫一個下載的Service，將相關(guān)的數(shù)據(jù)按自己的需求下載到數(shù)據(jù)庫或者保存到相應文件夾中，然后下次加載對應URL前先判斷是否存在本地緩存，如果存在優(yōu)先加載本地緩存，不存在則執(zhí)行聯(lián)網(wǎng)請求，成功后再次緩存相關(guān)資源。典型的如舊版本的36Kr，在進去后會先離線文章，然后再顯示！

當然本篇要講解的不是這種自己寫邏輯的方式，而是通過WebView本身自帶的緩存功能來緩存頁面，這種方式很常用而且使用起來非常簡單，我們只需為WebView設置開啟相關(guān)功能，以及設置數(shù)據(jù)庫的緩存路徑即可完成緩存。

（1）緩存的分類

首先要說的是緩存的分類，我們緩存的數(shù)據(jù)分為：頁面緩存 和 數(shù)據(jù)緩存。

  • 頁面緩存：
    加載一個網(wǎng)頁時的html、JS、CSS等頁面或者資源數(shù)據(jù)，這些緩存資源是由于瀏覽器的行為而產(chǎn)生，開發(fā)者只能通過配置HTTP響應頭影響瀏覽器的行為才能間接地影響到這些緩存數(shù)據(jù)，而緩存的索引放在：/data/data/<包名>/databases，對應的文件放在：/data/data/package_name/cache/webviewCacheChromunm下。

  • 數(shù)據(jù)緩存：
    分為AppCache和DOM Storage兩種，我們開發(fā)者可以自行控制的就是這些緩存資源。

    • AppCache：
      我們能夠有選擇的緩沖web瀏覽器中所有的東西，從頁面、圖片到腳本、css等，尤其在涉及到應用于網(wǎng)站的多個頁面上的CSS和JavaScript文件的時候非常有用，其大小目前通常是5M。 在Android上需要手動開啟（setAppCacheEnabled），并設置路徑（setAppCachePath）和容量 （setAppCacheMaxSize），而Android中使用ApplicationCache.db來保存AppCache數(shù)據(jù)！
    • DOM Storage：
      存儲一些簡單的用key/value對即可解決的數(shù)據(jù)，根據(jù)作用范圍的不同，有Session Storage和Local Storage兩種，分別用于會話級別的存儲（頁面關(guān)閉即消失）和本地化存儲（除非主動刪除，否則數(shù)據(jù)永遠不會過期），在Android中可以手動開啟DOM Storage（setDomStorageEnabled），設置存儲路徑（setDatabasePath）Android中Webkit會為DOMStorage產(chǎn)生兩個文件：my_path/localstorage/xxx.localstorage和my_path/Databases.db

（2）緩存的模式

  • LOAD_CACHE_ONLY：不使用網(wǎng)絡，只讀取本地緩存數(shù)據(jù)
  • LOAD_DEFAULT：根據(jù)cache-control決定是否從網(wǎng)絡上取數(shù)據(jù)
  • LOAD_CACHE_NORMAL：API level 17中已經(jīng)廢棄，從API level 11開始作用同LOAD_DEFAULT模式
  • LOAD_NO_CACHE：不使用緩存，只從網(wǎng)絡獲取數(shù)據(jù)
  • LOAD_CACHE_ELSE_NETWORK：只要本地有，無論是否過期，或者no-cache，都使用緩存中的數(shù)據(jù)

總結(jié)：根據(jù)以上兩種模式，建議緩存策略為，判斷是否有網(wǎng)絡，有的話，使用LOAD_DEFAULT， 無網(wǎng)絡時，使用LOAD_CACHE_ELSE_NETWORK。

（3）為WebView開啟緩存功能

下面我們就來為WebView開啟緩存功能，先來看下實現(xiàn)的效果圖：


流程解析：
1.進入頁面后默認加載url，然后隨便點擊一個鏈接跳到第二個頁面，退出APP。
2.關(guān)閉wifi以及移動網(wǎng)絡，然后重新進入，發(fā)現(xiàn)無網(wǎng)絡的情況下，頁面還是加載了， 打開第一個鏈接也可以加載，打開其他鏈接就發(fā)現(xiàn)找不到網(wǎng)頁！
3.點擊清除緩存，把應用關(guān)閉，重新進入，發(fā)現(xiàn)頁面已經(jīng)打不開！

  • 接下來是代碼實現(xiàn)：MainActivity.java
public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();

    private WebView mWebView;
    private Button btn_clear_cache;
    private Button btn_refresh;
    private static final String APP_CACHE_DIRNAME = "/webviewcache";
    private static final String URL = "http://blog.csdn.net/comwill";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.mWebView);
        btn_clear_cache = (Button) findViewById(R.id.btn_clear_cache);
        btn_refresh = (Button) findViewById(R.id.btn_refresh);

        mWebView.loadUrl(URL);
        mWebView.setWebViewClient(new WebViewClient() {
            // 設置在webView點擊打開的新網(wǎng)頁在當前界面顯示,而不跳轉(zhuǎn)到新的瀏覽器中
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.i(TAG, "shouldOverrideUrlLoading url : " + url);
                view.loadUrl(url);
                return true;
            }
        });

        WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);
        // 設置緩存模式
        settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        // 開啟DOM storage API 功能
        settings.setDomStorageEnabled(true);
        // 開啟database storage API功能
        settings.setDatabaseEnabled(true);
        String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACHE_DIRNAME;
        Log.i(TAG, "cacheDirPath : " + cacheDirPath);
        // 設置數(shù)據(jù)庫緩存路徑
        settings.setAppCachePath(cacheDirPath);
        settings.setAppCacheEnabled(true);
        Log.i(TAG, "DatabasePath : " + settings.getDatabasePath());

        btn_clear_cache.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebView.clearCache(true);
            }
        });

        btn_refresh.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebView.reload();
            }
        });
    }

    // 重寫回退按鈕的點擊事件
    @Override
    public void onBackPressed() {
        if(mWebView.canGoBack()){
            mWebView.goBack();
        }else{
            super.onBackPressed();
        }
    }
}

代碼很簡單，我們做的僅僅是開啟緩存的功能，以及設置緩存模式以及緩存的數(shù)據(jù)的路徑。

（4）刪除WebView的緩存數(shù)據(jù)

上面的示例中，我們通過調(diào)用WebView的clearCache(true)方法，已經(jīng)實現(xiàn)了對緩存的刪除！除了這種方法外，還有這樣的方法：

setting.setCacheMode(WebSettings.LOAD_NO_CACHE);
deleteDatabase("WebView.db");和deleteDatabase("WebViewCache.db");
webView.clearHistory();
webView.clearFormData();
getCacheDir().delete();

這就是手動寫delete方法，然后循環(huán)迭代刪除緩存文件夾！

當然，正如前面所說，我們能直接操作的只是部分數(shù)據(jù)而已，而頁面緩存是由于瀏覽器的行為而產(chǎn)生的，我們只能通過配置HTTP響應頭影響瀏覽器的行為才能間接地影響到這些緩存數(shù)據(jù)，所以上述的方法僅僅是刪除的數(shù)據(jù)部分的緩存，這一點還請注意。

三、WebView處理網(wǎng)頁返回的錯誤碼信息

假如你們公司是做HTML5端的移動APP的，即通過WebView來顯示網(wǎng)頁。那么假如你訪問的網(wǎng)頁不存在或者其他錯誤，比如：404、401、403等錯誤的狀態(tài)碼，如果直接彈出WebView默認的錯誤提示頁面，可能顯得不那么友好，這時我們就可以通過重寫WebViewClient的onReceivedError()方法來實現(xiàn)我們想要的效果。

一般的做法有兩種：
一種是我們自己在assets目錄下創(chuàng)建一個用于顯示錯誤信息的HTML頁面，當發(fā)生錯誤即onReceivedError()被調(diào)用的時候我們調(diào)用webView的loadUrl跳到我們的錯誤頁面。
另外一種是單獨寫一個布局或者直接放一個大大的圖片，平時設置這個布局或者圖片為不可見，當頁面錯誤時，讓該布局或者圖片可見，下面我們來寫個簡單的示例。

（1）頁面錯誤，加載自定義網(wǎng)頁

mWebView.setWebViewClient(new WebViewClient() {
//設置在webView點擊打開的新網(wǎng)頁在當前界面顯示,而不跳轉(zhuǎn)到新的瀏覽器中
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url);
    return true;
}

@Override
public void onReceivedError(WebView view, int errorCode, String description,
    String failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        mWebView.loadUrl("file:///android_asset/error.html");
    }
});

（2）頁面錯誤，顯示相應的View

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private WebView mWebView;
    private ImageView img_error_back;
    private Button btn_refresh;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.wView);
        img_error_back = (ImageView) findViewById(R.id.img_error_back);
        btn_refresh = (Button) findViewById(R.id.btn_refresh);
        mWebView.loadUrl("http://www.baidu.com");
        mWebView.setWebViewClient(new WebViewClient() {
            // 設置在webView點擊打開的新網(wǎng)頁在當前界面顯示,而不跳轉(zhuǎn)到新的瀏覽器中
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
                mWebView.setVisibility(View.GONE);
                img_error_back.setVisibility(View.VISIBLE);
            }
        });
        btn_refresh.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        mWebView.loadUrl("http://www.baidu.com");
        img_error_back.setVisibility(View.GONE);
        mWebView.setVisibility(View.VISIBLE);
    }
}

接下來我么就可以編寫自己的代碼進行驗證啦！

四、WebView 如何避免內(nèi)存泄露？

（1）動態(tài)生成

要使用WebView不造成內(nèi)存泄漏，首先應該做的就是不能在xml中定義webview節(jié)點，而是在需要的時候動態(tài)生成，即：可以在使用WebView的地方放置一個LinearLayout類似ViewGroup的節(jié)點，然后在要使用WebView的時候動態(tài)生成：

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mWebView = new WebView(getApplicationContext());
        mWebView.setLayoutParams(params);
        mLayout.addView(mWebView);

（2）注意銷毀的次序

在調(diào)用 webview.destroy()的時候，必須確保webview已經(jīng)從view tree中被刪除，否則這個函數(shù)不會執(zhí)行的。如果是在xml中靜態(tài)定義的webview，只有在整個view退出后調(diào)用 webview.destroy( )才會被正確執(zhí)行，但整個view退出后又找不到webview了，這個是很矛盾的。所以正確的銷毀順序是：在 Activity 銷毀 WebView 的時候，先讓 WebView 加載null內(nèi)容，然后移除 WebView，再銷毀 WebView，最后置空。

@Override
    protected void onDestroy() {
        if (mWebView != null) {
            mWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
            mWebView.clearHistory();

            ((ViewGroup) mWebView.getParent()).removeView(mWebView);
            mWebView.destroy();
            mWebView = null;
        }
        super.onDestroy();
    }

通過以上方法即可消除大部分的內(nèi)存溢出問題，當然還有一種方法是給嵌套webview的activity另開一個進程，作為一個獨立進程展示，感興趣的同學可以自己嘗試下。

結(jié)語：

到此為止，我們學會了使用 WebView 進行文件下載的兩種方式：調(diào)用其它瀏覽器下載文件、自己寫線程下載文件；學會了使用WebView設置緩存和清除緩存；學會了WebView處理網(wǎng)頁返回的錯誤碼信息的兩種方式：頁面錯誤加載自定義網(wǎng)頁、頁面錯誤顯示相應的View。
我會在將來寫一篇來介紹 WebViewJavascriptBridge 以及如何使用 WebViewJavascriptBridge 進行Java和Js的交互。有志共同進步的同學請頭像右側(cè)點擊“（+）”保持對我的關(guān)注，后續(xù)好文第一時間推送給你。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容