劉耀欽

(鄖陽(yáng)師范高等專(zhuān)科學(xué)校 計(jì)算機(jī)科學(xué)系，湖北 十堰 442000)

?

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

劉耀欽

(鄖陽(yáng)師范高等專(zhuān)科學(xué)校 計(jì)算機(jī)科學(xué)系，湖北 十堰 442000)

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

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

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

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

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

1離線資源緩存

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

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

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

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

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

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

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īng)瀏覽器的在線狀態(tài)

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

2.2緩存更新

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

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

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

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

}

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

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

3.1DOM Storage

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

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

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

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

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

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

}

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

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

} } else {

SessionStorage，} //瀏覽器不支持

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

3.2WebSQL Storage

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

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

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

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

else { alert("數(shù)據(jù)庫(kù)創(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個(gè)參數(shù)，第1個(gè)表示需要執(zhí)行的SQL語(yǔ)句，第2個(gè)表示插入到查詢(xún)語(yǔ)句中問(wèn)號(hào)( )所在處的數(shù)據(jù)，第3個(gè)和第4個(gè)表示執(zhí)行成功和失敗時(shí)返回的結(jié)果.

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

dataConn.transaction(function (tx) {

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

[1, ‘pido’],//第1個(gè)問(wèn)號(hào)用1代替，第2個(gè)問(wèn)號(hào)用pido代替

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

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

} ); });

4結(jié)語(yǔ)

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

參考文獻(xiàn)：

[1]朱遠(yuǎn)文，張煜，常暢．基于Cookie的安全防護(hù)技術(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].長(zhǎng)春工業(yè)大學(xué)學(xué)報(bào)：自然科學(xué)版，2013，5(34)：587-590.

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

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

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

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

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

[9]徐寶磊，王安志．基于Session的單點(diǎn)登錄系統(tǒng)研究與設(shè)計(jì)[J].重慶文理學(xué)院學(xué)報(bào)：自然科學(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

作者簡(jiǎn)介：劉耀欽(1980-)，男，河南禹州人，講師，碩士，主要研究方向?yàn)樾畔踩cWeb存儲(chǔ)技術(shù).

基金項(xiàng)目：鄖陽(yáng)師范高等專(zhuān)科學(xué)校2014年重點(diǎn)科研項(xiàng)目(2014A01)

收稿日期：2014-10-15

中圖分類(lèi)號(hào)：TP311

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

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