參考資料
《Javascript高級(jí)層序設(shè)計(jì)》(第3版)
JavaScript | MDN
HTML5系列之——applicationCache對(duì)象
前言
本人菜鳥(niǎo)，入IT只為當(dāng)鼓勵(lì)師。本編文章主要介紹 如何判斷設(shè)備是在線還是離線 （navigator.onLine 屬性睡扬，online和offline事件）墩弯，如何實(shí)現(xiàn)應(yīng)用緩存（描述文件即彪，<html>的mainfest屬性街州，applicationCache對(duì)象）晴音。
一刑顺、什么是離線Web應(yīng)用
- 離線Web應(yīng)用见坑，就是在設(shè)備不能上網(wǎng)的情況下仍然可以運(yùn)行的應(yīng)用。
- 離線Web應(yīng)用是 HTML5 新增的一個(gè)重點(diǎn)技術(shù)捏检。
二荞驴、開(kāi)發(fā)離線應(yīng)用的條件
- 能夠判斷出設(shè)備是在線還是離線
- 能夠訪問(wèn)一定的資源（css、JavaScript贯城、圖像等）
- 必須有一塊本地（客戶端）空間用于保存數(shù)據(jù)
三熊楼、使用HTML5開(kāi)發(fā)離線應(yīng)用
1. 離線檢測(cè)
1.1 navigator.onLine 屬性
- 為了判斷設(shè)備是否在線，HTML5 定義了一個(gè)
navigator.onLine屬性 -
navigator.onLine是一個(gè)只讀屬性能犯，它返回一個(gè) Boolean 值：
true—— 表示 設(shè)備能上網(wǎng)鲫骗，即設(shè)備在線；
false—— 表示 設(shè)備離線踩晶。 - 下面這段代碼能在IE6+和Safari 5+正常執(zhí)行执泰；在Chrome11及之前的版本中，
navigator.onLine的值始終為 true渡蜻，但早在2011年10月出的新版就已經(jīng)解決了這個(gè)bug术吝。Firefox 4 + 和 Opera 11.10 +，支持該屬性茸苇，但必須手工選中菜單項(xiàng)“文件——>Web開(kāi)發(fā)人員（設(shè)置）——>脫機(jī)工作”才能讓瀏覽器正常工作排苍。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>判斷設(shè)備是否能上網(wǎng)</title>
</head>
<body>
<p>你現(xiàn)在的狀態(tài)是 <script>document.write(navigator.onLine ? "在線" : "離線");</script></p>
</body>
</html>
1.2 online 和 offline 事件
- 為了更好的確定網(wǎng)絡(luò)是否可用，HTML5還定義了兩個(gè)事件：
online和offline学密。 -
online事件：當(dāng)網(wǎng)絡(luò)從離線變?yōu)樵诰€時(shí)觸發(fā)淘衙；（IE9+瀏覽器支持）
offline事件：當(dāng)網(wǎng)絡(luò)從在線變?yōu)殡x線時(shí)觸發(fā)。（IE9+瀏覽器支持） - 這兩個(gè)事件在window對(duì)象上觸發(fā)腻暮。
- 為了檢測(cè)應(yīng)用是否離線彤守，在頁(yè)面加載后毯侦，最好先通過(guò)
navigator.onLine取得初始的狀態(tài)，然后通過(guò)上述兩個(gè)事件來(lái)確定網(wǎng)絡(luò)連接狀態(tài)是否變化具垫。下面代碼是實(shí)現(xiàn)兼容性最優(yōu)的方案侈离。 - 代碼中用到 EventUtil.js 文件，它提供了一個(gè)兼容所有瀏覽器的事件綁定對(duì)象做修』粽可點(diǎn)擊藍(lán)色字體從我的github中下載該文件抡草。
<!DOCTYPE html>
<html>
<head>
<title>Online Events Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<p>你現(xiàn)在的狀態(tài)是 <span id="status"><script>document.write(navigator.onLine ? "在線" : "離線");</script></span></p>
<script>
EventUtil.addHandler(window, "online", function(){
document.getElementById("status").innerHTML = "在線";
});
EventUtil.addHandler(window, "offline", function(){
document.getElementById("status").innerHTML = "離線";
});
</script>
</body>
</html>
2. 應(yīng)用緩存
HTML5的應(yīng)用緩存饰及，簡(jiǎn)稱為appcache。Appcache就是從瀏覽器的緩存中分出來(lái)的一塊緩存區(qū)康震×呛可以使用一個(gè)描述文件（manifest file），列出要下載和緩存的資源腿短，這樣就能在這個(gè)緩存中保存數(shù)據(jù)了屏箍。
2.1 檢測(cè)瀏覽器是否支持應(yīng)用緩存
if (window.applicationCache) {
//瀏覽器支持離線應(yīng)用
}
2.2 描述文件
- 描述文件用來(lái)列出需要緩存和不需要緩存的資源，以備離線時(shí)使用橘忱。
- 描述文件的擴(kuò)展名以前用.manifest赴魁，現(xiàn)在推薦使用.appcache，并且描述文件需要配置正確的MIME-type钝诚，即"text/cache-manifest"颖御，必須在web服務(wù)器上進(jìn)行配置（文件編碼必須是UTF-8）。
-
具體格式：
2.3 將描述文件和頁(yè)面關(guān)聯(lián)
<html manifest='./offline.appcche'>
2.4 window.applicationCache 對(duì)象
2.4.1 status屬性
-
applicationCache有一個(gè)status屬性凝颇，屬性值是常量：
2.4.2 可綁定在applicationCache對(duì)象上的事件
-
applicationCache還有很多相關(guān)的事件：
2.4.3 update() 方法
-
applicationCache對(duì)象的update()方法：
通過(guò)update()方法也可以手工干預(yù)潘拱，讓?xiě)?yīng)用緩存為檢查更新而觸發(fā)上述事applicationCache.update();
update()一經(jīng)調(diào)用，應(yīng)用緩存就會(huì)去檢查描述文件是否更新拧略，觸發(fā)checking事件芦岂，然后頁(yè)面就會(huì)像剛剛加載一樣，繼續(xù)執(zhí)行后續(xù)操作垫蛆。如果觸發(fā)了cached事件禽最，則說(shuō)明應(yīng)用緩存已經(jīng)準(zhǔn)備就緒，不會(huì)再發(fā)生其他操作袱饭。
2.4.4 swapCache()方法
如果觸發(fā)了updateready事件弛随，則說(shuō)明新版本的應(yīng)用緩存已經(jīng)可用，需要調(diào)用swapCache()方法來(lái)啟用新的應(yīng)用緩存宁赤。
applicationCache.onupdateready = function(){
applicationCache.swapCache();
};
2.4.5 注意事項(xiàng)
瀏覽器檢查清單文件舀透，以及更新緩存的操作是異步的，因此可能是在載入舊緩存之后進(jìn)行决左，因此可能需要載入兩次才能顯示最新的內(nèi)容愕够，因此需要提示用戶走贪。
window.applicationCache.onupdateready = function(){
var con = comfirm('有新內(nèi)容可用，是否重新加載惑芭？');
if(con){
location.reload();
}
}