H5離線儲存 manifest

html5之前的網頁，都是無連線，必須聯網才能訪問，這其實也是web的特色，這其實對於pc是時代問題並不大，但到了移動網際網路時代，裝置終端位置不再固定，依賴無線訊號，網路的可靠性變得降低，比如坐在火車上，過了乙個隧道（15分鐘），便無法訪問**，這對於web的傷害是很大的。

html5便引入了cache manifest 檔案。那麼什麼是cache manifest呢，接下來會講到。

首先manifest是乙個字尾名為minifest的檔案，在檔案中定義那些需要快取的檔案，支援manifest的瀏覽器，會將按照manifest檔案的規則，像檔案儲存在本地，從而在沒有網路鏈結的情況下，也能訪問頁面。

所有主流瀏覽器均支援應用程式快取，ie需要10+版本

html新增了乙個manifest屬性，可以用來指定當前頁面的manifest檔案。

建立乙個和html同名的manifest檔案，比如頁面為index.html，那麼可以建乙個index.manifest的檔案，然後給index.html的html標籤新增如下屬性即可：

接下來詳細說說manifest的細節，乙個典型的manifest檔案**結構像下面這樣：

cache manifest

#version 1.3cache:

test.css

network:

manifest檔案，基本格式為三段： cache， network，與 fallback，其中network和fallback為可選項。

而第一行cache manifest為固定格式，必須寫在前面。

以#號開頭的是注釋，一般會在第二行寫個版本號，用來在快取的檔案更新時，更改manifest的作用，可以是版本號，時間戳或者md5碼等等。

標識出哪些檔案需要快取，可以是相對路徑也可以是絕對路徑。

這一部分是要繞過快取直接讀取的檔案，可以使用萬用字元＊。

下面的** 「login.asp」永遠不會被快取，且離線時是不可用的：

network:

可以使用星號來指示所有其他資源/檔案都需要網際網路連線：

network:

指定了乙個後備頁面，當資源無法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 uri—第乙個表示資源，第二個表示後備頁面。兩個 uri 都必須使用相對路徑並且與清單檔案同源。可以使用萬用字元。

下面的例子中，如果無法建立網際網路連線，則用「404.html」替代 /html5/ 目錄中的所有檔案。

fallback:

/html5/ /404.html

下面的例子中，則用「404.html」替代所有檔案。

fallback:

*.html /404.html

如下三種方式，可以更新快取：

html5中引入了js操作離線快取的方法，下面的js可以手動更新本地快取。