關(guān)于HTML5離線存儲原理及實現(xiàn)，筆者找到一篇介紹離線緩存的，感覺比之前看到的解釋的更透徹，新的知識點記錄如下：

大家都知道Web App是通過瀏覽器來訪問的，所以離線狀態(tài)下是無法使用app的。其中web app中的一些資源并不經(jīng)常改變，不需要每次都向服務(wù)器發(fā)送請求。這時應(yīng)運而生的離線緩存就顯得尤為突出。通過把需要離線緩存儲的文件列在一個manifest配置文件中。這樣在離線情況下也可以使用app。

離線存儲的manifest一般由三個部分組成:

[[230943]]

1.CACHE:表示需要離線存儲的資源列表，由于包含manifest文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出來。

2.NETWORK:表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。尚學(xué)堂?百戰(zhàn)程序員陳老師指出，如果在CACHE和NETWORK中有一個相同的資源，那么這個資源還是會被離線存儲，也就是說CACHE的優(yōu)先級更高。

3.FALLBACK:表示如果訪問***個資源失敗，那么就使用第二個資源來替換他，比如上面這個文件表示的就是如果訪問根目錄下任何一個資源失敗了，那么就去訪問offline.html。使用HTML5，通過創(chuàng)建cache manifest文件，可輕松創(chuàng)建web應(yīng)用的離線版本。

HTML5引入了應(yīng)用程序緩存，這意味著web應(yīng)用可進行緩存，并可在沒有網(wǎng)絡(luò)時進行訪問。

應(yīng)用程序緩存為應(yīng)用帶來三個優(yōu)勢：

離線瀏覽--用戶可在離線時使用它們。

速度--已經(jīng)緩存的資源加載得更快。

減少服務(wù)器負(fù)載--瀏覽器將只從服務(wù)器下載更改過的資源。

原理和環(huán)境

如上面提到的HTML5的離線存儲是基于一個新建的.appcache文件的，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。就像cookie一樣，html5的離線存儲也需要服務(wù)器環(huán)境。這里提供一個小工具——簡易iis服務(wù)器，把它放在項目更目錄下，雙擊運行即可模擬服務(wù)器環(huán)境。

解析清單

在開始之前要先了解下manifest（即.appcache文件），上面的解析清單要怎么寫。manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。

manifest 文件可分為三個部分：

CACHE MANIFEST - 在此標(biāo)題下列出的文件將在***下載后進行緩存；

NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會被緩存；

FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面（比如 404 頁面）；

在線的情況下,用戶代理每次訪問頁面，都會去讀一次manifest.如果發(fā)現(xiàn)其改變, 則重新加載全部清單中的資源。

***行，CACHE MANIFEST，是必需的：

1 CACHE MANIFEST / theme.css /logo.gif / main.js

上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當(dāng) manifest 文件加載后，瀏覽器會從網(wǎng)站的根目錄下載這三個文件。然后，無論用戶何時與因特網(wǎng)斷開連接，這些資源依然是可用的。

NETWORK

白名單，使用通配符”*”. 則會進入白名單的open狀態(tài). 這種狀態(tài)下.所有不在相關(guān)Cache區(qū)域出現(xiàn)的url都默認(rèn)使用HTTP相關(guān)緩存頭策略.

下面的 NETWORK 小節(jié)規(guī)定文件 “login.asp” 永遠(yuǎn)不會被緩存，且離線時是不可用的：

NETWORK: login.asp 

可以使用*來指示所有其他資源/文件都需要因特網(wǎng)連接：

NETWORK: * 
FALLBACK 

下面的 FALLBACK 小節(jié)規(guī)定如果無法建立因特網(wǎng)連接，則用 “offline.html” 替代 /html5/ 目錄中的所有文件：

ALLBACK：/html5/ /404.html 

注釋：***個 URI 是資源，第二個是替補。

對于瀏覽器來說,manifest的加載是要晚于其他資源的. 這就導(dǎo)致check manifest的過程是滯后的.發(fā)現(xiàn)manifest改變.所有瀏覽器的實現(xiàn)都是緊隨這做靜默更新資源.以保證下次pv,應(yīng)用到更新.我們的產(chǎn)品已經(jīng)更新了用戶卻要第二次進來才能夠看到，這樣用戶體驗也太差了吧，有什么方式能夠解決呢？好在html5給javascript提供了相關(guān)的API。

站點離線存儲的容量限制是5M，如果manifest文件，或者內(nèi)部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續(xù)全部使用老的緩存，引用manifest的html必須與manifest文件同源，在同一個域下，在manifest中使用的相對路徑，相對參照物為manifest文件，CACHE MANIFEST字符串應(yīng)在***行，且必不可少，系統(tǒng)會自動緩存引用清單文件的 HTML 文件。manifest文件中CACHE則與NETWORK，F(xiàn)ALLBACK的位置順序沒有關(guān)系，如果是隱式聲明需要在最前面。

FALLBACK中的資源必須和manifest文件同源，當(dāng)一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。站點中的其他頁面即使沒有設(shè)置manifest屬性，請求的資源如果在緩存中也從緩存中訪問，當(dāng)manifest文件發(fā)生改變時，資源請求本身也會觸發(fā)更新。