標籤：
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.1CACHE:js/app.jscss/app.cssNETWORK:*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伺服器，第一次訪問：
第二次訪問：
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。
本文地址 ：http://www.cnblogs.com/lovesong/p/5021992.html
HTML5離線緩衝（Application Cache）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
