摘要：原文聊一聊應(yīng)用緩存導(dǎo)讀是提供的一種應(yīng)用緩存機(jī)制基于它應(yīng)用可以實(shí)現(xiàn)離線訪問(wèn)為此瀏覽器還提供了應(yīng)用緩存的雖然的技術(shù)已被標(biāo)準(zhǔn)廢棄但這不影響我們嘗試去了解它也正是因?yàn)榈膽?yīng)用緩存機(jī)制如此誘人餓了么和郵箱等都還在使用著它描述對(duì)熟悉的同學(xué)可以跳過(guò)此

原文: 聊一聊H5應(yīng)用緩存-Manifest

Manifest 是 H5提供的一種應(yīng)用緩存機(jī)制, 基于它web應(yīng)用可以實(shí)現(xiàn)離線訪問(wèn)(offline cache). 為此, 瀏覽器還提供了應(yīng)用緩存的api--applicationCache. 雖然manifest的技術(shù)已被web標(biāo)準(zhǔn)廢棄, 但這不影響我們嘗試去了解它. 也正是因?yàn)閙anifest的應(yīng)用緩存機(jī)制如此誘人, 餓了么 和 office 365郵箱等都還在使用著它!

對(duì)manifest熟悉的同學(xué)可以跳過(guò)此節(jié).

鑒于manifest應(yīng)用緩存的技術(shù), 我們可以做到:

離線訪問(wèn): 即使服務(wù)器掛了, 或者沒(méi)有網(wǎng)絡(luò), 用戶依然可以正常瀏覽網(wǎng)頁(yè)內(nèi)容.

訪問(wèn)更快: 數(shù)據(jù)存在于本地, 省去了瀏覽器發(fā)起http請(qǐng)求的時(shí)間, 因此訪問(wèn)更快, 移動(dòng)端效果更為明顯.

降低負(fù)載: 瀏覽器只在manifest文件改動(dòng)時(shí)才去服務(wù)器下載需要緩存的資源, 大大降低了服務(wù)器負(fù)載.

manifest緩存的過(guò)程如下(來(lái)自網(wǎng)絡(luò)):

主流瀏覽器都支持manifest應(yīng)用緩存技術(shù). 如下表格:

H5標(biāo)準(zhǔn)中, Offline Web applications 部分有如下描述:

This feature is in the process of being removed from the Web platform. (This is a long process that takes many years.) Using any of the offline Web application features at this time is highly discouraged. Use service workers instead.?[SW]

因此后續(xù)我將在其他文章中繼續(xù)介紹 service workers, 本篇繼續(xù)關(guān)注manifest.

manifest使用緩存清單進(jìn)行管理, 緩存清單需要與html標(biāo)簽進(jìn)行關(guān)聯(lián). 如下:

  ...

在html標(biāo)簽中指定manifest文件, 便表示該網(wǎng)頁(yè)使用manifest進(jìn)行離線緩存. 該網(wǎng)頁(yè)內(nèi)需要緩存的文件列表需要在 test.appcache 文本文件中指定.

就像寫作文一樣, manifest采用經(jīng)典的三段式. 分別為: CACHE, NETWORK 和 FALLBACK. 如下, 先看一個(gè)栗子?:

CACHE MANIFEST
# v1.0.0
content.css

NETWORK:
app.js

FALLBACK:
/other 404.html

其中第一行必須以 CACHE MANIFEST 開(kāi)頭, 后可跟若干字符注釋, 注釋從#號(hào)開(kāi)始. 跟在 CACHE MANIFEST 行后的文件, 每行列出一個(gè), 這些文件是需要緩存的文件. 因此 content.css 會(huì)被緩存, 不需要訪問(wèn)網(wǎng)絡(luò).

第二段內(nèi)容以 NETWORK: 開(kāi)始, 跟在該行后的文件表示需要訪問(wèn)網(wǎng)絡(luò). 如: app.js 將直接從網(wǎng)絡(luò)上下載, 并不走manifest cache, 如果除了第一段中緩存的文件以外, 其他文件都從網(wǎng)絡(luò)上獲取, 那么此時(shí)可將 app.js 改為 * (通配符).

第三段內(nèi)容以 FALLBACK: 開(kāi)始, 跟在該行后的文件表示會(huì)有一個(gè)替代方案. 如: 當(dāng)訪問(wèn) /other 路徑時(shí), 如果訪問(wèn)失敗, 那么將自動(dòng)加載 404.html 作為替代.

每個(gè)manifest緩存都有一個(gè)狀態(tài), 標(biāo)示著緩存的情況. 一份緩存清單只有一個(gè)緩存狀態(tài), 即使它被多個(gè)頁(yè)面引用. 以下是各個(gè)緩存狀態(tài):

UNCACHED(未緩存): 表明應(yīng)用緩存對(duì)象還沒(méi)有初始化完成.

IDLE(空閑): 應(yīng)用緩存并未處于更新?tīng)顟B(tài).

CHECKING(檢查): 正在檢查是否存在更新.

DOWNLOADING(下載): 清單更新后, 重新下載全部資源到臨時(shí)緩存中.

UPDATEREADY(更新就緒): 新版本的緩存下載完成, 全部就緒, 隨即觸發(fā)事件 updateready.

OBSOLETE(廢棄): 應(yīng)用緩存已被廢棄.

上述緩存狀態(tài)常量依次取值0, 1, 2, 3, 4, 5.

applicationCache是操作應(yīng)用緩存的瑞士軍刀, 也是唯一的一把刀.

首先我們來(lái)獲取該對(duì)象.

//webview下
var cache = window.applicationCache;
//shared worker中
var cache = self.applicationCache;

以下是其屬性和方法介紹(大神請(qǐng)繞過(guò)):

status: 返回當(dāng)前頁(yè)面的應(yīng)用緩存的狀態(tài), 通常開(kāi)啟應(yīng)用緩存的頁(yè)面可能返回1, 其他頁(yè)面則返回0.

update(): 手動(dòng)觸發(fā)應(yīng)用緩存的更新.

(1) 若有更新, 則依次觸發(fā)①檢查事件(Checking event), ②下載事件(Downloading event), ③下載進(jìn)度事件(Progress event), ④更新完成事件(UpdateReady event);

(2) 若無(wú)更新, 則依次觸發(fā)①檢查事件(Checking event), ②無(wú)更新事件(NoUpdate event);

(3) 在未開(kāi)啟應(yīng)用緩存的頁(yè)面調(diào)用將拋出Uncaught DOMException 錯(cuò)誤.

update() 方法通常在長(zhǎng)時(shí)間不關(guān)閉的頁(yè)面使用, 比如說(shuō)郵箱應(yīng)用, 用于定期檢測(cè)可能的更新.

abort(): 取消應(yīng)用緩存的更新. 可用于節(jié)省有限的網(wǎng)絡(luò)帶寬.

swapCache(): 如果存在一個(gè)更新版本的應(yīng)用緩存, 那么它將切換過(guò)去, 否則將拋出 Uncaught DOMException 錯(cuò)誤. 通常, 我們會(huì)在updateready事件觸發(fā)之后手動(dòng)調(diào)用swapCache()方法, swapCache的切換只對(duì)后續(xù)加載的緩存文件有效, 已經(jīng)加載成功的資源并不會(huì)重新加載.

那么如何利用好上述api更新一個(gè)頁(yè)面的應(yīng)用緩存呢? 別急, Beginner"s Guide to Using the Application Cache 一文中提供了如下的樣板方法:

// Check if a new cache is available on page load.
window.addEventListener("load", function(e) {
  window.applicationCache.addEventListener("updateready", function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm("A new version of this site is available. Load it?")) {
        window.location.reload();
      }
    } else {
      // Manifest didn"t changed. Nothing new to server.
    }
  }, false);
}, false);

manifest的緩存和瀏覽器默認(rèn)的緩存是兩套機(jī)制, 相互獨(dú)立, 并且不受瀏覽器緩存大小限制(Chrome下測(cè)試結(jié)果).

各個(gè)manifest文件的緩存相互獨(dú)立, 各自在獨(dú)立的區(qū)域進(jìn)行緩存. 即使是緩存同一個(gè)文件, 也可能由于緩存的版本不一致, 而造成各個(gè)頁(yè)面資源不一致.

遵循全量緩存的規(guī)律. 即: manifest文件改動(dòng)后, 將重新緩存一遍所有的文件(包括html本身和動(dòng)態(tài)添加的需要緩存的文件,即使緩存列表中沒(méi)有該html). 第一次緩存過(guò)程中如果出現(xiàn)緩存失敗的文件, 那么, 第二訪問(wèn), 又將重新緩存一遍所有的文件. 以此類推.

manifest文件本身不能寫進(jìn)緩存清單, 否則連同html和資源在其緩存失效之前, 將永遠(yuǎn)不能獲得更新.

即使manifest文件丟失, 緩存依然有效. 不過(guò)從此以后, 引入該manifest的html, 將永遠(yuǎn)不能獲得更新.

通常, webview的緩存有如下三種現(xiàn)象:

普通網(wǎng)頁(yè)(無(wú)manifest文件), 不受manifest緩存影響, 緩存只走 http cache.

包含manifest文件的網(wǎng)頁(yè), 緩存文件只受manifest緩存影響(只有manifest文件改變時(shí)才會(huì)更新緩存資源), 緩存資源完全與 http cache 無(wú)關(guān), 但是 NETWORK 段落后需要訪問(wèn)網(wǎng)絡(luò)的文件, 將繼續(xù)走 http cache.

webview直接加載manifest緩存過(guò)的文件時(shí), 優(yōu)先加載第一個(gè)manifest緩存的該文件, 如果沒(méi)有找到manifest緩存, 那么它將自動(dòng)尋找 http cache 或者 在線加載.

通常只使用一個(gè)manifest文件, 并保證緩存的文件盡可能的少, 以減小manifest每次更新清單中文件所耗費(fèi)的時(shí)間和流量.

如果一定要使用兩個(gè)及以上manifest文件, 緩存文件請(qǐng)盡量不要相同.

如果以上兩條都不能保證, 那么, 請(qǐng)保證盡可能在manifest緩存的狀態(tài)更新時(shí), 主動(dòng)去刷新網(wǎng)頁(yè).(此時(shí)并不能保證不同網(wǎng)頁(yè)之間同一個(gè)緩存文件版本一致)

如果緩存的文件需要加參數(shù)運(yùn)行, 建議將參數(shù)內(nèi)容加到hash中, 如:cached-page.html#parameterName=value

manifest 的引入可以使用絕對(duì)路徑或者相對(duì)路徑, 如果你使用的是絕對(duì)路徑, 那么你的manifest文件必須和你的站點(diǎn)處于同一個(gè)域名下.

manifest文件你可以保存為任意的擴(kuò)展名, 但是響應(yīng)頭中以下字段須取以下定值, 以保證manifest文件正確被解析, 并且它沒(méi)有http緩存.

Content-Type: text/cache-manifest
Cache-Control: max-age=0
Expires: [CURRENT TIME]

更新manifest文件后, webview將自動(dòng)更新緩存.

js更新緩存(手動(dòng)觸發(fā)manifest更新):?window.applicationCache.update();

chrome瀏覽器下通過(guò)訪問(wèn)?chrome://appcache-internals/?可以查看緩存在本地的資源文件.

另外, 除了本文參考的一篇 MDN 的文章以及 HTML5 Rocks的 Beginner"s Guide to Using the Application Cache 一文, 還有如下三個(gè)鏈接可供您比較閱讀, 謝謝.

Cache manifest in HTML5?on Wikipedia

Offline Web Applications?W3C Working Group Note

Offline Web applications?at WHATWG

本問(wèn)就討論這么多內(nèi)容,大家有什么問(wèn)題或好的想法歡迎在下方參與留言和評(píng)論.

本文作者: louis

本文鏈接: http://louiszhai.github.io/20...

參考文章

Using the application cache | MDN