基于HTML5的離線Web應用設計與實現

尹樂　許剛強

摘要：文章主要介紹利用HTML5提供的緩存控制機制和本地存儲支持構建離線Web應用。介紹HTML5標準中提供的緩存文件清單、網絡狀態檢測、Web Storage、IndexedDB等與離線應用有關的功能，以一個填報周報的應用場景介紹HTML5離線Web應用的實現方式，并對localstorage和IndexedDB兩種本地存儲實現方式進行了對比。

關鍵詞：RIA；HTML5；離線Web應用

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-2374（2014）12-0017-03

隨著Web技術的不斷發展，構建在B/S架構上的Web應用程序在很多領域得到了廣泛的應用。使用Web應用程序需要用戶和服務器建立連接，否則B/S應用程序無法正常運行。

要實現離線Web應用，可用的技術手段包括脫機瀏覽、Flash/Flex、Google Gears、HTML5等。其中HTML5方式具有可跨平臺、不需要安裝插件、提供一致的用戶體驗等優勢。通過HTML5提供的離線支持，用戶在掉線的情況下仍然能使用Web應用提供的部分功能，適用于網絡環境較差的情況或是移動應用領域。

1 HTML5離線應用

1.1 HTML5簡介及現狀

HTML5是新一代的HTML標準版本，強化了 Web 網頁的表現性能和Web應用的功能，通過HTML、CSS和JavaScript的技術組合，開發富互聯網應用（RIA），提升用戶體驗。

HTML5正在不斷的發展和完善中。2013年5月，HTML 5.1正式草案公布。目前大部分主流瀏覽器廠商都對HTML5提供了支持，如Firefox、IE、Chrome、Safari等。

1.2 HTML5緩存控制機制

引入網絡狀態檢測事件以及離線Web應用API，使基于Web技術構建的Web應用程序可以在脫機情況下使用。

（1）緩存清單文件。通過manifest屬性指定緩存清單文件，按照特定格式列出哪些資源脫機時可用，這些資源構成了應用緩存，在需要的時候資源可以從應用緩存中加載。

（2）網絡狀態檢測事件。通過online屬性判斷當前是否處于在線狀態，實現在線狀態和離線狀態的不同行為模式。引入離線事件用來檢測網絡連接狀態，通過對事件的監聽，實現應用程序在線和離線自動切換。

（3）應用緩存API。定義一系列應用緩存API，用來作為操作應用緩存的接口，可以自行控制應用緩存的使用。

1.3 HTML5數據存儲支持

構建離線Web應用，要解決數據的本地緩存問題。HTML5提供了Web Storage以及本地數據庫兩種方式支持數據在瀏覽器本地的存儲。

（1）Web Storage。Web Storage采用“鍵-值”對的形式存取數據，可以將數兆字節的大數據存儲在Javas cript對象中。分為local Storage和session Storage兩種，主要的差異是數據的保存時長及共享方式。

（2）本地數據庫。HTML5規范中，由瀏覽器提供本地數據庫的支持，無需另外安裝數據庫。關于本地數據庫仍在完善中，目前有Web SQL Database和Indexed Database兩個主要的方案。

2 離線周報填報應用

通過緩存控制機制以及數據存儲支持技術的結合使用，可以實現HTML5離線Web應用，使用戶在掉線的情況下仍然能使用Web應用提供的部分功能，并在在線和離線兩種狀態下自行切換。

2.1 應用描述

應用模擬實現用戶填寫周報的場景，用戶可以查看已填報的周報列表，并對周報做新建、編輯、刪除操作。

應用中離線支持相關功能主要是通過HTML5以及Java Script瀏覽器端代碼實現的，與服務器端數據的交互采用標準化的Ajax方式進行，只要服務器端能提供相應的支持，離線功能可以較為方便的移植到其他服務器框架上。

2.2 本地保存

為支持用戶在離線狀態下可以進行填報和編輯的操作，需要將應用相關的內容保存到本地，這里的內容包括應用界面資源以及應用數據。

（1）應用界面資源。包含HTML5文件、CSS文件、Javas cript文件以及和應用界面相關的圖片資源等文件。通過緩存清單文件的方式，將這些資源保存到用戶瀏覽器本地，保證在離線狀態下，應用的界面可以正常使用。

（2）應用數據。應用數據的保存可以分為對原有數據的保存和對離線操作數據的保存兩類，在數據加載和數據操作的過程中完成：

數據加載。用戶訪問頁面加載數據時，如果是在線狀態，則從服務器獲取數據并將獲得的數據保存到本地存儲；如果是離線狀態，則從本地存儲中獲取數據進行展示。

數據操作。在對數據做新增/修改操作時，如果是在線狀態，則直接向服務器發送請求進行操作，隨后在刷新頁面時采用數據加載的方式，同時更新本地存儲中的數據；如果是離線狀態，則將用戶對數據進行的操作記錄在本地存儲中。

刪除操作比較特殊，離線狀態下的刪除，不能直接在數據集上做刪除的操作，而是進行標記，顯示的時候不做顯示，直到切換到在線狀態下與服務器端進行同步時才做刪除的操作。

2.3 數據同步

在由離線狀態切換到在線狀態時進行本地和服務器端數據的同步。通過監聽網絡狀態檢測事件，將同步操作注冊到online事件上。當online事件發生，即切換到在線狀態時，自動觸發同步操作。

數據同步通過讀取本地存儲中保存的離線操作記錄來完成，按照記錄下的操作和數據，向服務器端發送請求，實現中要保證對數據的操作可以按照記錄中的順序進行。

2.4 數據存儲方式

分別用local storage和Indexed DB兩種本地數據存儲方式進行了實現，相對于local storage的簡單易用，Indexed DB在開發實現上代價較大，但Indexed DB的查詢效率更高，可以支持的數據對象類型豐富，能實現功能更復雜的應用。

2.5 實現效果

分別在計算機和移動設備上進行測試，在計算機上Firefox和Chrome可以達到效果，而IE9不提供離線支持；在移動設備上，瀏覽器不支持Indexed DB方式，local storage方式可以達到效果。

綜合上述測試結果，目前各瀏覽器對HTML5規范，特別是對于本地存儲數據庫，支持程度有所不同，需要根據具體的需求選擇適合的實現方式，如離線周報填報場景中，如果需求主要是面向移動設備的，則要選擇采用local storage的方式或Web SQL的方式來實現。

3 結語

通過HTML5提供的離線支持，可以在B/S應用中實現離線存儲、在線同步的功能，使Web應用可以在網絡不穩定的情況下提供服務，增強Web應用程序的功能，改善用戶體驗。

在實際的應用系統開發中，還需要考慮更多的實現細節問題，將HTML5提供的功能與需求結合起來，全面考慮應用的場景以及所面向的對象，選擇合適的實現方式和程序結構設計。

參考文獻

[1] （荷）Peter Lubbers，等，柳靖，等譯.HTML5程序設計（第2版）[M].北京：人民郵電出版社，2012.

[2] （美）Gauchat著，曾少寧，等.HTML5精粹：利用HTML5開發令人驚奇的Web站點和革命性應用[M].北京：機械工業出版社，2012.

[3] 羅大暉，陳娟.基于HTML5的Web離線應用研究與實現[J].計算機應用與軟件，2012，（12）.