有個精通硬體，後臺，前端的大神朋友最近要做一個Web APP，於是便來求助於我，讓我受寵若驚啊。不過，倒也趁此機會惡補了一下關於WebView的那些知識。恩……今天先來說下快取模式~

開始

影響頁面載入速度的因素有非常多，在對 WebView 載入網頁的過程進行除錯可以發現，每次載入的過程中都會有較多的網路請求，除了 web 頁面自身的 URL 請求，還會有 web 頁面外部引用的JS、CSS、字型、圖片等等都是個獨立的 http 請求。這些請求都是序列的，這些請求加上瀏覽器的解析、渲染時間就會導致 WebView 整體載入時間變長，消耗的流量也對應的真多。所以選擇合適的 WebView 快取很重要

選擇合適的 WebView 快取

WebView 快取看似就是開啟幾個開關的問題，但是要弄懂這幾種快取機制還是很有深度。下圖是騰訊某工程師總結六種 H5 常用的快取機制的優勢及適用場景。

瀏覽器快取機制：

主要前端負責，Android 端不需要進行特別的配置。

Dom Storage（Web Storage）儲存機制：

配合前端使用，使用時需要開啟 DomStorage 開關。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setDomStorageEnabled(true);

Web SQL Database 儲存機制：

雖然已經不推薦使用了，但是為了相容性，還是提供下 Android 端使用的方法

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setDatabaseEnabled(true);
final String dbPath = getApplicationContext().getDir("db",Context.MODE_PRIVATE).getPath();
webSettings.setDatabasePath(dbPath)

Application Cache 儲存機制

Application Cache（簡稱 AppCache)似乎是為支援 Web App 離線使用而開發的快取機制。它的快取機制類似於瀏覽器的快取（Cache-Control 和 Last-Modified）機制，都是以檔案為單位進行快取，且檔案有一定更新機制。但 AppCache 是對瀏覽器快取機制的補充，不是替代。
不過根據官方文件，AppCache 已經不推薦使用了，標準也不會再支援。現在主流的瀏覽器都是還支援 AppCache的，以後就不太確定了。同樣給出 Android 端啟用 AppCache 的程式碼。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setAppCacheEnabled(true);
final String cachePath = getApplicationContext().getDir("cache",Context.MODE_PRIVATE).getPath();
webSettings.setAppCachePath(cachePath);
webSettings.setAppCacheMaxSize(5*1024*1024);

Indexed Database 儲存機制

IndexedDB 也是一種資料庫的儲存機制，但不同於已經不再支援的 Web SQL Database。IndexedDB 不是傳統的關聯式資料庫，可歸為 NoSQL 資料庫。IndexedDB 又類似於 Dom Storage 的 key-value 的儲存方式，但功能更強大，且儲存空間更大。
Android 在4.4開始加入對 IndexedDB 的支援，只需開啟允許 JS 執行的開關就好了。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

File System API

File System API 是 H5 新加入的儲存機制。它為 Web App 提供了一個虛擬的檔案系統，就像 Native App 訪問本地檔案系統一樣。由於安全性的考慮，這個虛擬檔案系統有一定的限制。Web App 在虛擬的檔案系統中，可以進行檔案（夾）的建立、讀、寫、刪除、遍歷等操作。很可惜到目前，Android 系統的 WebView 還不支援 File System API。