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

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

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

[[230943]]

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

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

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

HTML5引入了應用程序緩存，這意味著web應用可進行緩存，并可在沒有網絡時進行訪問。

應用程序緩存為應用帶來三個優勢：

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

速度--已經緩存的資源加載得更快。

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

原理和環境

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

解析清單

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

manifest 文件可分為三個部分：

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

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

FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）；

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

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

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

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

NETWORK

白名單，使用通配符”*”. 則會進入白名單的open狀態. 這種狀態下.所有不在相關Cache區域出現的url都默認使用HTTP相關緩存頭策略.

下面的 NETWORK 小節規定文件 “login.asp” 永遠不會被緩存，且離線時是不可用的：

NETWORK: login.asp 

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

NETWORK: * 
FALLBACK 

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

ALLBACK：/html5/ /404.html 

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

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

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

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