摘要：的兼容性由于是現(xiàn)代的技術(shù)，以下的古老瀏覽器是不支持的。當(dāng)然也可以手動(dòng)指定文件這些瀏覽器都不能直接使用緩存，即可能會(huì)要求你重新驗(yàn)證，或者直接使用服務(wù)器文件。

親，如果你還在為你沒(méi)網(wǎng)打開(kāi)不網(wǎng)頁(yè)而煩惱嗎？
親，你還在為你web服務(wù)器復(fù)雜的配置項(xiàng)而蛋疼嗎？
不要998，manifest抱回家~
manifest自H5橫空出世以來(lái)給前端網(wǎng)頁(yè)的瀏覽帶來(lái)了翻天覆地的變化，以前我們的網(wǎng)頁(yè)必須在有網(wǎng)的前提下打開(kāi)(主要還是打開(kāi)HTML), 但是現(xiàn)在，我們可以offline 瀏覽。 可以算是實(shí)現(xiàn)web app的一個(gè)特技。
manifest的兼容性 IE9+. 由于是現(xiàn)代的技術(shù)，IE9以下的古老瀏覽器是不支持的。所以，manifest主要應(yīng)用是針對(duì)現(xiàn)代瀏覽器或者手機(jī)端更多一些。

瀏覽器檢測(cè)你是否使用manifest特技時(shí)，是檢測(cè)html標(biāo)簽.

當(dāng)解析你的HTML時(shí)，發(fā)現(xiàn)存在manifest文件時(shí)，則會(huì)進(jìn)行如下的操作:

(from alloy team)
manifest文件可以是任意后綴比如. usable.manifest||usable.mf等，但是他的MIMEtype必須設(shè)置正確.
記住，這個(gè)時(shí)候manifest會(huì)將HTML文件也一并保存，這需要注意。

一個(gè)簡(jiǎn)單的demo:

CACHE MANIFEST
#version 1.3
/public/static/index.css
/public/static/header.css
NETWORK:
*
FALLBACK:
/userInfo/ /404.html
#額外需要添加的緩存文件
CACHE:
images/logo1.png
images/logo2.png

基本樣式就是上述

第一行必須是指定頭即, "CACHE MANIFEST"(不能有其他的). 表示哪些文件需要緩存。如果是相對(duì)路徑則是，在manifest文件所在的目錄下。而且，不能使通配符!!!(tm 你是還不是傻). 所以一般而言只能一個(gè)一個(gè)配置.

CACHE MANIFEST
#相對(duì)于manifest文件所在的目錄
    ./index.css 

注釋: 注釋使用#+"info"
可以對(duì)緩存文件性質(zhì)進(jìn)行適當(dāng)?shù)恼f(shuō)明。緩存后的文件，就會(huì)被帶上Expires的頭，表示可以不經(jīng)過(guò)服務(wù)器驗(yàn)證直接使用本地文件。所以，返回status Code 為 200.
另外,CACHE 定義的文件內(nèi)容，和CACHE MANIFEST 是一個(gè)效果，只是跟在CACHE MANIFEST之后，就可以省略書(shū)寫(xiě)CACHE，你添加上也可以。

CACHE MANIFEST
#version 1.3
CACHE:
/favicon.ico

而且CACHE可以放在文中的任意位置，不過(guò)一般都是放開(kāi)頭，或者省略.

CACHE MANIFEST

# 緩存文件
index.html
css/style.css

NETWORK:
*

# 額外的需要緩存的文件
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

這里設(shè)置不使用緩存的文件，可以使用通配符"*"等。
* 表示，除了CACHE MANIFEST定義的文件之外的文件都不能被緩存。
當(dāng)然也可以手動(dòng)指定文件:

NETWORK
*
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah

這些瀏覽器都不能直接使用緩存，即,可能會(huì)要求你重新驗(yàn)證，或者直接使用服務(wù)器文件。

這個(gè)tag,可用可不用。 用來(lái)表示，指定文件無(wú)法加載時(shí)，使用另外的文件代替。參數(shù)有兩部分構(gòu)成，第一部分是指定資源(可能存在文件未加載),第二部分是替代資源

FALLBACK:
/index.html /404.html
/static/* /404.html
/images/* /NotFound.jpg

當(dāng)index.html無(wú)法加載時(shí)，使用404.html代替. 這里有個(gè)要求，兩個(gè)路徑必須使用相對(duì)路徑并且與清單文件同源。

這算是一個(gè)附加屬性吧。通常設(shè)置內(nèi)容就只有:

SETTINGS:
prefer-online

表示，在有網(wǎng)的情況下，會(huì)先訪問(wèn)服務(wù)器的文件，看有沒(méi)有更新，相當(dāng)于設(shè)置了Cache-Control:max-age=0,must-revalidate; + ETag||Last-modified. 不過(guò)，比較stupid的是，只有FF(Opera 12)支持.

而在服務(wù)器端，需要對(duì)manifest文件的MIME設(shè)置正確。這里以nginx為例, 具體設(shè)置一下MIME type

type{
  image/gif                             gif;  
  image/jpeg                            jpeg jpg;  
  application/x-javascript              js;  
  }

詳情可以參考: manifest文件配置

這里以gulp為例。 可以在npm里面很容易找到gulp-manifest這個(gè)生成插件.
直接下載:

npm install gulp-manifest --save-dev

然后在gulpfile里面配置:

gulp.task("manifest", function(){
  gulp.src(["build/**"], { base: "./" })
    .pipe(manifest({
      hash: true,
      preferOnline: true,
      network: ["*"],
      fallback:["/images/* /404.html"]
      filename: "app.manifest",
      exclude: "app.manifest"  //不保存manifest，不過(guò)有沒(méi)有效果一樣
     }))
    .pipe(gulp.dest("./"));
});

接著就會(huì)在目錄下生成app.manifest文件，里面就是一些基本的文件格式了。另外如果你想查看你電腦有多少網(wǎng)頁(yè)是manifest，可以直接訪問(wèn) chrome://appcache-internals/.

manifest對(duì)于單頁(yè)應(yīng)用可謂是如魚(yú)得水，但是，到了多頁(yè)應(yīng)用的層面，他的bug真的是暴露無(wú)遺。

1.頁(yè)面保存的復(fù)雜度，
2.文件的及時(shí)更新，
3.緩存文件的設(shè)置, 
4.死都會(huì)保存HTML,
5.文件下載出錯(cuò)，則這次更新緩存失敗,
6.覆蓋所有緩存頭，除了Cache-Control:no-store
7.在Android 4.4的webview里，關(guān)閉之后會(huì)丟失cache
8.IE10不能很好的支持FALLBACK部分.

所以，appCache的bug也是非常多的。
例如，長(zhǎng)尾更新問(wèn)題，當(dāng)你的頁(yè)面保持在線的時(shí)候，是無(wú)法檢測(cè)文件已經(jīng)更新，除非你reload頁(yè)面，但是用戶并不知道你已經(jīng)更新，所以這里我們需要引進(jìn)js的提供的緩存檢測(cè)API.

這是前端能夠摸到緩存最真實(shí)的API。我們可以通過(guò)這個(gè)API接口獲取到我們很多想要的東西:

var appcache = window.applicationCache;
console.log(appcache.status); //檢查當(dāng)前緩存狀態(tài)
console.log(appcache.IDLE); //緩存狀態(tài)常量，下面解釋

window.applicationCache.update()  
//update方法調(diào)用時(shí)，頁(yè)面會(huì)主動(dòng)與服務(wù)器通信，檢查頁(yè)面當(dāng)前的緩存是否為最新的，如不是，則下載更新后的資源

window.applicationCache.swapCache()  //updateready后，更新到最新的應(yīng)用緩存

通常結(jié)合上述兩個(gè)方法和相應(yīng)的屬性我們可以手動(dòng)觸發(fā)文件的更新(前提是 manifest文件改動(dòng)).

var appCache = window.applicationCache;

appCache.update(); 
//檢查更新

if (appCache.status == window.applicationCache.UPDATEREADY) { 
//如果存在更新，并且已經(jīng)下載ok,則替換瀏覽器緩存
  appCache.swapCache();  
}

但是，此時(shí)頁(yè)面并不能用上最新的文件，只是瀏覽器的緩存已經(jīng)改變，網(wǎng)頁(yè)實(shí)際內(nèi)容還是原來(lái)的內(nèi)容，還需要手動(dòng)進(jìn)行reload，才能進(jìn)行更新文件

window.addEventListener("load", function(e) {

  window.applicationCache.addEventListener("updateready", function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      if (confirm("文件有更新，手否重新加載文件")) {
        window.location.reload();
      }
    } else {
      //如果，拒絕則不刷新網(wǎng)頁(yè)
    }
  }, false);

}, false);

相關(guān)事件有: checking,downloading,updateready,obsolete,cached,error,noupdate,progress.
對(duì)照上述的status就可以很容易知道每個(gè)事件對(duì)應(yīng)的效果是神馬。 需要說(shuō)的就是:

progress: 當(dāng)瀏覽器在下載資源時(shí)，每下載成功一次，就會(huì)觸發(fā)一次
noupdate:當(dāng)瀏覽器檢查更新之后發(fā)現(xiàn)沒(méi)有資源更新的時(shí)候觸發(fā)這個(gè)事件
error: 更新出錯(cuò)時(shí)會(huì)觸發(fā)，比如文件無(wú)法正常下載，manifest文件被刪除.

其實(shí)，使用manifest的時(shí)候，無(wú)外乎就是3種常用狀態(tài)

第一次訪問(wèn)頁(yè)面時(shí)

再次訪問(wèn)頁(yè)面時(shí)，沒(méi)有更新

再次訪問(wèn)頁(yè)面時(shí)，有更新

每次，觸發(fā)的事件順序?yàn)?

上面看不懂沒(méi)關(guān)系，我們可以看看更直觀的Console的內(nèi)容。

第一次訪問(wèn)頁(yè)面時(shí)

checking->downloading->progress(多次)->cache

2. 再次訪問(wèn)頁(yè)面時(shí)，沒(méi)有更新

checking->noupdate

3. 再次訪問(wèn)頁(yè)面時(shí)，有更新

checking->downloading->progress(多次)->updateready

其實(shí)，manifest就是為了離線應(yīng)用而生的，但是由于設(shè)計(jì)之初，沒(méi)有很好的規(guī)范，導(dǎo)致現(xiàn)在manifest的bug，真的超級(jí)多。
看到whatwg上面說(shuō)的一句話，真的更加蛋疼.

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.

意思就是讓你不要用manifest，應(yīng)該他遲早要被fire的，但是，這一天還有很多年，很多年。 另外一個(gè)替代方案就是使用SS，但是兼容性，真的極其差。幾乎現(xiàn)在的瀏覽器都沒(méi)有實(shí)現(xiàn)(除了布道師FF實(shí)現(xiàn)了部分). 現(xiàn)在我們真的很尷尬，不過(guò)，目前的情況而言，in my opinion, 是十分推薦使用的(也沒(méi)有其他的辦法了). 那該怎么做，才能將manifest的Bug減到最低呢？
推薦的做法是將邏輯頁(yè)面和用戶數(shù)據(jù)給分離開(kāi)。 邏輯頁(yè)面使用app cache，而用戶數(shù)據(jù)可以保存在web Storage || indexDB 等瀏覽器數(shù)據(jù)庫(kù)里，動(dòng)態(tài)更新data時(shí)，使用web Socket,ajax,SSE等技術(shù).