溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關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.htmlmanifest文件需要配置正確的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就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
