基于HTML5的離線(xiàn)Web應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)

尹樂(lè)　許剛強(qiáng)

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

關(guān)鍵詞：RIA；HTML5；離線(xiàn)Web應(yīng)用

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-2374（2014）12-0017-03

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

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

1 HTML5離線(xiàn)應(yīng)用

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

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

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

1.2 HTML5緩存控制機(jī)制

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

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

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

（3）應(yīng)用緩存API。定義一系列應(yīng)用緩存API，用來(lái)作為操作應(yīng)用緩存的接口，可以自行控制應(yīng)用緩存的使用。

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

構(gòu)建離線(xiàn)Web應(yīng)用，要解決數(shù)據(jù)的本地緩存問(wèn)題。HTML5提供了Web Storage以及本地?cái)?shù)據(jù)庫(kù)兩種方式支持?jǐn)?shù)據(jù)在瀏覽器本地的存儲(chǔ)。

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

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

2 離線(xiàn)周報(bào)填報(bào)應(yīng)用

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

2.1 應(yīng)用描述

應(yīng)用模擬實(shí)現(xiàn)用戶(hù)填寫(xiě)周報(bào)的場(chǎng)景，用戶(hù)可以查看已填報(bào)的周報(bào)列表，并對(duì)周報(bào)做新建、編輯、刪除操作。

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

2.2 本地保存

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

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

（2）應(yīng)用數(shù)據(jù)。應(yīng)用數(shù)據(jù)的保存可以分為對(duì)原有數(shù)據(jù)的保存和對(duì)離線(xiàn)操作數(shù)據(jù)的保存兩類(lèi)，在數(shù)據(jù)加載和數(shù)據(jù)操作的過(guò)程中完成：

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

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

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

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

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

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

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

分別用local storage和Indexed DB兩種本地?cái)?shù)據(jù)存儲(chǔ)方式進(jìn)行了實(shí)現(xiàn)，相對(duì)于local storage的簡(jiǎn)單易用，Indexed DB在開(kāi)發(fā)實(shí)現(xiàn)上代價(jià)較大，但I(xiàn)ndexed DB的查詢(xún)效率更高，可以支持的數(shù)據(jù)對(duì)象類(lèi)型豐富，能實(shí)現(xiàn)功能更復(fù)雜的應(yīng)用。

2.5 實(shí)現(xiàn)效果

分別在計(jì)算機(jī)和移動(dòng)設(shè)備上進(jìn)行測(cè)試，在計(jì)算機(jī)上Firefox和Chrome可以達(dá)到效果，而IE9不提供離線(xiàn)支持；在移動(dòng)設(shè)備上，瀏覽器不支持Indexed DB方式，local storage方式可以達(dá)到效果。

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

3 結(jié)語(yǔ)

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

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

參考文獻(xiàn)

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

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

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