一、基本概念
離線緩存是HTML5新引入的技術，能夠讓你的Web應用程序指定哪些文件可以緩存在本地，使得你的網絡斷開時依然可以通過本地的緩存來進行訪問瀏覽。
二、使用方法
1. MIME type 聲明
首先，因為manifest文件必須是一個MIME type為text/cache-manifest類型的存在。文件后綴名可以自定義（建議為.appcache）所以我們需要現在服務端將.appcache后綴的文件類型聲明為text/cache-manifest。以apache為例，我們需要在httpd.conf中加上：
AddType text/cache-manifest .appcache
2. 在HTML文件中引入manifest文件
<!-- clock.html --> <!DOCTYPE html> <html manifest="clock.appcache">
其中manifest文件的后綴名必須為.appcache，並且和引入該manifest的頁面同源
3. manifest文件語法
CACHE MANIFEST
# 上面這行是必須的
# 這是一行注釋
# 在這個文件中的任何地方都可以添加
# 它們全部都會被忽略
# 在注釋之前可以有空格
# 但必須是在單行前
# 空行也會被忽略
# 這些列在最開始的文件都是需要被緩存的
# 或者是那些列在"CACHE:"里的， "CACHE"頭必須寫在這些文件之前，如同
# 下面寫好的那樣
images/sound-icon.png
images/background.png
# 注意，每個文件必須單獨一行
# 在線白名單中出現的這個文件，它不會被緩存，並且，
# 對該文件的引用，將繞過緩存，總是會
# 從網絡中獲取目標（或在用戶離線時，嘗試從網路上獲取）
NETWORK:
comm.cgi
# 這是另一塊要緩存的文件，這次只有一個css文件
CACHE:
style/default.css
我們也可以書寫成這樣：
CACHE MANIFEST
#version 1.0
CACHE:
style/default.css
images/sound-icon.png
images/background.png
NETWORK:
*
- CACHE MANIFEST：這個是必須的，並且一定要寫在manifest文件開頭
- CACHE：緩存清單列表，此處列出的為需要進行離線緩存的資源文件
- NETWORK: 白名單列表，需要與服務端進行交互獲取的資源文件，此處必須列出除緩存清單列表以外所有的資源地址（可以使用通配符*星號代替），否則沒有列出的資源文件將加載失敗
引入manifest的頁面，即使沒有被列入緩存清單中，仍然會被用戶代理緩存。並且無法通過白名單列表去除。
（緩存清單的文件列表可以使用絕對路徑或絕對URL地址）
開啟離線緩存后，我們可以在chrome中打開f12來看看資源加載有啥區別
可以看出，使用離線緩存后的資源，資源請求的狀態碼都變為200，並且在size欄中都被標明為(form cache)，加載速度也是顯而易見的。
4. 緩存如何更新？
資源被離線緩存后，無論我們在后端如何更改資源文件，客戶端都不會拉取到修改過的文件。
原來，只有當manifest文件被更新后（修改文件任何地方，包括注釋等），客戶端才會更新離線緩存文件，並且每次都會更新全部的緩存文件，包括沒有被修改的資源文件，但一般這些文件都會走304的緩存策略。
另外，在服務端修改manifest文件后，客戶端第一次訪問頁面需要再刷新一次才能獲取最新的資源。因為對於瀏覽器來說,manifest的加載是要晚於其他資源的. 這就導致check manifest的過程是滯后的。發現manifest改變，所有瀏覽器的實現都是緊隨這做靜默更新資源，以保證下次pv,應用到更新。（這一點很蛋疼，但還是有解決辦法，請繼續往下看）。
5. 離線緩存對象和事件處理
在javascript中我們可以通過window.applicationCache來訪問緩存對象，對象中包含了一個status屬性以及若干的待監聽的事件處理器。
其中status屬性代表的是當前離線應用的狀態，它可能的值為：
- UNCACHED (0)：未啟用離線應用
- IDLE (1)：已開啟離線應用，但本地緩存的資源是最新的，並且未標記為廢棄資源
- CHECKING (2)：當前更新緩存的狀態為“檢查中”
- DOWNLOADING (3)：當前更新緩存的狀態為“下載資源中”
- UPDATEREADY (4)：當前更新緩存的狀態為“更新完畢”
- OBSOLETE (5)：已開啟離線應用，但緩存資源都已標記為廢棄
離線緩存事件：
- checking：在第一次下載manifest文件時，或者檢查是否需要更新時觸發
- noupdate：manifest文件未修改，不需要下載新的緩存文件時觸發
- downloading：准備更新緩存之前，或者第一次下載資源之前觸發
- progress：下載資源時觸發，每下載一個資源都會觸發一次
- cached：頁面首次啟用離線緩存，並且離線緩存下載完畢時觸發
- updateready：資源更新完畢時觸發
- obsolete：加載manifest文件時遇到401或404錯誤時觸發
- errorEvent加載manifest文件時遇到401或404錯誤時觸發
這樣，我們就可以通過updateready事件來讓離線緩存更新后自動刷新頁面了，雖然還是比較挫：
applicationCache.addEventListener(‘updateready’, function(){ location.href=”test.html”; }, false);
6. 離線緩存的下線
要將離線緩存下線，我們只需要將服務端的manifest文件刪除即可，同時也要將HTML中的 manifest="manifest.appcache" 刪除（不刪也可以，會在console控制台報錯，但不會影響頁面訪問），刪除后用戶再第一次訪問還是原來的緩存頁面，還需要再刷新一次。。。蛋疼吧。