WebView緩存問題

本節引言：

現在很多門戶類資訊網站，比如虎嗅，ifanr，钛媒體等等的APP，簡單點說是資訊閱讀類的APP，很多 都是直接嵌套一個WebView用來顯示相關資訊的，這可能就涉及到了WebView的緩存了！

所謂的頁面緩存 就是指：儲存加載一個網頁時所需的HTML，JS，CSS等頁面相關的資料以及其他資源，當沒網的時候或者 網絡狀态較差的時候，加載本地儲存好的相關資料！而實作這個緩存的方式有兩種，一種是背景寫一個 下載下傳的Service，将文章相關的資料按自己的需求下載下傳到資料庫或者儲存到相應檔案夾中，然後下次加載 對應URL前先判斷是否存在本地緩存，如果存在優先加載本地緩存，不存在則執行聯網請求，同時緩存 相關資源，典型的如舊版本的36Kr，在進去後會先離線文章，然後再顯示！

當然，本節要講解的不是 這種自己寫邏輯的方式，而是通過WebView本身自帶的緩存功能來緩存頁面，這種方式使用起來非常 簡單，我們隻需為WebView設定開啟相關功能，以及設定資料庫的緩存路徑即可完成緩存！具體的 實作我們下面一一道來~

1.緩存的分類：

首先要說的一點是緩存的分類，我們緩存的資料分為：頁面緩存和資料緩存

• 頁面緩存：加載一個網頁時的html、JS、CSS等頁面或者資源資料，這些緩存資源是由于浏覽器 的行為而産生，開發者隻能通過配置HTTP響應頭影響浏覽器的行為才能間接地影響到這些緩存資料。 而緩存的索引放在：/data/data/<包名>/databases 對應的檔案放在：/data/data/package_name/cache/webviewCacheChromunm下
• 資料緩存：分為AppCache和DOM Storage兩種 我們開發者可以自行控制的就是這些緩存資源，
• AppCache：我們能夠有選擇的緩沖web浏覽器中所有的東西，從頁面、圖檔到腳本、css等等。 尤其在涉及到應用于網站的多個頁面上的CSS和JavaScript檔案的時候非常有用。其大小目前通常是5M。 在Android上需要手動開啟（setAppCacheEnabled），并設定路徑（setAppCachePath）和容量 （setAppCacheMaxSize），而Android中使用ApplicationCache.db來儲存AppCache資料！
• DOM Storage：存儲一些簡單的用key/value對即可解決的資料，根據作用範圍的不同，有Session Storage和Local Storage兩種，分别用于會話級别的存儲（頁面關閉即消失）和本地化存儲（除非主動 删除，否則資料永遠不會過期）在Android中可以手動開啟DOM Storage（setDomStorageEnabled）， 設定存儲路徑（setDatabasePath）Android中Webkit會為DOMStorage産生兩個檔案（my_path/localstorage/http_blog.csdn.net_0.localstorage和my_path/Databases.db）

好吧，看完上面，是不是想說一句，卧槽，什麼鬼，好複雜的樣子

 當然，不要去背，知道有這些東西就好了，實際開發用到再慢慢考究，而且我們一般隻關心如何 為WebView設定緩存以及如何删除緩存！ 我們可以看下我們下面寫的demo運作後的檔案結構，打開DDMS的File Explorer：

嘿嘿，一目了然是吧~，對了另外還要說下幾種緩存的模式：

• 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，都使用緩存中的資料。

總結：根據以上兩種模式，建議緩存政策為，判斷是否有網絡，有的話，使用LOAD_DEFAULT， 無網絡時，使用LOAD_CACHE_ELSE_NETWORK。

接下來堆碼時間！

2.為WebView開啟緩存功能

下面我們就來為WebView開啟緩存功能，先來看下實作的效果圖：

運作效果圖：

流程解析： 1.進入頁面後預設加載url，然後随便點選一個連結跳到第二個頁面，退出APP 2.關閉wifi以及移動網絡，然後重新進入，發現無網絡的情況下，頁面還是加載了， 打開第一個連結也可以加載，打開其他連結就發現找不到網頁！ 3.點選清除緩存，把應用關閉，重新進入，發現頁面已經打不開！

接下來是代碼實作：MainActivity.java:

public class MainActivity extends AppCompatActivity {

    private WebView wView;
    private Button btn_clear_cache;
    private Button btn_refresh;
    private static final String APP_CACHE_DIRNAME = "/webcache"; // web緩存目錄
    private static final String URL = "http://blog.csdn.net/coder_pig";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wView = (WebView) findViewById(R.id.wView);
        btn_clear_cache = (Button) findViewById(R.id.btn_clear_cache);
        btn_refresh = (Button) findViewById(R.id.btn_refresh);
        wView.loadUrl(URL);
        wView.setWebViewClient(new WebViewClient() {
            //設定在webView點選打開的新網頁在目前界面顯示,而不跳轉到新的浏覽器中
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        WebSettings settings = wView.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("cachePath", cacheDirPath);
        // 設定資料庫緩存路徑
        settings.setAppCachePath(cacheDirPath);
        settings.setAppCacheEnabled(true);
        Log.i("databasepath", settings.getDatabasePath());

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

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

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

代碼很簡單，我們做的僅僅是開啟緩存的功能，以及設定緩存模式以及緩存的資料的路徑而已！

3.删除WebView的緩存資料

上面的示例，我們通過調用WebView的clearCache(true)方法，已經實作了對緩存的删除！ 除了這種方法外，還有下述方法：

• setting.setCacheMode(WebSettings.LOAD_NO_CACHE);
• deleteDatabase("WebView.db");和deleteDatabase("WebViewCache.db");
• webView.clearHistory();
• webView.clearFormData();
• getCacheDir().delete();
• 手動寫delete方法，循環疊代删除緩存檔案夾！

當然，前面也說，我們能這直接操作的隻是資料部分，而頁面緩存是由于浏覽器 的行為而産生，我們隻能通過配置HTTP響應頭影響浏覽器的行為才能間接地影響到 這些緩存資料。是以上述的方法僅僅是删除的資料部分的緩存！

4.示例代碼下載下傳：

WebViewDemo7.zip：下載下傳 WebViewDemo7.zip

5.本節小結：

好的，本節關于WebView緩存問題就到這裡，這裡隻是寫了如何為WebView開啟緩存， 以及删除緩存，以後遇到再慢慢考究，這裡有個映像先~嗯，就說這麼多~謝謝