本章我們要跟大家介紹用html5 如何做到application cache？簡要說明離線儲存技術。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
在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.css
NETWORK:
*
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.0
CACHE:
test.css
登入後複製
test.css
output { font: 2em sans-serif; }登入後複製
test.js
setTimeout(function () {
document.getElementById('test').value = new Date();
}, 1000);登入後複製
以上是html5 如何做到application cache？離線儲存技術的簡要說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！
