淺談如何實現HTML5的離線存儲

關於HTML5離線存儲原理及實現，筆者找到一篇介紹離線緩存的，感受比以前看到的解釋的更透徹，新的知識點記錄以下：
你們都知道Web App是經過瀏覽器來訪問的，因此離線狀態下是沒法使用app的。其中web app中的一些資源並不常常改變，不須要每次都向服務器發送請求。這時應運而生的離線緩存就顯得尤其突出。經過把須要離線緩存儲的文件列在一個manifest配置文件中。這樣在離線狀況下也可使用app。
離線存儲的manifest通常由三個部分組成:
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」 永遠不會被緩存，且離線時是不可用的：
1 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文件發生改變時，資源請求自己也會觸發更新。