HTML5離線緩存又名Application Cache，是從瀏覽器的緩存中分出來的一塊緩存區，要想在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
Manifest 文件
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分為三個部分：
CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
相關JavaScript API
核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：
0（UNCACHED） : 無緩存， 即沒有與頁面相關的應用緩存
1（IDLE） : 閑置，即應用緩存未得到更新
2 （CHECKING） : 檢查中，即正在下載描述文件並檢查更新
3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源
4 （UPDATEREADY） : 更新完成，所有資源都已下載完畢
5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存
相關的事件
表示應用緩存狀態的改變：
checking : 在瀏覽器為應用緩存查找更新時觸發
error : 在檢查更新或下載資源期間發送錯誤時觸發
noupdate : 在檢查描述文件發現文件無變化時觸發
downloading : 在開始下載應用緩存資源時觸發
progress：在文件下載應用緩存的過程中持續不斷地下載地觸發
updateready : 在頁面新的應用緩存下載完畢觸發
cached : 在應用緩存完整可用時觸發
瀏覽器支持
IE10+、Firefox3+、Safari4+、Opera10.6、Chrome、iOS3.2+、Android Webkit
注意事項
1. manifest文件需要配置正確的MIME-type，即 "text/cache-manifest"，必須在web服務器上進行配置。
例如Tomcat，需要修改web.xml文件，添加如下：
<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>
2. 更新完版本后，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況）。
所以頁面需要加上這js，監聽到版本更新后，刷新頁面：
applicationCache.addEventListener('updateready', function(e) {
if (applicationCache.status == applicationCache.UPDATEREADY) {
applicationCache.swapCache(); //使用新版本資源
window.location.reload(); //刷新頁面
}
}, false);
3. 瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）。
4. 瀏覽器會自動緩存引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。
5. 當一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源，其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問。
6. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存。
離線緩存優點
1. 減少服務器負載，提高資源加載速度
2. 離線瀏覽，用戶可在應用離線時使用
離線緩存缺點
1. 更新完版本后，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況）
2. 進入離線存儲的頁面，如果不更新版本，是會將其當成靜態頁面不請求。
3. 無法進行灰度發布等策略。
PS：灰度發布，一部分使用舊版，一部分人用新版。
4. 無法增量更新。
PS：少量代碼修改，全量更新。
離線緩存與傳統瀏覽器緩存區別
1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件
2. 離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行
3. 離線緩存可以主動通知瀏覽器更新資源
離線緩存示例
manifest
CACHE MANIFEST
#v1.0.1
CACHE:
js/app.js
css/app.css
NETWORK:
*
FALLBACK:
404.html
demo.html
<!DOCTYPE html> <html manifest="app.manifest"> <head> <title>Demo</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/app.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/demo.js"></script> </head> <script> applicationCache.addEventListener('updateready', function(e) { if (applicationCache.status == applicationCache.UPDATEREADY) { applicationCache.swapCache(); //使用新版本資源 window.location.reload(); //刷新頁面 } }, false); </script> <body> 俯首江左有梅郎~ </body> </html>
app.css
body {color: blue;}
demo.css
body {font-size: 60px;}
app.js
alert('我是app.js');
demo.js
alert('我是demo.js');
示例效果
本地直接打開沒有效果的，離線緩存是無效的。
部署在Web服務器，第一次訪問：
第二次訪問：
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。