html5怎么做到applicationcache

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

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

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

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

<script>
    if(window.applicationCache){
        alert("支持離線緩存");
    }
    else{
        alert("不支持離線緩存");
    }
</script>

二：使用方法

HTML5離線緩存，是從瀏覽器的緩存中分出來的一塊緩存區(qū)，若要在這個緩存中保存數(shù)據(jù)，需要使用描述文件（.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 文件是簡單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。

manifest 文件可分為三個部分：
①CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
②NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
③FALLBACK - 在此標題下列出的文件規(guī)定當頁面無法訪問時的回退頁面（比如 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表示每次都從網(wǎng)絡請求，然后緩存，指定的文件總是從網(wǎng)絡上請求最新的。FALLBACK：指定的文件若是找不到，會被重定向到新的地址。規(guī)范都是大寫。

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

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

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

1）緩存狀態(tài)：window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用于查看緩存的當前狀態(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）主動更新緩存：applicationCache.update()

<script>    //利用定時器隔一定時間自動更新一下緩存
    setInterval(function(){
            applicationCache.update();
    },50000);</script>

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

建一個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就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站題目：html5怎么做到applicationcache
文章來源：http://jinyejixie.com/article12/pocpdc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、響應式網(wǎng)站、App設計、虛擬主機、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

html5怎么做到applicationcache