站長(zhǎng)資訊網(wǎng)
html5支持離線應(yīng)用。離線應(yīng)用是html5新增的特性，利用本地緩存機(jī)制，使得用戶可以在網(wǎng)頁(yè)或應(yīng)用在沒(méi)有網(wǎng)絡(luò)的情況下依然可以使用。為了能夠讓W(xué)eb應(yīng)用程序在離線狀態(tài)的時(shí)候也能正常工作，必須把所有構(gòu)成Web應(yīng)用程序的資源文件，諸如HTML文件，CSS文件，JavaScript腳本文件放在本地緩存中，這樣當(dāng)服務(wù)器沒(méi)有和網(wǎng)絡(luò)連接時(shí)，也可以利用本地緩存中的資源文件來(lái)正常運(yùn)行應(yīng)用程序。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
HTML5新增了離線應(yīng)用，利用本地緩存機(jī)制，離線應(yīng)用使得我們可以在網(wǎng)頁(yè)或應(yīng)用在沒(méi)有網(wǎng)絡(luò)的情況下依然可以使用。當(dāng)客戶端本地與web應(yīng)用程序的服務(wù)器沒(méi)有建立連接時(shí)，也能正常在客戶端本地使用該web應(yīng)用程序進(jìn)行有關(guān)操作。
為了能夠讓W(xué)eb應(yīng)用程序在離線狀態(tài)的時(shí)候也能正常工作，必須把所有構(gòu)成Web應(yīng)用程序的資源文件，諸如HTML文件，CSS文件，JavaScript腳本文件放在本地緩存中，當(dāng)服務(wù)器沒(méi)有和網(wǎng)絡(luò)連接時(shí)，也可以利用本地緩存中的資源文件來(lái)正常運(yùn)行Web應(yīng)用程序。
離線應(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)的類型，上面的最簡(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)用被緩存，則緩存始終不變。那么，怎樣才能改變緩存
- 用戶清空應(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)容，因此需要提示用戶
window.applicationCache.onupdateready = function(){ var con = comfirm('有新內(nèi)容可用，是否重新加載？'); if(con){ location.reload(); } }
