HTML5 applicationCache 對象
applicationCache對象代表本地緩存,可以用它來通知用戶本地緩存已經(jīng)被更新,也允許用戶手工更新本地緩存。在瀏覽器與服務(wù)器的交互過程中,當(dāng)瀏覽器對本地緩存進行更新并加入新的資源文件時,會觸發(fā)applicationCache對象的updateready事件,通知本地緩存已經(jīng)被更新??梢岳迷撌录嬖V用戶本地緩存已經(jīng)被更新,用戶需要手工刷新頁面來得到最新版本的應(yīng)用程序,代碼如下:
applicationCache.addEventListener("updateready", function(event) {
// 本地緩存已鉍寅新,通知用戶。
alert("本地緩存已被更新,可以刷新頁面來得到本程序的最新版本。");
},false);
另外,可以通過applicationCache對象的swapCache()方法,來控制如何進行本地緩存的更新及更新的時機,代碼如下:
swapCache()方法
該方法用來手工執(zhí)行本地緩存的更新,它只能在applicationCache對象的updateReady事件被觸發(fā)時調(diào)用。updateReady事件只有在服務(wù)器上的manifest文件被更新,并且把manifest文件中所要求的資源文件下載到本地后觸發(fā)。該事件的含義是“本地緩存準備被更新”。當(dāng)這個事件被觸發(fā)后,可以用swapCacheO方法來手工進行本地緩存的更新。
如果本地緩存的容量非常大,本地緩存的更新工作將需要相對較長的時間,而且會把瀏覽器鎖住。這時最好有個提示,告訴用戶正在進行本地緩存的更新,代碼如下:
applicationCache.addEventliistener("updateready", function(event) {
// 本地緩存已被更新,通知用戶。
alert("正在更新本地緩存……");
applicationGaphe.swjap.Giacihe();
alert("本地緩存更新完畢,可以刷新頁面使用最新版應(yīng)用程序?!保?
},false) ;
在以上代碼中,如果不使用swapCacheO方法,本地緩存一樣會被更新,但是更新的時候不一樣。如果不調(diào)用該方法,本地緩存將在下一次打開本頁面時被更新;如果調(diào)用該方法,則本地緩存將會被立刻更新。因此,可以使用confirm()方法讓用戶選擇更新時機,是立刻,還是下次打開頁面時更 新,特別是當(dāng)用戶可能正在頁面上執(zhí)行一個較大操作的時候。
另外,盡管使用swapCacheO方法立刻更新了本地緩存,但是并不意味著我們頁面上的圖像和腳本文件也會被立刻更新,它們都是在重新打開本頁面時才會生效。下面是較完整的示例,HTML代碼如下:
<!DOCTYPE html>
<html manifest="swapCache.manifest">
<head>
<meta charset="UTF-8"/>
<title>swapCache()方法示例</title>
<script type="text/JavaScript" src= "js/script.js"></script>
</head〉
<body>
<p>swapCache()方法不例。</p>
</body>
</html>
JS代碼如下:
document.addEventListener ("load",function(event) {
setInterval(function() {
// 手工檢查是否有更新
applicationCache.update();
}, 5000);
applicationCache.addEventListener("updateready", function(event) {
if(confirm("本地緩存已被更新,需要刷新頁面獲取最新版本嗎?"){
//手工更新本地緩存
applicationCache.swapCache();
//重載頁面
location.reload();
}
}, false);
});
該頁面使用的manifest文件的內(nèi)容如下:
Txt代碼
CACHE MANIFEST
#version 1.20
CACHE:
script.js
點擊加載更多評論>>