手把手教你構(gòu)建 Android WebView 的緩存機(jī)制 &amp; 資源預(yù)加載方案

根據(jù)HTTP協(xié)議頭里的Cache-Control（或Expires）和Last-Modified（或Etag）等字段來(lái)控制文件緩存的機(jī)制

下面詳細(xì)介紹Cache-Control、Expires粉捻、Last-Modified&Etag四個(gè)字段

Cache-Control：用于控制文件在本地緩存有效時(shí)長(zhǎng)

如服務(wù)器回包：Cache-Control:max-age=600匈辱，則表示文件在本地應(yīng)該緩存，且有效時(shí)長(zhǎng)是600秒（從發(fā)出請(qǐng)求算起）杀迹。在接下來(lái)600秒內(nèi)亡脸，如果有請(qǐng)求這個(gè)資源押搪，瀏覽器不會(huì)發(fā)出 HTTP 請(qǐng)求，而是直接使用本地緩存的文件浅碾。

Expires：與Cache-Control功能相同大州，即控制緩存的有效時(shí)間

Expires是HTTP1.0標(biāo)準(zhǔn)中的字段，Cache-Control 是HTTP1.1標(biāo)準(zhǔn)中新加的字段

當(dāng)這兩個(gè)字段同時(shí)出現(xiàn)時(shí)垂谢，Cache-Control優(yōu)先級(jí)較高

Last-Modified：標(biāo)識(shí)文件在服務(wù)器上的最新更新時(shí)間

下次請(qǐng)求時(shí)厦画，如果文件緩存過(guò)期，瀏覽器通過(guò) If-Modified-Since 字段帶上這個(gè)時(shí)間滥朱，發(fā)送給服務(wù)器根暑，由服務(wù)器比較時(shí)間戳來(lái)判斷文件是否有修改。如果沒(méi)有修改徙邻，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存排嫌；如果有修改，則返回200缰犁，同時(shí)返回最新的文件淳地。

Etag：功能同Last-Modified，即標(biāo)識(shí)文件在服務(wù)器上的最新更新時(shí)間帅容。

不同的是颇象，Etag的取值是一個(gè)對(duì)文件進(jìn)行標(biāo)識(shí)的特征字串。

在向服務(wù)器查詢文件是否有更新時(shí)并徘，瀏覽器通過(guò)If-None-Match字段把特征字串發(fā)送給服務(wù)器遣钳，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來(lái)判斷文件是否有更新：沒(méi)有更新回包304麦乞，有更新回包200

Etag和Last-Modified可根據(jù)需求使用一個(gè)或兩個(gè)同時(shí)使用耍贾。兩個(gè)同時(shí)使用時(shí)，只要滿足基中一個(gè)條件路幸，就認(rèn)為文件沒(méi)有更新。

常見(jiàn)用法是：

Cache-Control與Last-Modified一起使用付翁；

Expires與Etag一起使用简肴；

即一個(gè)用于控制緩存有效時(shí)間，一個(gè)用于在緩存失效后百侧，向服務(wù)查詢是否有更新

特別注意：瀏覽器緩存機(jī)制是瀏覽器內(nèi)核的機(jī)制砰识，一般都是標(biāo)準(zhǔn)的實(shí)現(xiàn)

即Cache-Control、Last-Modified佣渴、Expires辫狼、Etag都是標(biāo)準(zhǔn)實(shí)現(xiàn)，你不需要操心

優(yōu)點(diǎn)：支持Http協(xié)議層

不足：緩存文件需要首次加載后才會(huì)產(chǎn)生辛润；瀏覽器緩存的存儲(chǔ)空間有限膨处，緩存有被清除的可能；緩存的文件沒(méi)有校驗(yàn)。

對(duì)于解決以上問(wèn)題真椿，可以參考手 Q 的離線包

靜態(tài)資源文件的存儲(chǔ)鹃答，如` JS、CSS`突硝、字體测摔、圖片等。

Android Webview會(huì)將緩存的文件記錄及文件內(nèi)容會(huì)存在當(dāng)前 app 的 data 目錄中解恰。

2. Application Cache 緩存機(jī)制

Android WebView內(nèi)置自動(dòng)實(shí)現(xiàn)锋八，即不需要設(shè)置即實(shí)現(xiàn)

Android4.4后的WebView瀏覽器版本內(nèi)核：Chrome

瀏覽器緩存機(jī)制是瀏覽器內(nèi)核的機(jī)制，一般都是標(biāo)準(zhǔn)的實(shí)現(xiàn)

以文件為單位進(jìn)行緩存护盈，且文件有一定更新機(jī)制（類(lèi)似于瀏覽器緩存機(jī)制）

AppCache原理有兩個(gè)關(guān)鍵點(diǎn)：manifest 屬性和 manifest 文件挟纱。

// HTML 在頭中通過(guò) manifest 屬性引用 manifest 文件

// manifest 文件：就是上面以 appcache 結(jié)尾的文件，是一個(gè)普通文件文件黄琼，列出了需要緩存的文件

// 瀏覽器在首次加載 HTML 文件時(shí)樊销，會(huì)解析 manifest 屬性，并讀取 manifest 文件脏款，獲取 Section：CACHE MANIFEST 下要緩存的文件列表围苫，再對(duì)文件緩存

...

// 原理說(shuō)明如下：

// AppCache 在首次加載生成后，也有更新機(jī)制撤师。被緩存的文件如果要更新剂府，需要更新 manifest 文件

// 因?yàn)闉g覽器在下次加載時(shí)，除了會(huì)默認(rèn)使用緩存外剃盾，還會(huì)在后臺(tái)檢查 manifest 文件有沒(méi)有修改（byte by byte)

發(fā)現(xiàn)有修改腺占，就會(huì)重新獲取 manifest 文件，對(duì) Section：CACHE MANIFEST 下文件列表檢查更新

// manifest 文件與緩存文件的檢查更新也遵守瀏覽器緩存機(jī)制

// 如用戶手動(dòng)清了 AppCache 緩存痒谴，下次加載時(shí)衰伯，瀏覽器會(huì)重新生成緩存，也可算是一種緩存的更新

// AppCache 的緩存文件积蔚，與瀏覽器的緩存文件分開(kāi)存儲(chǔ)的意鲸，因?yàn)?AppCache 在本地有 5MB（分 HOST）的空間限制

方便構(gòu)建Web App的緩存

專門(mén)為Web App離線使用而開(kāi)發(fā)的緩存機(jī)制

存儲(chǔ)靜態(tài)文件（如JS、CSS尽爆、字體文件）

應(yīng)用場(chǎng)景同瀏覽器緩存機(jī)制

但AppCache 是對(duì) 瀏覽器緩存機(jī)制的補(bǔ)充怎顾，不是替代。

? ? ? ? // 通過(guò)設(shè)置WebView的settings來(lái)實(shí)現(xiàn)

? ? ? ? WebSettings settings = getSettings();

? ? ? ? String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";

? ? ? ? settings.setAppCachePath(cacheDirPath);

? ? ? ? // 1. 設(shè)置緩存路徑

? ? ? ? settings.setAppCacheMaxSize(20*1024*1024);

? ? ? ? // 2. 設(shè)置緩存大小

? ? ? ? settings.setAppCacheEnabled(true);

? ? ? ? // 3. 開(kāi)啟Application Cache存儲(chǔ)機(jī)制

// 特別注意

// 每個(gè) Application 只調(diào)用一次 WebSettings.setAppCachePath() 和

WebSettings.setAppCacheMaxSize()

3. Dom Storage 緩存機(jī)制

通過(guò)存儲(chǔ)字符串的Key - Value對(duì)來(lái)提供

DOM Storage分為sessionStorage&localStorage漱贱；二者使用方法基本相同槐雾，區(qū)別在于作用范圍不同：

a.sessionStorage：具備臨時(shí)性，即存儲(chǔ)與頁(yè)面相關(guān)的數(shù)據(jù)幅狮，它在頁(yè)面關(guān)閉后無(wú)法使用

b.localStorage：具備持久性募强，即保存的數(shù)據(jù)在頁(yè)面關(guān)閉后也可以使用株灸。

存儲(chǔ)空間大（ 5MB）：存儲(chǔ)空間對(duì)于不同瀏覽器不同，如Cookies 才 4KB

存儲(chǔ)安全钻注、便捷：Dom Storage存儲(chǔ)的數(shù)據(jù)在本地蚂且，不需要經(jīng)常和服務(wù)器進(jìn)行交互

不像Cookies每次請(qǐng)求一次頁(yè)面，都會(huì)向服務(wù)器發(fā)送網(wǎng)絡(luò)請(qǐng)求

存儲(chǔ)臨時(shí)幅恋、簡(jiǎn)單的數(shù)據(jù)

代替?將不需要讓服務(wù)器知道的信息存儲(chǔ)到cookies的這種傳統(tǒng)方法

Dom Storage機(jī)制類(lèi)似于Android的SharedPreference機(jī)制

4. Web SQL Database 緩存機(jī)制

? ? ? ? // 通過(guò)設(shè)置 `WebView`的`Settings`類(lèi)實(shí)現(xiàn)

? ? ? ? WebSettings settings = getSettings();

? ? ? ? settings.setDomStorageEnabled(true);

? ? ? ? // 開(kāi)啟DOM storage

基于 `SQL` 的數(shù)據(jù)庫(kù)存儲(chǔ)機(jī)制

充分利用數(shù)據(jù)庫(kù)的優(yōu)勢(shì)杏死，可方便對(duì)數(shù)據(jù)進(jìn)行增加、刪除捆交、修改淑翼、查詢

存儲(chǔ)適合數(shù)據(jù)庫(kù)的結(jié)構(gòu)化數(shù)據(jù)

? ? ? ? // 通過(guò)設(shè)置WebView的settings實(shí)現(xiàn)

? ? ? ? WebSettings settings = getSettings();

? ? ? ? String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";

? ? ? ? settings.setDatabasePath(cacheDirPath);

? ? ? ? // 設(shè)置緩存路徑

? ? ? ? settings.setDatabaseEnabled(true);

? ? ? ? // 開(kāi)啟數(shù)據(jù)庫(kù)存儲(chǔ)機(jī)制

特別說(shuō)明

根據(jù)官方說(shuō)明，Web SQL Database存儲(chǔ)機(jī)制不再推薦使用（不再維護(hù)）

取而代之的是IndexedDB緩存機(jī)制品追，下面會(huì)詳細(xì)介紹

5. IndexedDB 緩存機(jī)制

屬于NoSQL數(shù)據(jù)庫(kù)玄括，通過(guò)存儲(chǔ)字符串的Key - Value對(duì)來(lái)提供

類(lèi)似于Dom Storage 存儲(chǔ)機(jī)制的key-value存儲(chǔ)方式

存儲(chǔ) 復(fù)雜、數(shù)據(jù)量大的結(jié)構(gòu)化數(shù)據(jù)

d. 具體實(shí)現(xiàn)：

// 通過(guò)設(shè)置WebView的settings實(shí)現(xiàn)

? ? ? ? WebSettings settings = getSettings();

? ? ? ? settings.setJavaScriptEnabled(true);

? ? ? ? // 只需設(shè)置支持JS就自動(dòng)打開(kāi)IndexedDB存儲(chǔ)機(jī)制

? ? ? ? // Android 在4.4開(kāi)始加入對(duì) IndexedDB 的支持肉瓦，只需打開(kāi)允許 JS 執(zhí)行的開(kāi)關(guān)就好了遭京。

6 . File System

為H5頁(yè)面的數(shù)據(jù) 提供一個(gè)虛擬的文件系統(tǒng)

可進(jìn)行文件（夾）的創(chuàng)建、讀泞莉、寫(xiě)哪雕、刪除、遍歷等操作鲫趁，就像Native App訪問(wèn)本地文件系統(tǒng)一樣

虛擬的文件系統(tǒng)是運(yùn)行在沙盒中

不同WebApp的虛擬文件系統(tǒng)是互相隔離的斯嚎，虛擬文件系統(tǒng)與本地文件系統(tǒng)也是互相隔離的。

虛擬文件系統(tǒng)提供了兩種類(lèi)型的存儲(chǔ)空間：臨時(shí) & 持久性：

臨時(shí)的存儲(chǔ)空間：由瀏覽器自動(dòng)分配挨厚，但可能被瀏覽器回收

持久性的存儲(chǔ)空間：需要顯式申請(qǐng)堡僻；自己管理（瀏覽器不會(huì)回收，也不會(huì)清除內(nèi)容）疫剃；存儲(chǔ)空間大小通過(guò)配額管理钉疫，首次申請(qǐng)時(shí)會(huì)一個(gè)初始的配額，配額用完需要再次申請(qǐng)巢价。

可存儲(chǔ)數(shù)據(jù)體積較大的二進(jìn)制數(shù)據(jù)

可預(yù)加載資源文件

可直接編輯文件