離線的Web應用，就是在設備不能上網的時候還能運行應用。HTML5把離線應用作為重點，主要是開發人員的心願。離線應用的開發的步驟有：首先應該知道設備是否能夠上網;然後應該還能訪問一定的資源(如圖像、CSS、JavaScript等)，只有這樣才能正常工作。
想要開發離線Web應用第一步就得知道用戶的設備的上網情況。HTML5為此定義了一個navigator.onLine屬性，這個屬性值為true的時候表示設備能夠上網，表示false的時候表示設備不能上網。這個屬性的關鍵在於浏覽器必須知道設備能夠訪問網絡，從而返回正確的值。在實際情況的應用下，navigator.onLine在不同浏覽器之間有著差異。
IE6+和Safari 5+能夠正確檢測到網絡已經斷開，並將navigator.onLine的值轉換成false。
Firefox 3+和Opera 10.6+支持navigator.onLine屬性，但是必須手工選中菜單項”文件——Web開發人員(設置)——脫機工作”才能讓浏覽器正常工作。
Chrome 11及以前版本始終將navigator.onLine屬性設置為true。
由於navigator.onLine還是存在兼容性的問題，單獨使用navigator.onLine屬性不能確定網絡的連通情況。所以，在請求發生錯誤的時候，檢測這個屬性是有必要的。下面是檢測這個屬性的小例子。
JavaScript代碼
? 1 2 3 4 5 if(navigator.onLine){ //正常上網 }else{ //執行離線狀態時的任務 }
除了navigator.onLine屬性之外，還有兩個事件：online和offline。當網絡從離線變成在線，或者從在線變為離線的時候，分別觸發這兩個事件。online事件和offline事件使用的小例子如下
JavaScript代碼
? 1 2 3 4 5 6 window.addEventListener('online',function(){ alert("online") }, false); window.addEventListener('offline',function(){ alert("offline") }, false);
為了檢測是否離線，頁面加載之後，可以通過navigator..onLine屬性取得初始狀態。然後通過online事件和offline事件來確定網絡連接狀態是否變化。當online事件和offline事件發生變化的時候，navigator.onLine屬性也會發生變化。必須手工輪詢這個屬性才能檢測到網絡狀態的變化。
支持離線檢測的浏覽器有Firefox 3+、Opera 10.6+、Chrome、IE6+(只支持navigator.onLine屬性)、Android版Webkit和iOS版Safari。
HTML5的應用緩存(application cache)，下面簡稱appcache。Appcache是專門為開發離線Web應用而設計的。Appcache是從浏覽器的緩存中分出來的一塊緩存區。在這塊緩存區保存數據，可以使用一個描述文件(manifest file)，列出要下載和緩存的資源。下面是一個簡單的描述文件小實例。
在最簡單的情況下，描述文件中列出的都是需要下載的資源，以備離線時使用。設置描述文件的選項比較多，在這裡只是一筆帶過。大家想了解更多請打開網址：http://html5doctor.com/go-offline-with-application-cache。
在頁面中必須將描述文件與頁面關聯起來，可以在html標簽中添加manifest屬性，並指定文件的路徑。小例子如下。
HTML代碼
? 1
offline.manifest代碼
? 1 2 3 4 5 CACHE MANIFEST #緩存文件 clock.html clock.css clock.js
上面的代碼告訴頁面，/offline.manifest中包含著描述文件。這個文件的MIME類型必須是text/cache-manifest。
雖然應用緩存的意圖是確保離線時資源可以用，但是也有相應的JavaScript API讓開發者知道它都在做什麼。這個API的核心是applicationCache對象，這個對象有一個status屬性，屬性值是常量，表示的狀態如下。
0：無緩存，即沒有與頁面相關的應用緩存。
1：閒置，即應用緩存未得到更新。
2：檢查中，即正在下載描述文件並檢查更新。
3：下載中，即應用緩存正在下載描述文件中指定的資源。
4：更新完成，即應用緩存已經更新資源，而且所有資源都已下載完畢，可以通過swapCache()方法來使用了。
5：廢棄，即應用緩存存的描述文件已經不存在了，因此頁面無法再訪問應用緩存。
應用緩存還有很多相關的事件，表示其狀態的改變。相關事件如下
checking：在浏覽器為應用緩存查找更新時觸發。
error：在檢查更新或下載資源期間發生錯誤時觸發。
noupdate：在檢查描述文件發現文件無變化時觸發。
downloading：在開始下載應用緩存資源時觸發。
progress：在文件下載應用緩存的過程中持續不斷地觸發。
updateready：在頁面新的應用緩存下載完畢並且可以通過swapCache()使用時觸發。
cached：在應用緩存完整可用的時候觸發。
一般來講，這些事件會隨著頁面加載按上述順序依次觸發。不過，通過調用update()方法也可以手工干預，讓應用緩存為檢測更新而觸發上述事件。
JavaScript代碼
? 1 applicationCache.update();
Update()一調用，應用緩存就會去檢查描述文件是否更新(觸發checking事件)，然後就像頁面剛剛加載一樣，繼續執行後續操作。如果觸發了updateready事件，說明新版本的應用緩存已經可用，而此時你需要調用swapCache()方法來啟用新應用緩存。
JavaScript代碼
? 1 2 3 applicationCache.addEventListener('updateready',function(){ applicationCache.swapCache(); }, false);
支持HTML5離線存儲的浏覽器有iOS 3.2+版Safari、Chrome、Android版Webkit、Firefox 3+、Safari 4+和Opera 10.6+。在Firefox 4及以前版本中調用swapCache()方法會報錯。
HTML5實戰與剖析之離線應用為大家介紹完了，這節主要為大家介紹了離線檢測navigator.onLine屬性的應用，和離線緩存的Appcache應用。更多有關HTML5的相關更新盡在夢龍小站。