尹樂　許剛強

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

關(guān)鍵詞：RIA；HTML5；離線Web應用

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

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

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

1 HTML5離線應用

1.1 HTML5簡介及現(xiàn)狀

HTML5是新一代的HTML標準版本，強化了 Web 網(wǎng)頁的表現(xiàn)性能和Web應用的功能，通過HTML、CSS和JavaScript的技術(shù)組合，開發(fā)富互聯(lián)網(wǎng)應用（RIA），提升用戶體驗。

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

1.2 HTML5緩存控制機制

引入網(wǎng)絡狀態(tài)檢測事件以及離線Web應用API，使基于Web技術(shù)構(gòu)建的Web應用程序可以在脫機情況下使用。

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

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

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

1.3 HTML5數(shù)據(jù)存儲支持

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

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

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

2 離線周報填報應用

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

2.1 應用描述

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

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

2.2 本地保存

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

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

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

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

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

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

2.3 數(shù)據(jù)同步

在由離線狀態(tài)切換到在線狀態(tài)時進行本地和服務器端數(shù)據(jù)的同步。通過監(jiān)聽網(wǎng)絡狀態(tài)檢測事件，將同步操作注冊到online事件上。當online事件發(fā)生，即切換到在線狀態(tài)時，自動觸發(fā)同步操作。

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

2.4 數(shù)據(jù)存儲方式

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

2.5 實現(xiàn)效果

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

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

3 結(jié)語

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

在實際的應用系統(tǒng)開發(fā)中，還需要考慮更多的實現(xiàn)細節(jié)問題，將HTML5提供的功能與需求結(jié)合起來，全面考慮應用的場景以及所面向的對象，選擇合適的實現(xiàn)方式和程序結(jié)構(gòu)設計。

參考文獻

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

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

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