HTML5新增了離線應(yīng)用锥累，離線應(yīng)用使得我們可以在網(wǎng)頁(yè)或應(yīng)用在沒(méi)有網(wǎng)絡(luò)的情況下依然可以使用土铺。
離線應(yīng)用的使用需要以下幾個(gè)步驟：
- 離線檢測(cè)（確定是否聯(lián)網(wǎng)）
- 訪問(wèn)一定的資源
- 有一塊本地空間用于保存數(shù)據(jù)（無(wú)論是否上網(wǎng)都不妨礙讀寫(xiě)）
使用HTML5離線web應(yīng)用
1、檢查瀏覽器的支持情況的方法
if(window.applicationCache){
//瀏覽器支持離線應(yīng)用
}
2帆焕、關(guān)于描述文件
描述文件用來(lái)列出需要緩存和不需要緩存的資源帖旨，以備離線時(shí)使用。
描述文件的擴(kuò)展名以前用.manifest彬呻，現(xiàn)在推薦使用.appcache衣陶，并且描述文件需要配置正確的MIME-type，即"text/cache-manifest"闸氮，必須在web服務(wù)器上進(jìn)行配置（文件編碼必須是UTF-8）剪况。不同的服務(wù)器有不同的配置方法，具體這里不詳述蒲跨。
首行必須以以下字符串開(kāi)始
CACHE MANIFEST
剩下的就是要緩存的文件的URL译断，一行一個(gè)（相對(duì)URL是相對(duì)于清單文件而言的，不是相對(duì)于文件）
#以“#”開(kāi)頭的是注釋
common.css
common.js
這樣這個(gè)文件中列舉的所有的文件都會(huì)被緩存
在清單中或悲，可以使用特殊的區(qū)域頭來(lái)標(biāo)識(shí)頭信息之后的清單項(xiàng)的類(lèi)型孙咪，上面的最簡(jiǎn)單的緩存屬于"CACHE:"區(qū)域。
像這樣
#該頭信息之后的內(nèi)容需要緩存
CACHE:
common.css
connom.js
以"NETWORK:"開(kāi)頭的區(qū)域列舉的文件隆箩，總是從線上獲取该贾，不緩存
NETWORK:頭信息支持通配符"*",表示任何未明確列舉的資源，都將通過(guò)網(wǎng)絡(luò)加載
#該頭信息之后的內(nèi)容不需要緩存捌臊，總是從線上獲取
NETWORK:
a.css
#表示以name開(kāi)頭的資源都不要緩存
name/
以"FALLBACK:"開(kāi)頭的區(qū)域中的內(nèi)容杨蛋，提供了獲取不到緩存資源時(shí)的備選資源路徑
該區(qū)域中的內(nèi)容，每一行包含兩個(gè)URL（第一個(gè)URL是一個(gè)前綴理澎，任何匹配的資源都不被緩存逞力，第二個(gè)URL表示需要被緩存的資源）
FALLBACK:
name/ example.html
一個(gè)清單可以有任意多個(gè)區(qū)域，且位置沒(méi)有限制糠爬。
3寇荧、搭建離線應(yīng)用程序
假設(shè)我們要構(gòu)建一個(gè)包含css，js执隧，html的單頁(yè)應(yīng)用揩抡，同時(shí)要為這個(gè)單頁(yè)應(yīng)用添加離線支持。
要將描述文件與頁(yè)面關(guān)聯(lián)起來(lái)镀琉，需要使用html標(biāo)簽的manifest特性指定描述文件的路徑
<html manifest='./offline.appcche'>
開(kāi)發(fā)離線應(yīng)用的第一步就是檢測(cè)設(shè)備是否離線
-
HTML5新增了navigator.onLine屬性
當(dāng)該屬性為true的時(shí)候表示聯(lián)網(wǎng)峦嗤，值為false的時(shí)候，表示離線if(navigator.onLine){ //聯(lián)網(wǎng) }else{ //離線 }
** 注：IE6及以上瀏覽器及其他標(biāo)準(zhǔn)瀏覽器都支持這個(gè)屬性 **
- online事件（IE9+瀏覽器支持）
當(dāng)網(wǎng)絡(luò)從離線變?yōu)樵诰€的時(shí)候觸發(fā)該事件屋摔，在window上觸發(fā)該事件烁设，不需要刷新
window.online = function(){
//需要觸發(fā)的事件
}
-
offline事件（IE9+瀏覽器支持）
當(dāng)網(wǎng)絡(luò)從在線變?yōu)殡x線的時(shí)候觸發(fā)該事件，和online事件一樣钓试，在window上觸發(fā)該事件装黑，不需要刷新window.offline = function(){ //需要觸發(fā)的事件 }
應(yīng)用緩存
應(yīng)用緩存（Application Cache）是從瀏覽器的緩存中分出來(lái)的一塊緩存區(qū)（大小根據(jù)具體瀏覽器而定副瀑，一般是5M）
應(yīng)用緩存和網(wǎng)頁(yè)緩存的區(qū)別：
- 應(yīng)用緩存為整個(gè)web應(yīng)用程序服務(wù)，網(wǎng)頁(yè)緩存服務(wù)于單個(gè)網(wǎng)頁(yè)
- 應(yīng)用緩存只緩存指定頁(yè)面需要的指定資源（可人為控制）恋谭，任何網(wǎng)頁(yè)都具有網(wǎng)頁(yè)緩存（瀏覽器默認(rèn)行為）
- 應(yīng)用緩存不會(huì)隨著清除瀏覽器緩存而消失
- 應(yīng)用緩存不會(huì)像網(wǎng)頁(yè)緩存那樣糠睡，老數(shù)據(jù)會(huì)被最新一次的新數(shù)據(jù)替代
- 應(yīng)用緩存可以離線訪問(wèn)，網(wǎng)頁(yè)緩存必須在線訪問(wèn)
- 應(yīng)用緩存可靠箕别，可控铜幽，網(wǎng)頁(yè)緩存不可控
應(yīng)用緩存的優(yōu)勢(shì)
- 離線瀏覽
- 速度更快--已緩存資源加載更快
- 減少負(fù)載--瀏覽器只從服務(wù)器下載更新過(guò)的文件
一個(gè)web應(yīng)用首次下載并緩存之后，任何加載請(qǐng)求都優(yōu)先來(lái)自于緩存串稀，因此可以實(shí)現(xiàn)離線緩存。如果不需要使用離線緩存了狮杨，就需要在服務(wù)器端刪除描述文件母截，或者刪除HTML頁(yè)面中的manifest屬性。
一旦應(yīng)用被緩存橄教，則緩存始終不變清寇。那么，怎樣才能改變緩存
- 用戶(hù)清空應(yīng)用緩存
- manifest文件被修改
- 使用update()方法更新緩存
如果服務(wù)器上的文件有所修改的話护蝶，那么修改描述文件中注釋行的日期或者版本號(hào)是一個(gè)不錯(cuò)的使瀏覽器重新緩存文件的辦法
此外华烟，我們還可以使用HTML5提供的API來(lái)操作和更新緩存
applicationCache API
applicationCache API是一個(gè)操作應(yīng)用緩存的接口。新的window.applicationCache對(duì)象可以觸發(fā)一系列與緩存狀態(tài)相關(guān)的事件持灰。
這個(gè)對(duì)象有一個(gè)status屬性盔夜，值為常量，表示緩存狀態(tài)
- 0：沒(méi)有與頁(yè)面相關(guān)的應(yīng)用緩存（未緩存）
- 1：應(yīng)用緩存未得到更新（空閑）
- 2：正在下載描述文件并檢查更新（檢查中）
- 3：應(yīng)用緩存正在下載描述文件中指定的資源（下載中）
- 4：應(yīng)用緩存已經(jīng)更新了資源堤魁，而且所有資源都已下載完畢喂链，可以通過(guò)swapCache()來(lái)使用了（更新就緒）
- 5：應(yīng)用緩存的描述文件不存在了，頁(yè)面無(wú)法再訪問(wèn)應(yīng)用緩存（已過(guò)期）
這個(gè)對(duì)象有以下事件妥泉，表示其狀態(tài)的改變
- 每次載入一個(gè)設(shè)置了manifest屬性的HTML文件椭微，首先會(huì)觸發(fā)checking事件
- 如果應(yīng)用程序已經(jīng)緩存，并且清單文件沒(méi)有改動(dòng)盲链，則瀏覽器觸發(fā)noupdate事件
- 如果應(yīng)用程序已經(jīng)緩存蝇率，并且清單文件發(fā)生改動(dòng)，則瀏覽器觸發(fā)downloading事件刽沾，下載完畢后觸發(fā)updateready事件
- 如果應(yīng)用程序未緩存本慕，則downloading事件和progress事件都會(huì)觸發(fā)，但是下載完成后觸發(fā)cached事件而不是updateready事件
- 如果處于離線悠轩，無(wú)法檢測(cè)清單狀態(tài)间狂，則觸發(fā)error事件，如果引用一個(gè)不存在的清單文件火架，也會(huì)觸發(fā)error事件
- 如果處于在線鉴象，應(yīng)用也緩存了忙菠，但是清單文件不存在，則會(huì)觸發(fā)obsolete事件纺弊，并將應(yīng)用程序從緩存中清除牛欢。
一般來(lái)講，這些事件會(huì)隨著頁(yè)面加載按上述順序依次觸發(fā)
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ā)生其他操作。
swapCache()方法
如果觸發(fā)了updateready事件陕凹，則說(shuō)明新版本的應(yīng)用緩存已經(jīng)可用悍抑，需要調(diào)用swapCache()方法來(lái)啟用新的應(yīng)用緩存。
applicationCache.onupdateready = function(){
applicationCache.swapCache();
};
瀏覽器檢查清單文件杜耙，以及更新緩存的操作是異步的搜骡，因此可能是在載入舊緩存之后進(jìn)行，因此可能需要載入兩次才能顯示最新的內(nèi)容佑女，因此需要提示用戶(hù)
window.applicationCache.onupdateready = function(){
var con = comfirm('有新內(nèi)容可用记靡，是否重新加載？');
if(con){
location.reload();
}
}