瞿蘇

（江蘇聯(lián)合職業(yè)技術(shù)學(xué)院揚(yáng)州商務(wù)分院信息電子系，江蘇揚(yáng)州225000）

?

基于HTML5構(gòu)建離線Web應(yīng)用的研究與探討

瞿蘇

（江蘇聯(lián)合職業(yè)技術(shù)學(xué)院揚(yáng)州商務(wù)分院信息電子系，江蘇揚(yáng)州225000）

摘要：HTML5是一種構(gòu)建Web內(nèi)容的語言描述方式，它賦予了網(wǎng)頁更好的意義和結(jié)構(gòu)。隨著基于HTML的Web應(yīng)用程序的大規(guī)模應(yīng)用，開發(fā)人員經(jīng)常遇到以離線為背景的Web數(shù)據(jù)存儲(chǔ)的問題。主要介紹了用戶在離線的情況下，可以采用HTML5的離線Web功能訪問網(wǎng)站的技術(shù)。

關(guān)鍵詞：HTML5；離線Web；manifest

HTML離線Web應(yīng)用，主要是通過應(yīng)用程序緩存整個(gè)離線網(wǎng)站的HTML、CSSJAVASCRPIT、網(wǎng)站圖像和資源。當(dāng)服務(wù)器沒有和Internet建立連接，也可以利用本地緩存中的資源文件來正常運(yùn)行Web應(yīng)用程序。如果網(wǎng)站發(fā)生了變化，應(yīng)用程序緩存將重新加載變化的數(shù)據(jù)文件［1］。瀏覽器網(wǎng)頁緩存與本地緩存的區(qū)別如下：

（1）瀏覽器網(wǎng)頁緩存主要是為了加快網(wǎng)頁加載的速度，所以會(huì)對(duì)每一個(gè)打開的網(wǎng)頁都進(jìn)行緩存操作。而本地緩存是為整個(gè)Web應(yīng)用程序服務(wù)的，其只緩存那些指定緩存的網(wǎng)頁。

（2）在網(wǎng)絡(luò)連接的情況下，瀏覽器網(wǎng)頁緩存一個(gè)頁面的所有文件，但是一旦離線，用戶單擊鏈接時(shí)將會(huì)得到一個(gè)錯(cuò)誤消息。而本地緩存在離線時(shí)，仍然可以正常訪問。

（3）對(duì)于網(wǎng)頁瀏覽者而言，瀏覽器網(wǎng)頁緩存了哪些內(nèi)容和資源、這些內(nèi)容是否安全可靠等都不知道。而本地緩存的頁面是編程人員指定的內(nèi)容，所以在安全方面相對(duì)可靠了許多。

作為最新的HTML標(biāo)記語言，HTML5的目的是取代老版本的標(biāo)記語言，所以幾乎適用于所有老版本的范圍。

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

1　使用HTML5　離線Web應(yīng)用API

1.1檢查瀏覽器的支持情況

不同的瀏覽器版本對(duì)離線應(yīng)用技術(shù)的支持情況是不同的，不同的瀏覽器不可以讀取同一個(gè)Web中存儲(chǔ)的數(shù)據(jù)，在Web存儲(chǔ)時(shí)，不同的瀏覽器將存儲(chǔ)在不同的Web存儲(chǔ)庫中，如果用戶使用的是IE瀏覽器，那么Web存儲(chǔ)工作時(shí)，將所有的數(shù)據(jù)存儲(chǔ)在IE的Web存儲(chǔ)中，如果用戶再次使用Firefox瀏覽器訪問該站點(diǎn)，將不能讀取IE瀏覽器存儲(chǔ)的數(shù)據(jù)，每個(gè)瀏覽器的存儲(chǔ)是分開并獨(dú)立工作的。使用離線Web應(yīng)用API前最好先檢查瀏覽器是否支持。檢查瀏覽器是否支持的代碼如下：

If（windows.applicationcache）｛//瀏覽器支持離線應(yīng)用｝

1.2搭建簡單的離線應(yīng)用程序

為了使一個(gè)包含HTML文檔、CSS樣式表和javascript腳本文件的單頁面應(yīng)用支持程序支持離線應(yīng)用，需要在HTML 5元素中加入manifest特性，具體代碼如下：

執(zhí)行以上代碼可以提供一個(gè)存儲(chǔ)的緩存空間，但是不能完成離線應(yīng)用程序的使用，還需要指明哪些資源可以享用這些緩存空間，即提供一個(gè)緩沖清單文件，以下包含了四種類型的資源對(duì)象文件。

1.3支持離線行為

要支持離線行為，首先判斷是否處于網(wǎng)絡(luò)連接狀態(tài)，HTML5中引入了一些判斷應(yīng)用程序網(wǎng)絡(luò)連接是否正常的新事件。對(duì)應(yīng)應(yīng)用程序的在線狀態(tài)和離線狀態(tài)，會(huì)有不同的行為模式。

用于實(shí)現(xiàn)在線狀態(tài)監(jiān)測(cè)的是window.navigator對(duì)象的屬性［3］。其中.navigator.online屬性是一個(gè)表明瀏覽器是否處于在線狀態(tài)的布爾屬性，當(dāng)online值為true時(shí)，并不能保證Web應(yīng)用程序在用戶的機(jī)器上一定可以訪問到相應(yīng)的服務(wù)器，而當(dāng)其值為false時(shí)，不管瀏覽器是否真正連網(wǎng)，應(yīng)用程序都不會(huì)嘗試進(jìn)行網(wǎng)絡(luò)連接。

監(jiān)測(cè)頁面狀態(tài)是在線還是離線的具體代碼如下（該代碼可以在IE瀏覽器中使用）：

1.4manifest文件

客戶端的瀏覽器是如何知道應(yīng)該緩存哪些文件呢？這就需要依靠manifest文件來管理［3］，manifest文件是一個(gè)簡單的文本文件，其中以清單的形式列舉了需要被緩存或不需要緩存的資源文件的文件名稱，以及這些資源文件的訪問路徑，用戶可以為每一個(gè)頁面單獨(dú)指定一個(gè)manifest文件，也可以對(duì)整個(gè)應(yīng)用程序指定一個(gè)總的manifest文件。

manifest文件把指定的資源文件分為3類，分別是：“CACHE”、“NETWORK”、“FALLBACK”。其含義分別如下：

（1）CACHE：該類別指定需要被緩存在本地的資源文件。如果為某個(gè)頁面指定需要本地緩存的資源文件，就不需要把這個(gè)頁面本身指定在類型中，因?yàn)槿绻粋€(gè)頁面具有文件，瀏覽器會(huì)自動(dòng)對(duì)它進(jìn)行本地緩存。

（2）NETWORK：該類別為不進(jìn)行本地緩存的資源文件，這些資源文件只有當(dāng)客戶端與服務(wù)器端建立連接的時(shí)候才能訪問。

（3）FALLBACK：該類別中指定兩個(gè)資源文件，其中一個(gè)為能夠在線訪問時(shí)使用的資源文件，另一個(gè)為不能在線訪問時(shí)使用的備用資源文件。

1.5ApplicationCache API

傳統(tǒng)的Web程序中瀏覽器也會(huì)對(duì)資源文件進(jìn)行cache，但并不是很可靠，有時(shí)會(huì)達(dá)不到預(yù)期的效果。而HTML5中的ApplicationCache支持離線資源的訪問，為離線應(yīng)用的開發(fā)提供了可能。

使用ApplicationCache API的好處有以下幾點(diǎn)：用戶可以在離線時(shí)繼續(xù)使用；緩存到本地，節(jié)省帶寬，加速用戶體驗(yàn)的反饋；減輕服務(wù)器的負(fù)載。

ApplicationCache API是一個(gè)操作應(yīng)用緩存的接口，是Windows對(duì)象的直接子對(duì)象window. ApplicationCache，window. ApplicationCache對(duì)象可以觸發(fā)一系列與緩存狀態(tài)相關(guān)的事件，具體如表1所示。

表1　

window.ApplicationCache有3個(gè)方法：1）update（）發(fā)起應(yīng)用程序緩存下載進(jìn)程，調(diào)用update（）方法會(huì)請(qǐng)求瀏覽器更新緩存，包括檢查新版本的manifest文件并下載必要的新資源。如沒有緩存或者緩存已過期，則會(huì)拋出錯(cuò)誤；2）abort（）取消正在進(jìn)行的緩存下載；3）swapcache（）切換成本地最新的緩存環(huán)境。

2　結(jié)語

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

參考文獻(xiàn)：

［1］羅大暉，陳娟.基于HTML5的WEB離線應(yīng)用研究與實(shí)現(xiàn)［J］.計(jì)算機(jī)應(yīng)用與軟件，2012，12（29）∶262-264，305.

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

［3］尹樂，許剛強(qiáng).基于HTML5的離線Web應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)［J］.中國高新技術(shù)企業(yè)，2014（12）∶17-19.

［4］劉耀欽.基于HTML5的WEB離線應(yīng)用研究與探討［J］.河南工程學(xué)院學(xué)報(bào)∶自然科學(xué)版，2015（1）∶77-80.

【責(zé)任編輯：王桂珍foshanwgzh@163.com】

The research of building offline web application based on the HTML 5

QV Su
（Department of Information Electronics，Yangzhou Commerce Higher Occupation School of Jiangsu Union Technical Institute，Yangzhou 225000，China）

Abstract∶It is a way of building Web content language description，it gives the meaning and structure of Web page better. With the large-scale application of HTML based Web applications，developers often encountered on the background of offline Web data storage problem. This text mainly introduces how the user in the case of offline using HTML 5 offline web function to access the website.

Key words∶HTML5；offline web；manifest

中圖分類號(hào)：TP393.2

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

文章編號(hào)：1008-0171（2016）03-0061-04

收稿日期：2015-12-15

作者簡介：瞿蘇（1982-），女，江蘇揚(yáng)州人，江蘇聯(lián)合職業(yè)技術(shù)學(xué)院揚(yáng)州商務(wù)分院講師。