支援離線Web 應用開發是HTML5 的另一個重點。所謂離線Web 應用,就是在設備無法上網的情況下仍可運作的應用。
開發離線Web 應用程式需要幾個步驟。首先是確保應用程式知道設備是否能上網,以便下一步執行正確的操作。然後,應用程式還必須能存取一定的資源(圖像、Javascript、CSS等),只有這樣才能正常運作。最好,必須有一塊本地空間用戶保存數據,無論能否上網都不妨礙讀寫。
HTML5 及其相關的API讓開發離線應用程式成為現實。
離線偵測要知道設備是在線還是離線,HTML5 定義了一個navigator.onLine 屬性,這個屬性值為true 表示設備能上網,值為false 表示設備離線。
if (navigator.onLine) { // 正常運作} else { // 執行離線狀態時的任務}
由於navigator.onLine 有一定的相容性問題,因此除了navigator.onLine 屬性之外,為了更好地確定網路是否可用,HTML5 還定義了兩個事件online 和offline。
當網路在離線和線上之間切換時在window 物件上觸發這兩個事件:
window.addEventListener('online', function() { // 正常運作});window.addEventListener('offline', function() { // 執行離線狀態時的任務});
在實際應用中,最好在頁面載入後,最好先透過navigator.onLine 取得初始的狀態。然後透過上述兩個事件來決定網路連線狀態是否變化。當上述事件觸發時,navigator.onLine 屬性的值也會改變,不過必須要手動輪詢這個屬性才能偵測到網路狀態的變化。
應用程式緩存HTML5 的應用程式快取(application cache),或簡稱為appcache,是專門為開發離線Web 應用程式而設計的。 Appcache 就是從瀏覽器的快取中分出來的一塊快取區。要想在這個快取中保存數據,可以使用一個描述檔(manifest file),列出要下載和快取的資源。描述檔案範例:
CACHE MANIFEST# Commentfile.jsfile.css
然後在html 引用:
<html manifest=./xxx.manifest>
xxx.manifest 檔案的MIME 類型必須是text/cache-manifest。
這個API 的核心是applicationCache 對象,這個對像有一個status 屬性,屬性的值是常數,表示應用快取的如下目前狀態:
相關事件:
一般來講,這些事件會隨著頁面載入依上述順序依序觸發。也可以透過呼叫update() 方法手動觸發上述事件。
資料儲存CookieHTTP Cookie,通常直接稱為cookie,是在客戶端用來儲存會話資訊的。此標準要求伺服器對任意HTTP 請求發送Set-Cookie HTTP 頭資訊作為回應的一部分,其中包含會話資訊。伺服器回應頭範例:
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value
然後瀏覽器Set-Cookie 的會話訊息,之後為每個請求添加Cookie HTTP 頭將訊息傳回伺服器,如下所示:
GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value
發送回伺服器的額外資訊可以用於唯一驗證客戶來自於發送的哪個請求。
完整的cookie 包括: