<!DOCTYPE html />
<!-- 可以為每個頁面單獨指定一個manifest文件,也可以為整個Web程序指定一總manifest文件 -->
<html manifest="Demo.manifest">
<head>
<meta charset="utf-8" />
</head>
<body οnlοad="initEvent();">
<!--
離線Web應用程序:
Web應用程序沒有和Internet連接,就無法適用
因此,HTML5新增一個API,使用本地緩存保存HTML,CSS,JS等文件
本地緩存與瀏覽器網頁緩存區別:
1.本地緩存為整個Web程序,瀏覽器網頁緩存只服務于單個網頁
2.本地緩存可靠,可控制。瀏覽器網頁緩存不安全,不可靠,因為我們不知道到底緩存了哪些網頁
manifest文件:
Web應用程序本地緩存通過每個頁面的manifest文件管理
manifest文件是一個簡單文本文件,其中列舉了需要被緩存或不緩存的資源文件名稱,以及資源文件訪問路徑
manifest文件第一行必須為“CACHE MANIFEST”以告知瀏覽器文件的作用
所以,必須對服務器配置,讓服務器支持text/cache-manifest這個MIME類型
IIS服務器配置步驟:
1.右鍵選擇網站,彈出屬性對話框
2.選擇“HTTP頭”標籤
3.在MIME映射下,單擊文件類型按鈕
4.在打開的MIME類型對話框中單擊新建按鈕
5.在關聯擴展名文本框中輸入“manifest”,在內容類型文本框中輸入“text/cache-manifest”,單擊確定
manifest文件中資源文件分3類:
CACHE類型:指定需要被緩存的本地資源文件
NETWORK類型:指定不需要緩存到本地的資源文件,這些資源只有在連接網絡時才可訪問
*為通配符,表示沒有在manifest文件中指定的資源文件都不緩存
FALLBACK類型:每行指定2個資源文件,第一個資源文件為能夠在在線使用的資源
第二個資源文件為不在線時使用的備用資源文件
每個類別都可選,如果未指定,默認為CACHE類型
離線Web應用程序,瀏覽器與服務器交互過程:
首次訪問網站:
1.瀏覽器訪問http://lulu,服務器返回index.html頁面
2.瀏覽器解析index.html,請求頁面上所有資源(HTML,CSS,JS,圖片,manifest文件),服務器返回所有資源
3.瀏覽器處理manifest文件,請求manifest中所有本地緩存文件(即時已經請求過),服務器返回所有本地緩存資源
4.瀏覽器更新本地緩存,存入所有要求本地緩存的資源,并觸發一事件,通知本地緩存被更新
再次訪問網站,且manifest文件為被修改:
1.瀏覽器再次訪問http://lulu,瀏覽器發現這個頁面被本地緩存,使用本地緩存中index.html頁面
2.瀏覽器解析index.html頁面,使用本地緩存中的資源文件
3.瀏覽器向服務器請求manifest文件,服務器返回304代碼,通知瀏覽器manifest文件沒有變化
只要頁面上資源文件被本地緩存過,下次再開這個頁面,總是先使用本地緩存中的資源,讓后請求manifest文件
再次訪問網站,manifest文件已經更新:
1.瀏覽器再次訪問http://lulu,瀏覽器發現這個頁面被本地緩存,使用本地緩存中index.html頁面
2.瀏覽器解析index.html頁面,使用本地緩存中的資源文件
3.瀏覽器向服務器請求manifest文件,服務器返回跟新過的manifest文件
4.瀏覽器發現manifest文件已更新,再次請求所有要進行本地緩存的資源文件,服務器返回所有本地緩存資源
5.瀏覽器更新本地緩存,存入所有要求本地緩存的資源,并觸發一事件,通知本地緩存被更新
注意:此時,即時資源文件被修改過,這是跟新后的本地緩存中內容還不能被使用,必須重新打開這個頁面,才被加載
applicationCache對象:
代表本地緩存,可用來通知用戶本地緩存中已經被更新,也允許用戶手工跟新本地緩存
onUpdateReady事件(本地緩存準備被更新):當瀏覽器對本地緩存更新,裝入新資源文件時觸發,通知本地緩存已更新
applicationCache.onUpdateReady = function(){
alert("本地緩存已更新,請您刷新頁面來的到本程序的最新版本。");
};
swapCache方法:手工執行本地緩存的更新,只能在updateReady事件觸發時調用
applicationCache.onUpdateReady = function(){
alert("正在更新本地緩存...");
//不調用該方法,本地緩存也會更新,不過會在下一次打開本頁面時更新
//調用該方法,本地緩存會立刻更新(但並不意味會立刻改變頁面上圖片腳本等,需要刷新才會生效)
applicationCache.swapCache();
alert("本地緩存已更新,請您刷新頁面來的到本程序的最新版本。");
};
applicationCache對象的事件:
1.瀏覽器訪問http://lulu,服務器返回index.html頁面
2.瀏覽器發現網頁具有manifest屬性,觸發checking事件,檢查manifest文件是否存在
3.manifest文件不存在,觸發error事件,不執行步5驟開始的交互
4.瀏覽器解析index.html,請求頁面上所有資源(HTML,CSS,JS,圖片,manifest文件),服務器返回所有資源
5.瀏覽器處理manifest文件,請求manifest中所有本地緩存文件(即時已經請求過),服務器返回所有本地緩存資源
6.瀏覽器觸發downloading事件,開始下載資源,下載同時,週期性觸發progress事件,可獲得下載進度
7.下載結束,觸發cached事件,表示首次緩存成功
6.瀏覽器更新本地緩存,存入所有要求本地緩存的資源,并觸發一事件,通知本地緩存被更新
再次訪問網站,1~4同上,5之後瀏覽器核對manifest文件是否更新,沒有觸發noupdate事件
如果更新了,將繼續後面的步驟,在步驟7中不觸發cached事件,而觸發updateready事件,表示下載結束
-->
<script type="text/javascript">
function init() {
//設置定時檢查
setInterval(function () {
//手動檢查服務器是否manifest文件有更新
applicationCache.update();
}, 5000);
applicationCache.addEventListener("updateready", function () {
if (confirm("本地緩存已更新,需要刷新頁面來獲取最新版本么?")) {
//手工更新本地緩存
applicationCache.swapCache();
location.reload();
}
});
};
//init();
</script>
<div id="msg"></div>
<script type="text/javascript">
function initEvent() {
var msg = document.getElementById("msg");
applicationCache.addEventListener("checking", function () {
msg.innerHTML += "checking<br/>";
});
applicationCache.addEventListener("noupdate", function () {
msg.innerHTML += "noupdate<br/>";
});
applicationCache.addEventListener("downloading", function () {
msg.innerHTML += "downloading<br/>";
});
applicationCache.addEventListener("progress", function () {
msg.innerHTML += "progress<br/>";
});
applicationCache.addEventListener("updateready", function () {
msg.innerHTML += "updateready<br/>";
});
applicationCache.addEventListener("cached", function () {
msg.innerHTML += "cached<br/>";
});
applicationCache.addEventListener("error", function () {
msg.innerHTML += "error<br/>";
});
};
</script>
</body>
</html>
Demo.msnifest文件
CACHE MANIFEST
#文件開頭必須書寫CACHE MANIFEST
#version 1
#這個manifest文件版本號
CACHE:
#需要緩存在本地的資源文件
other.html
hello.js
image/myphoto.jpg
NETWORK:
#不需要緩存在本地的資源文件
http://lulu/NotOffLine
NotOffLine.aspx
*
FALLBACK:
#在線時使用資源,離線時使用資源
online.js locale.js
CACHE:
newhello.html
newhello.js