DIV CSS 佈局教程網

 查看一個離線的靜態web頁面是很容易的: 連到internet,載入這個web頁面,隨後斷開網絡,躲到一個角落裡在你空的時候就可以看這個頁面了(你甚至可以為了減少時間,省去”躲到一個角落”這一步).

這對於一個靜態的web頁面是比較容易實現,可是對於像Gmail 和 Google Docs這樣的web應用又是如何做到的呢? 這裡就要感謝Html5了,因為有了它任何人(不僅僅是Google)都可以構建一個離線的web應用了.

離線的web應用從在線的web應用開始.在第一次訪問有離線訪問功能的web站點的時候, web服務器會告訴你的浏覽器哪些文件是為了保證能夠讓你離線訪問該站點所必須的,這些文件可以是任何文件,可以是Html,也可以是Javascript或者圖片,甚至可以是視頻.一旦你的浏覽器下載了這些必須的文件之後,下次哪怕你沒有連接到網絡你也可以正常訪問該站點.你的浏覽器能夠識別到你當前是離線狀態,然後就會使用之前下載下來的那些文件,而一旦你再次連接到網絡,任何你對這些文件做的改動都會同步到遠程服務器上.

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

1. function supports_offline(){      
2.     return !!window.applicationCache;      
3. }     
4.     
5. function supports_offline(){    
6.   return !!window.applicationCache;    
7. }  

同樣的，如果你不想自己親手去寫這個檢測方法的話，你可以使用Modernizr(1.1或者更近版本)來檢測你的浏覽器是否支持離線web應用 

1. if(Modernizr.applicationcache){      
2.     //window.applicationCache is available      
3. } else {      
4.     //no native support for offline      
5.     //maybe try Gears or another third-party solution      
6. }     
7. if(Modernizr.applicationcache){    
8.     //window.applicationCache is available    
9. } else {    
10.     //no native support for offline    
11.     //maybe try Gears or another third-party solution    
12. }