h5牛牛平臺(tái)開(kāi)發(fā)制作教程HTML5離線Web應(yīng)用

查看一個(gè)離線的靜態(tài)web頁(yè)面是很容易的: 連到internet,載入這個(gè)web頁(yè)面,隨后斷開(kāi)網(wǎng)絡(luò),躲到一個(gè)角落里在你空的時(shí)候就可以看這個(gè)頁(yè)面了(你甚至可以為了減少時(shí)間,省去”躲到一個(gè)角落”這一步).

這對(duì)于一個(gè)靜態(tài)的web頁(yè)面是比較容易實(shí)現(xiàn),可是對(duì)于像Gmail 和 Google Docs這樣的web應(yīng)用又是如何做到的呢? 這里就要感謝HTML5了,因?yàn)橛辛怂魏稳?不僅僅是Google)都可以構(gòu)建一個(gè)離線的web應(yīng)用了.

離線的web應(yīng)用從在線的web應(yīng)用開(kāi)始.在第一次訪問(wèn)有離線訪問(wèn)功能的web站點(diǎn)的時(shí)候, web服務(wù)器會(huì)告訴你的瀏覽器哪些文件是為了保證能夠讓你離線訪問(wèn)該站點(diǎn)所必須的,這些文件可以是任何文件,可以是HTML,也可以是Javascript或者圖片,甚至可以是視頻.一旦你的瀏覽器下載了這些必須的文件之后,下次哪怕你沒(méi)有連接到網(wǎng)絡(luò)你也可以正常訪問(wèn)該站點(diǎn).你的瀏覽器能夠識(shí)別到你當(dāng)前是離線狀態(tài),然后就會(huì)使用之前下載下來(lái)的那些文件,而一旦你再次連接到網(wǎng)絡(luò),任何你對(duì)這些文件做的改動(dòng)都會(huì)同步到遠(yuǎn)程服務(wù)器上.h5牛牛平臺(tái)開(kāi)發(fā)制作www.yasewl.com測(cè)試圖片

檢測(cè)你的瀏覽器是否支持離線功能可以使用之前介紹過(guò)的檢測(cè)方法中的第一種.如果你的瀏覽器支持離線web應(yīng)用的話(huà),在全局的window對(duì)象上會(huì)有一個(gè)叫”applicationCache”的屬性,反之該屬性值就為undefined.

JavaScript Code復(fù)制內(nèi)容到剪貼板

function supports_offline(){

return !!window.applicationCache;

}

function supports_offline(){

return !!window.applicationCache;

}

同樣的，如果你不想自己親手去寫(xiě)這個(gè)檢測(cè)方法的話(huà)，你可以使用Modernizr(1.1或者更近版本)來(lái)檢測(cè)你的瀏覽器是否支持離線web應(yīng)用

JavaScript Code復(fù)制內(nèi)容到剪貼板

if(Modernizr.applicationcache){

//window.applicationCache is available

} else {

//no native support for offline

//maybe try Gears or another third-party solution

}

if(Modernizr.applicationcache){

//window.applicationCache is available

} else {

//no native support for offline

//maybe try Gears or another third-party solution

}

本文版權(quán)歸黑馬程序員H5+全棧學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！

作者：黑馬程序員H5+全棧學(xué)院

首發(fā)：http://stack.itheima.com/