這篇文章給大家分享的是有關(guān)html5怎么做到application cache的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

10年積累的網(wǎng)站設(shè)計(jì)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有遷安免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

在HTML5之前，我們必須連接網(wǎng)絡(luò)才能訪問頁面。但隨著移動(dòng)互聯(lián)網(wǎng)的興起，設(shè)備終端的位置不在固定。而移動(dòng)設(shè)備非常依賴無線信號(hào)，可無線網(wǎng)絡(luò)的可靠性并不穩(wěn)定，比如在過隧道或是信號(hào)強(qiáng)度弱的地方，無法訪問網(wǎng)站，這無疑對用戶體驗(yàn)是不好的，所以HTML5中的離線緩存（applicationCache）就解決了這個(gè)問題。

一：什么是離線緩存
HTML5離線緩存又名applicationCache，為Html5新特性之一，簡單理解就是第一次加載后將數(shù)據(jù)緩存，在沒有清除緩存前提下，下一次沒有網(wǎng)絡(luò)也可以加載，用在靜態(tài)數(shù)據(jù)的網(wǎng)頁或游戲比較好用。當(dāng)然，Html5新的特性都不是所有瀏覽器都能支持的，離線緩存也一樣。反正IE9（包括）及IE9以下的瀏覽器目前是不支持的。如果用在移動(dòng)端，應(yīng)該都能支持。檢測是否支持離線緩存也是比較簡單的。

二：使用方法

HTML5離線緩存，是從瀏覽器的緩存中分出來的一塊緩存區(qū)，若要在這個(gè)緩存中保存數(shù)據(jù)，需要使用描述文件（.manifest），列出需要下載和緩存的資源。

1.引入manifest文件

2.引入完了之后，接下來就是test.mainfest文件代碼的編寫了。

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。

manifest 文件可分為三個(gè)部分：
   ①CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
   ②NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存
   ③FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）

完整的代碼

CACHE MANIFEST//必須以這個(gè)開頭
version 1.0 //最好定義版本，更新的時(shí)候只需修改版本號(hào)
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

manifest文件需要配置正確的MIME-type，即“text/cache-manifest”，這個(gè)是在web服務(wù)器上進(jìn)行配置。

解析一下：
   以#開頭的行表示的是注釋。CACHE下面的都是緩存的文件，NETWORK表示每次都從網(wǎng)絡(luò)請求，然后緩存，指定的文件總是從網(wǎng)絡(luò)上請求最新的。FALLBACK：指定的文件若是找不到，會(huì)被重定向到新的地址。規(guī)范都是大寫。

3.通過JS動(dòng)態(tài)控制更新

應(yīng)用在離線后將保持緩存狀態(tài)，除非發(fā)生以下某種情況：
用戶清除了瀏覽器對您網(wǎng)站的數(shù)據(jù)存儲(chǔ)。
清單文件經(jīng)過修改。

請注意：更新清單中列出的某個(gè)文件并不意味著瀏覽器會(huì)重新緩存該資源。清單文件本身必須進(jìn)行更改。

1）緩存狀態(tài)：window.applicationCache 對象是對瀏覽器的應(yīng)用緩存的編程訪問方式。其 status 屬性可用于查看緩存的當(dāng)前狀態(tài)。

applicationCache.status的值如下：
         0 === 未緩存
   　　1 === 空閑（緩存為最新狀態(tài)）
   　　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）主動(dòng)更新緩存：applicationCache.update()

要以編程方式更新緩存，請先調(diào)用 applicationCache.update()。此操作將嘗試更新用戶的緩存（前提是已更改清單文件）。最后，當(dāng)applicationCache.status 處于 UPDATEREADY 狀態(tài)時(shí)，調(diào)用 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.一個(gè)簡單的離線緩存的應(yīng)用

建一個(gè)web工程AppCache,包括四個(gè)文件：
appcache_offline.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);

感謝各位的閱讀！關(guān)于html5怎么做到application cache就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！