HTML5的離線存儲

什麼是HTML5 的離線存儲？

HTML5提供了不少新的功能以及相應的接口，離線存儲就是其中的一個，離線存儲能夠將站點的一些文件存儲在本地，在沒有網絡的時候仍是能夠訪問到以緩存的對應的站點頁面，其中這些文件能夠包括html，js，css，img等等文件，但其實即便在有網絡的時候，瀏覽器也會優先使用已離線存儲的文件，返回一個200（from cache）頭。這跟HTTP的緩存使用策略是不一樣的。

怎麼使用HTML5的離線存儲？

首先，你得告訴瀏覽器你想要離線存儲哪些文件，那就須要有一個緩存文件清單，這跟文件是一個manifest後綴名的文件，注意，使用HTML5的離線存儲就必須有這個文件，並且必須在服務器端作修改，使得.manifest後綴名的文件的mime類型爲text/cache-manifest。典型的一個文件清單相似下面這個，必定是以CACHE MANIFEST開頭的：

CACHE: 指定你要瀏覽器進行離線存儲的文件列表，一個文件一行
NETWORK: 跟CACHE相反,指定瀏覽器必定要經過網絡訪問的文件列表
FALLBACK: 若是經過網絡訪問失敗了，就去訪問緊跟着的那個在本地緩存好的文件文件

指定上述文件，能夠用相對路徑，也能夠用絕對路徑，都是ok的。可是絕對路徑要加上http://

編輯好這個文件之後就在html文件中引入這個文件瀏覽器就能夠知道要緩存那些文件了。

HTML5的緩存更新策略：

HTML5的緩存更新策略是由manifest清單是否爲最新版原本決定的，因此瀏覽器首先會根據HTTP的緩存策略去探測manifest清單是否最新，若是最新（瀏覽器返回304），則不會去下載清單裏指定的緩存文件來更新離線存儲，若是不是最新的（瀏覽器返回200），則會根據最新的manifest清單去從新下載指定的一系列文件，而後更新離線存儲。這裏要注意，因爲判斷manifest清單是否最新是利用了HTTP的緩存策略的，因此可能出現你更改了manifest文件，可是離線存儲卻沒有更新的狀況，這多是由於你的服務器爲你的manifest清單文件設置了相應的緩存頭，manifest清單文件還未過時，這是瀏覽器並無真正向服務器發起請求確認manifest的新鮮度，而是直接使用了緩存的manifest文件，另一個須要注意的是，修改了一些文件之後想要讓離線存儲更新，就必須改動manifest清單文件。

HTML5中對應的離線存儲API：

支持H5離線存儲的瀏覽器中存在一個對象叫window.applicationCache,在瀏覽器處理離線存儲的期間，瀏覽器會觸發各類事件具體以下:

1. checking事件：一旦你的瀏覽器注意到元素含有manifest屬性，它將觸發一個checking 事件。(全部這兒列出的事件均在window.applicationCache對象上觸發。)checking事件老是被觸發的，無論你以前是否訪問過此頁面，或者任何其它指向同一緩存名單的頁面。

第一次訪問指定了manifest的頁面：

刷新頁面：

有一種狀況是沒有指定manifest屬性也會觸發checking事件，那就是噹噹前訪問頁面是從離線存儲中加載進來，以下圖：

　2. 若是你的瀏覽器未曾碰見過此緩存名單…
　　o 它將觸發一個downloading事件，而後開始下載此緩存名單中列出的資源。
　　o 在下載的同時，你的瀏覽器將會週期性的觸發progress事件，此事件包含了諸如多少文件已被下載，多少文件仍然處於下載隊列等信息。
o 當緩存名單中全部列出的資源被成功下載後，瀏覽器觸發最後的一個事件，cached。 這是你的離線網絡應用程序被完整緩存並以備離線使用的標誌。就這樣，你完工了。

1. 另外一方面，若是你以前訪問過此頁面或者其餘頁面指向了相同的緩存名單，那麼你的瀏覽器已經知道這個緩存名單。可能已經有一些資源在應用程序緩存中。可能所有工做的網絡應用程序已在應用程序緩存中。如今的問題是，你的瀏覽器上次檢測以後，緩存名單是否已經更改?
   o 若是答案是沒有，緩存名單沒有更改，你的瀏覽器將會當即觸發一個noupdate事件。就這樣，你完工了。

　　若是答案是有，緩存名單已有更改，你的瀏覽器將會觸發一個downloading事件，並開始從新下載緩存名單中列出的每一個資源。
　　在下載的同時，你的瀏覽器將會週期性的觸發progress事件，此事件包含了諸如多少文件已被下載，多少文件仍然處於下載隊列等信息。
o 當緩存名單中全部列出的資源被成功從新下載後，瀏覽器觸發最後的一個事件，updateready。這是你新版本的離線網絡應用程序被完整緩存並以備離線使用的標誌。新版本不會當即被使用。爲了即刻使用新版本而不強制用戶重載頁面，你能夠手動調用window.applicationCache.swapCache()函數。

更改manifest文件之後：

　　若是此過程當中的任何一點出現可怕的錯誤，你的瀏覽器將會觸發一個error事件，並當即終止。這是一個可能引起錯誤的完整且簡短的列表：
　　• 緩存名單返回一個HTTP404錯誤(頁面未找到)，或者410錯誤(永久消失)。
　　• 緩存名單被找到且沒有更改，但指向名單的HTML頁面沒有正確下載。
• 緩存名單被找到且被更改，但瀏覽器沒有下載某個緩存名單中列出的資源。

在manifest文件中的cache下增長一個不存在的文件後：

測試代碼以下：

b.html：

a.html:

test.manifest：

404.html：

支持列表

參考連接：
離線存儲checking事件觸發時間
html5離線應用application cache
讓咱們使用離線吧