在HTML5之前，我們必須串連網路才能訪問頁面。但隨著移動互連網的興起，裝置終端的位置不在固定。而行動裝置非常依賴無線訊號，可無線網路的可靠性並不穩定，比如在過隧道或是訊號強度弱的地方，無法訪問網站，這無疑對使用者體驗是不好的，所以HTML5中的離線緩衝（applicationCache）就解決了這個問題。
一：什麼是離線緩衝
HTML5離線緩衝又名applicationCache，為Html5新特性之一，簡單理解就是第一次載入後將資料緩衝，在沒有清除緩衝前提下，下一次沒有網路也可以載入，用在待用資料的網頁或遊戲比較好用。當然，Html5新的特性都不是所有瀏覽器都能支援的，離線緩衝也一樣。反正IE9（包括）及IE9以下的瀏覽器目前是不支援的。如果用在移動端，應該都能支援。檢測是否支援離線緩衝也是比較簡單的。
<script> if(window.applicationCache){ alert("支援離線緩衝"); } else{ alert("不支援離線緩衝"); }</script>
二：使用方法
HTML5離線緩衝，是從瀏覽器的緩衝中分出來的一塊緩衝區，若要在這個緩衝中儲存資料，需要使用描述檔案（.manifest），列出需要下載和緩衝的資源。
1.引入manifest檔案
<!DOCTYPE html><html><head><!--就是在這裡引入，注意引入也是講究路勁跟檔案名稱的， 這裡檔案名稱是test，尾碼是mainfest，路勁在當前的html下面 （一般放在html當前檔案夾下面也沒什麼問題，我是這麼放的）--><html manifest="test.manifest"><meta charset="UTF-8"><title>html5 離線緩衝</title></head><body></body></html>
2.引入完了之後，接下來就是test.mainfest檔案代碼的編寫了。
manifest 檔案是簡單的文字檔，它告知瀏覽器被緩衝的內容（以及不緩衝的內容）。
manifest 檔案可分為三個部分：
①CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行緩衝
②NETWORK - 在此標題下列出的檔案需要與伺服器的串連，且不會被緩衝
③FALLBACK - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（比如 404 頁面）
完整的代碼
CACHE MANIFEST//必須以這個開頭version 1.0 //最好定義版本，更新的時候只需修改版本號碼CACHE: m.png test.js test.cssNETWORK: *FALLBACK online.html offline.html
manifest檔案需要配置正確的MIME-type，即“text/cache-manifest”，這個是在web伺服器上進行配置。
解析一下：
以#開頭的行表示的是注釋。CACHE下面的都是緩衝的檔案，NETWORK表示每次都從網路請求，然後緩衝，指定的檔案總是從網路上請求最新的。FALLBACK：指定的檔案若是找不到，會被重新導向到新的地址。規範都是大寫。
3.通過JS動態控制更新
應用在離線後將保持緩衝狀態，除非發生以下某種情況：
使用者清除了瀏覽器對您網站的資料存放區。
資訊清單檔經過修改。
請注意：更新清單中列出的某個檔案並不意味著瀏覽器會重新緩衝該資源。資訊清單檔本身必須變更。
1）緩衝狀態：window.applicationCache 對象是對瀏覽器的應用緩衝的編程訪問方式。其 status 屬性可用於查看緩衝的目前狀態。
applicationCache.status的值如下：
0 === 未緩衝
1 === 空閑（緩衝為最新狀態）
2 === 檢查中
3 === 下載中
4 === 更新就緒
5 === 緩衝到期
var appCache = window.applicationCache; switch (appCache.status) { case appCache.UNCACHED: // UNCACHED == 0 return 'UNCACHED'; break; case appCache.IDLE: // IDLE == 1 return 'IDLE'; break; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appCache.UPDATEREADY: // UPDATEREADY == 4 return 'UPDATEREADY'; break; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; };
2）主動更新緩衝：applicationCache.update()
<script> //利用定時器隔一定時間自動更新一下緩衝 setInterval(function(){ applicationCache.update(); },50000);</script>
要以編程方式更新緩衝，請先調用 applicationCache.update()。此操作將嘗試更新使用者的緩衝（前提是已更改資訊清單檔）。最後，當applicationCache.status 處於 UPDATEREADY 狀態時，調用 applicationCache.swapCache() 即可將原緩衝換成新緩衝。
var appCache = window.applicationCache;appCache.update(); // Attempt to update the user's cache....if (appCache.status == window.applicationCache.UPDATEREADY) {appCache.swapCache(); // The fetch was successful, swap in the new cache.
4.一個簡單的離線緩衝的應用
建一個web工程AppCache,包括四個檔案：
appcache_offline.html
<html manifest="test.manifest"><head><title>AppCache Test</title><link rel="stylesheet" href="test.css"><script src="test.js"></script></head><body><p><output id="test"></output></p><div id="log"></div></body></html>
manifest檔案：test.manifest
CACHE MANIFEST#VERSION 1.0CACHE:test.css
test.css
output { font: 2em sans-serif; }
test.js
setTimeout(function () {document.getElementById('test').value = new Date();}, 1000);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
