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

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

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

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

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

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

function supports_offline(){

return !!window.applicationCache;

}

function supports_offline(){

return !!window.applicationCache;

}

同樣的，如果你不想自己親手去寫這個(gè)檢測方法的話，你可以使用Modernizr(1.1或者更近版本)來檢測你的瀏覽器是否支持離線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)載請注明作者出處。謝謝！

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

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