H5遊戲微端開發（二）：緩存——引入第三方庫CacheWebView

寫在前面

上篇文章H5遊戲微端開發（一）：基礎工程——WebView的使用，主要是講解了WebView的基礎用法。

但是想要做得好，WebView的緩存和優化是一個問題。這篇文章主要是引入第三方庫CacheWebView來解決緩存問題。

CacheWebView通過攔截資源實現自定義緩存靜態資源。突破WebView緩存空間限制，讓緩存更簡單。讓網站離線也能正常訪問。

關於webview和H5緩存機制的原理，有興趣的可以先看完下面幾篇文章。

H5緩存機制淺析-移動端Web加載性能優化

Android：手把手教你構建全面的WebView緩存機制 & 資源加載方案

---

CacheWebView的使用

1、引入CacheWebView第三方庫

在build.gradle(Module: app)的dependencies中添加：

implementation 'ren.yale.android:cachewebviewlib:2.1.8'
implementation 'com.squareup.okhttp3:okhttp:3.10.0'

然後點擊同步工程按鈕，一般gradle文件修改都需要同步。

2、新建一個App類繼承Application，然後再onCreate方法中初始化：

public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        WebViewCacheInterceptorInst.getInstance().init(new WebViewCacheInterceptor.Builder(this));
    }
}

不要忘記在AndroidManifest.xml中定義App類

android:name=".App"

3、給WebView添加攔截

• 如果項目的minSdkVersion>=21

mWebView.setWebViewClient(new WebViewClient(){
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Nullable
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        return  WebViewCacheInterceptorInst.getInstance().interceptRequest(request);
    }

    @Nullable
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        return  WebViewCacheInterceptorInst.getInstance().interceptRequest(url);
    }
});

• 如果你的項目minSdkVersion<21

將調用mWebView.loadUrl(url)的地方替換爲：WebViewCacheInterceptorInst.getInstance().loadUrl(mWebView,url)。

mWebView.setWebViewClient(new WebViewClient(){
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        WebViewCacheInterceptorInst.getInstance().loadUrl(mWebView,request.getUrl().toString());
        return true;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        WebViewCacheInterceptorInst.getInstance().loadUrl(mWebView,url);
        return true;
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Nullable
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        return  WebViewCacheInterceptorInst.getInstance().interceptRequest(request);
    }

    @Nullable
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        return  WebViewCacheInterceptorInst.getInstance().interceptRequest(url);
    }
});

以上就配置完畢，其他代碼不用改，這樣擁有默認100M緩存空間。如果需要更詳細的配置，建議看看原工程（教程）：https://github.com/yale8848/CacheWebView

4、打包運行H5微端

• 第一次運行：
  

• 第二次運行：
  

• 遊戲有更新時：
  

---

Github工程地址：H5MicroClient。