支持離線 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() 方法手動觸發上述事件。
數據存儲
Cookie
HTTP 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 包括:
新聞熱點
疑難解答