基于HTML5的Web離線應(yīng)用研究與探討

劉耀欽

(鄖陽師范高等?？茖W(xué)校 計算機科學(xué)系，湖北 十堰 442000)

?

基于HTML5的Web離線應(yīng)用研究與探討

劉耀欽

(鄖陽師范高等?？茖W(xué)校 計算機科學(xué)系，湖北 十堰 442000)

摘要：HTML5是一種構(gòu)建Web內(nèi)容的語言描述方式，它賦予了網(wǎng)頁更好的意義和結(jié)構(gòu).隨著基于HTML的Web應(yīng)用程序的大規(guī)模應(yīng)用，開發(fā)人員經(jīng)常會遇到以離線為背景的Web數(shù)據(jù)存儲的問題.HTML5提供了Web Storage和Web DataBase兩種離線存儲機制，分別用于存儲key/value和復(fù)雜交互式的數(shù)據(jù)，與Cookie技術(shù)相比有較大的存儲容量和較高的存取效率，有效解決了離線數(shù)據(jù)的存儲與服務(wù)器同步的問題.

關(guān)鍵詞：HTML5；離線存儲；資源緩存；manifest；WebSQL

Web離線存儲是一種基于互聯(lián)網(wǎng)媒體的數(shù)據(jù)存儲，它有別于傳統(tǒng)瀏覽器端的HTTP Cookies[1]存儲機制，不同瀏覽器對Web數(shù)據(jù)存儲的支持力度也各不相同.HTML5的Web離線應(yīng)用機制有效解決了離線時Web應(yīng)用程序的完整訪問和數(shù)據(jù)同步到服務(wù)器的問題，將用戶瀏覽過的頁面和輸入的數(shù)據(jù)存儲于客戶端，當(dāng)Web應(yīng)用程序離線時便從客戶端獲取這些數(shù)據(jù)并進行相應(yīng)組合呈現(xiàn)給用戶.

HTML5是構(gòu)建Web內(nèi)容的一種語言描述方式[2]，它提供了Web Storage和Web DataBase兩種本地存儲方案，其中Web Storage用于存儲key/value對形式的數(shù)據(jù)，是一種大規(guī)模、安全易用的存儲機制，分為sessionStorage和localStorage兩類[3]；Web DataBase以關(guān)系數(shù)據(jù)庫為基礎(chǔ)，可以實現(xiàn)較為復(fù)雜的交互式Web數(shù)據(jù)存儲.一個完整的Web離線應(yīng)用程序需要有離線資源緩存、在線狀態(tài)檢測和本地數(shù)據(jù)存儲3部分的支持.

圖1　緩存文件結(jié)構(gòu)Fig.1　Cache file structure

1離線資源緩存

為了使業(yè)務(wù)邏輯能夠離線運行[4]，需要事先指定應(yīng)用程序在離線工作時所需的資源文件，當(dāng)離線訪問時，瀏覽器會自動加載這些被緩存過的資源文件.HTML5通過應(yīng)用緩存(Application Cache)接口指定cache manifest[5]為存儲應(yīng)用程序需要被離線緩存的資源列表文件，當(dāng)首次訪問該站點時，瀏覽器會將資源列表映射的文件存儲在客戶端緩存，直至資源列表文件本身被更新時才會重新緩存指定的資源文件.實際應(yīng)用時，該文件被命名為擴展名為manifest或appcache的文件，一個完整的緩存文件分為cache manifest標(biāo)識，cache，network和fallback共4個部分，其文件結(jié)構(gòu)如圖1所示.

圖1中的第1部分指緩存文件標(biāo)識，是整個緩存文件的必要部分；第2部分表示需要緩存的資源文件列表，當(dāng)站點被成功訪問一次后，列表中的文件就會被緩存于客戶端，以后訪問該站點時，均會從客戶端讀取這些已經(jīng)被緩存過的資源文件，直到緩存文件本身被更新或瀏覽器清空了緩存；第3部分用來指定必須在線才能訪問的文件，比如一些需要在服務(wù)器端處理的文件，如果這樣的文件很多，可以用白名單通配符“*”來表示，除了第2部分列表文件外的其他所有文件均需要在線訪問；第4部分用來指定當(dāng)沒有找到緩存文件時的替代方案，用“URL1 URL2”形式表示，當(dāng)在瀏覽器緩存中沒有找到URL1指定的資源時，將用URL2指定的資源替代輸出.實際使用時需要得到兩方面的支持，一是需要在服務(wù)器端添加緩存支持，二是需要指定網(wǎng)頁中的元素manifest屬性值來設(shè)定緩存文件.

2狀態(tài)檢測與緩存更新

對純靜態(tài)的Web站點而言，離線存儲的應(yīng)用非常簡單，而在實際工作中往往會遇到很多交互性很強的Web應(yīng)用程序，這就要應(yīng)用程序具有判斷是否離線的功能，從而決定發(fā)送交互數(shù)據(jù)到服務(wù)器還是瀏覽器.另外，不斷測試發(fā)現(xiàn)，即便更新了存儲于服務(wù)器上的緩存文件本身，也不能引起瀏覽器輸出的變化，這是因為當(dāng)Web站點被訪問一次后，以后的若干次訪問均會從客戶端而不是服務(wù)器端讀取相應(yīng)的資源，直到檢測到manifest文件本身發(fā)生更新或清空瀏覽器緩存文件.

2.1在線狀態(tài)檢測

很多Web應(yīng)用程序均包含BS交互的頁面，即需要用戶通過瀏覽器端輸入數(shù)據(jù)后提交給服務(wù)器端處理，所以還需要提供是否在線的判斷機制，使用戶知道提交的數(shù)據(jù)是存儲于服務(wù)器端還是瀏覽器端.HTML5提供了online/offline兩種事件[6]用來監(jiān)聽瀏覽器狀態(tài)，通過將這兩個事件綁定到body，document和window對象上進而監(jiān)測navigator.online屬性的值來判斷是否在線，程序如下：

var lineStatus = document.getElementById(‘line-status’); //獲取id為line-status的元素

var updateLineStatus = function(event) {

if (navigator.onLine) //用于判斷在線或離線

{

lineStatus.style.backgroundColor =‘green’;//如果在線，則將line-status元素背景色設(shè)置為綠色

lineStatus.innerHTML = ‘online’;//在line-status元素內(nèi)部放置online文本

} else {

lineStatus.style.backgroundColor = ‘red’;//如果離線，則設(shè)置line-status元素背景色為紅色

lineStatus.innerHTML = ‘offline’;//在line-status元素內(nèi)部放置offline文本

}

}

updateLineStatus();

document.body.addEventListener(‘online’, updateLineStatus, false); //監(jiān)聽瀏覽器的在線狀態(tài)

document.body.addEventListener(‘offline’, updateLineStatus, false);//監(jiān)聽瀏覽器的離線狀態(tài)

2.2緩存更新

當(dāng)配備有離線緩存技術(shù)的Web應(yīng)用程序被初次訪問后，瀏覽器就會自動緩存被設(shè)置為離線存儲的資源，直至瀏覽器清空緩存或manifest文件本身被更新才會從服務(wù)器重新加載這些緩存文件，這種通過更改manifest文件本身引起的更新方式被稱為自動更新.HTML5還提供了另外一種更新方式，這種方式使用window.applicationCache接口更新緩存，它通過檢測window.applicationCache.status的值來判斷是否需要更新緩存，程序如下：

if (window.applicationCache.status == window.applicationCache.UPDATEREADY)

{//如果應(yīng)用程序緩存的狀態(tài)需要更新

window.applicationCache.update(); //調(diào)用更新緩存函數(shù)更新緩存

}

3Web數(shù)據(jù)的本地存儲

Web數(shù)據(jù)的本地存儲是指離線時將BS交互數(shù)據(jù)存儲于瀏覽器端，等網(wǎng)絡(luò)恢復(fù)時再把這些數(shù)據(jù)[7]同步到服務(wù)器，比如在規(guī)定時間之前需要將某班級學(xué)生成績?nèi)枯斎氩⑻峤唤o服務(wù)器，可就在提交瞬間網(wǎng)絡(luò)中斷，如果應(yīng)用程序配置了離線存儲功能，離線存儲機制就會把輸入的數(shù)據(jù)臨時存儲于瀏覽器端緩存，等網(wǎng)絡(luò)恢復(fù)時再從緩存中讀取這些數(shù)據(jù)并同步給服務(wù)器,否則數(shù)據(jù)就會完全丟失.基于HTML5的離線存儲有DOM Storage和WebSQL Storage兩種機制[8]，分別以key/value和本地數(shù)據(jù)庫的形式持久存儲數(shù)據(jù).

3.1DOM Storage

DOM Storage是指基于客戶端的數(shù)據(jù)存儲，它有更大的存儲容量和較靈活的存儲方式，它通過一種標(biāo)準(zhǔn)接口而不是直接請求服務(wù)器來訪問數(shù)據(jù).DOM Storage的API提供了SessionStorage和LocalStorage兩種安全保存數(shù)據(jù)的方法，SessionStorage是一種會話級別的存儲，它將數(shù)據(jù)存儲于Session對象[9]中，一旦會話結(jié)束，Session對象存儲的內(nèi)容即失效，通常用于存儲單事務(wù)數(shù)據(jù)或與頁面緊密相關(guān)且隨會話存在而存在的數(shù)據(jù)；LocalStorage是一種基于域的持久存儲數(shù)據(jù)的方式，這些數(shù)據(jù)會永久保存于客戶端中，直到緩存清空或程序明確刪除.雖然如此，由于瀏覽器存儲域的不同，不同瀏覽器間不會共享這些已經(jīng)存儲的數(shù)據(jù)，以下程序段展示了從緩存讀取姓名和年齡值到表單中的過程：

if (window.SessionStorage) {//如果瀏覽器支持SessionStorage

var name = window.SessionStorage.getItem("name"); //獲取已經(jīng)緩存過的name值

var age = window.SessionStorage.getItem("age"); //獲取已經(jīng)緩存過的age值

if (name != "" ‖ name !=null){ //如果name不為空或name存在

document.getElementById("name").value = name; //將name值賦給Web頁面id為name的元素

}

if (age !="" ‖ age !=null){ //如果age不為空或age存在

document.getElementById("age").value = age;//將age的值賦給Web頁面id為age的元素

} } else {

SessionStorage，} //瀏覽器不支持

DOM Storage存儲機制將字符串以鍵/值對的形式安全存儲，所有存儲于Storage對象中的數(shù)據(jù)均以字符串形式存在.

3.2WebSQL Storage

WebSQL是一個基于Transaction-SQL的數(shù)據(jù)庫，可以存儲復(fù)雜的關(guān)系型數(shù)據(jù).WebSQL有openDatabase,transaction和executeSql這3個核心方法，openDatabase用于使用現(xiàn)有數(shù)據(jù)庫或創(chuàng)建新數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫對象，transaction用于控制事務(wù)提交和回滾操作，executeSql用于具體的SQL語句.在具體使用時，會涉及創(chuàng)建/打開/連接數(shù)據(jù)庫、創(chuàng)建表、操作表等操作，以下示例說明了這些常用操作的使用方法：

第1步，打開/創(chuàng)建/連接數(shù)據(jù)庫.

var dataConn = openDatabase("person", "1.0", "人員表", 1 024 * 1 024, function () { });//person是數(shù)據(jù)庫名，1.0是數(shù)據(jù)庫版本，人員表是指數(shù)據(jù)庫具體描述信息,1 024*1 024是數(shù)據(jù)庫容量，function()是指回調(diào)函數(shù)(可以省略)

if (!dataConn) { alert("數(shù)據(jù)庫創(chuàng)建失??！");}

else { alert("數(shù)據(jù)庫創(chuàng)建成功！");}

第2步，創(chuàng)建數(shù)據(jù)表.

dataConn.transaction( function(tx) {

tx.executeSql(

"create table if not exists perInfo (per_Id REAL UNIQUE, per_Name TEXT)",

[],

function(tx,result){ alert(‘創(chuàng)建perInfo表成功’); },

function(tx, error){ alert(‘創(chuàng)建perInfo表失敗:’+error.message);

}); });

executeSql()函數(shù)有4個參數(shù)，第1個表示需要執(zhí)行的SQL語句，第2個表示插入到查詢語句中問號( )所在處的數(shù)據(jù)，第3個和第4個表示執(zhí)行成功和失敗時返回的結(jié)果.

第3步，操作表(以插入數(shù)據(jù)為例).

dataConn.transaction(function (tx) {

tx.executeSql("insert into perInfo (per_Id, per_Name) values( , )",

[1, ‘pido’],//第1個問號用1代替，第2個問號用pido代替

function () { alert(‘添加數(shù)據(jù)成功’); },

function (tx, error) { alert(‘添加數(shù)據(jù)失敗: ’+error.message);

} ); });

4結(jié)語

Web應(yīng)用程序的離線應(yīng)用通常包括文件資源緩存和BS交互數(shù)據(jù)存儲兩部分.HTML5提供的Web Storage和Web DataBase Storage兩種離線存儲機制不僅可以實現(xiàn)資源文件的客戶端存儲，還可以實現(xiàn)BS交互數(shù)據(jù)的持久存儲.在應(yīng)用程序根目錄下配置manifest文件的Cache段參數(shù)來實現(xiàn)資源文件的存儲，對于其他BS交互數(shù)據(jù)既可以用DOM Storage實現(xiàn)，也可以用WebSQL Storage實現(xiàn).這種數(shù)據(jù)庫最大的特點是可以使用客戶端腳本JS來創(chuàng)建、打開并操作數(shù)據(jù)庫或數(shù)據(jù)表.基于HTML5的離線存儲機制不僅實現(xiàn)了網(wǎng)絡(luò)資源的脫機訪問，而且有效地解決了Web數(shù)據(jù)的脫機存儲和網(wǎng)絡(luò)恢復(fù)時數(shù)據(jù)同步服務(wù)器的問題，在Web應(yīng)用程序的開發(fā)中有著較強的實用價值.

參考文獻：

[1]朱遠(yuǎn)文，張煜，常暢．基于Cookie的安全防護技術(shù)研究[J].信息網(wǎng)絡(luò)安全，2012(9)：46-49.

[2]李慧云，何震葦，李麗．HTML5技術(shù)與應(yīng)用模式研究[J].電信科學(xué)，2012(5)：24-29.

[3]胡晶，董航．HTML5核心Web技術(shù)分析[J].長春工業(yè)大學(xué)學(xué)報：自然科學(xué)版，2013，5(34)：587-590.

[4]羅大暉，陳娟．基于HTML5的Web離線應(yīng)用研究與實現(xiàn)[J].計算機應(yīng)用與軟件，2012，12(29)：262-264,305.

[5]張永瑞．基于HTML5的Web離線技術(shù)在技能訓(xùn)練導(dǎo)學(xué)平臺中的應(yīng)用[J].長江大學(xué)學(xué)報:自然科學(xué)版，2013，10(28)：37-39.

[6]蹇紅梅．Web平臺下的基于HTML5標(biāo)準(zhǔn)離線應(yīng)用開發(fā)[J].四川理工學(xué)院學(xué)報：自然科學(xué)版，2012，5(25)：41-44.

[7]張青鳳，張鳳琴，王磊．多數(shù)據(jù)中心的數(shù)據(jù)同步模型研究與設(shè)計[J].微型機與應(yīng)用，2013，32(12)：60-62，66.

[8]盧遠(yuǎn)征，葉曉彤．XML的DOM樹結(jié)構(gòu)在WEB挖掘中的應(yīng)用[J].四川理工學(xué)院學(xué)報： 自然科學(xué)版，2013，26(3)：64-67.

[9]徐寶磊，王安志．基于Session的單點登錄系統(tǒng)研究與設(shè)計[J].重慶文理學(xué)院學(xué)報：自然科學(xué)版，2012，31(2)：75-77.

Research and discussion of web offline application based on HTML5

LIU Yaoqin

(DepartmentofComputerScience,YunyangTeachers′College,Shiyan442000,China)

Abstract:HTML5 is seen as a language description way of constructing Webpage content, which gives the Webpage meaning and structure better. With the large-scale application of HTML Web application, developers often encounter the problems of storing Web data background to offline, HTML5 provides Web Storage and Web Database Storage mechanism, which are respectively used for storing the key/value and complex interactive data, it has larger storage capacity and higher effectiveness than cookie technology, so the offline data storage and server synchronization problems are solved efficiently.

Key words:HTML5; offline storage; resource cache; manifest; WebSQL

作者簡介：劉耀欽(1980-)，男，河南禹州人，講師，碩士，主要研究方向為信息安全與Web存儲技術(shù).

基金項目：鄖陽師范高等?？茖W(xué)校2014年重點科研項目(2014A01)

收稿日期：2014-10-15

中圖分類號：TP311

文獻標(biāo)志碼：A

文章編號：1674-330X(2015)01-0077-04