陳貽品 匡成寶（通訊作者） 湖南高速鐵路職業(yè)技術(shù)學(xué)院

HTML5離線應(yīng)用開發(fā)技術(shù)研究

陳貽品 匡成寶（通訊作者） 湖南高速鐵路職業(yè)技術(shù)學(xué)院

本文在講解HTML5技術(shù)的新特性的同時(shí)著重介紹在網(wǎng)絡(luò)異常時(shí)web應(yīng)用的數(shù)據(jù)處理和解決方法。離線狀態(tài)下的數(shù)據(jù)通過離線資源緩存、在線監(jiān)測(cè)、本地?cái)?shù)據(jù)存儲(chǔ)等三步驟來處理。通過客戶端前期儲(chǔ)存數(shù)據(jù)的技術(shù)比較來改善它的不足，本文通過HTML5的webstorage API的技術(shù)讓客戶端數(shù)據(jù)儲(chǔ)存的開發(fā)方法變得更加的簡(jiǎn)單易行。

HTML Web 離線應(yīng)用

在上世紀(jì)90年代HTML技術(shù)應(yīng)運(yùn)而生。20世紀(jì)90年代末，經(jīng)典的HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)。HTML5的前身是web application 1.0草案，該草案2004年被提出2007年被W3C認(rèn)可。2008年新一代的HTML技術(shù)HTML5在1月22日正式發(fā)布，新技術(shù)在修復(fù)上一代技術(shù)種種問題的同時(shí)增強(qiáng)了多媒體方面的表現(xiàn)，并且增加和廢除了一部分標(biāo)簽。現(xiàn)如今HTML5已解決了瀏覽器對(duì)眾多插件的依賴，并得到了大部分瀏覽器的技術(shù)支持。

1 HTML5關(guān)鍵技術(shù)

創(chuàng)建一個(gè)成熟的應(yīng)用平臺(tái)是HTML5的目標(biāo)，與之前的web相比它還用來表示web的內(nèi)容。本文通過對(duì)離線應(yīng)用的開發(fā)作為研究的重點(diǎn)，對(duì)離線應(yīng)用的特點(diǎn)和技術(shù)的特性進(jìn)行深入的探究分析，通過相關(guān)的研究以后，將現(xiàn)階段web領(lǐng)域中新穎的技術(shù)，進(jìn)行全面的跟蹤和利用，以此來提升HTML5離線應(yīng)用技術(shù)。

2 HTML5的離線應(yīng)用及開發(fā)

2.1 離線資源緩存

在HTML5中可以使用cache manifest來實(shí)現(xiàn)簡(jiǎn)單的靜態(tài)頁面離線資源緩存，具體實(shí)施方法有兩種，分別是手動(dòng)和自動(dòng)兩種緩存更新方式。首先要在cache manifest中列出目標(biāo)緩存資源，在瀏覽器在離線的情況時(shí)將目標(biāo)文件緩存到本地。之后當(dāng)客戶端處于在線的狀態(tài)時(shí)，目標(biāo)文件通過應(yīng)用程序自動(dòng)加載。

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

在開發(fā)基于web應(yīng)用程序的實(shí)際過程中，通常要針對(duì)是否在線來做出相應(yīng)的處置。在HTML5中可以通過兩種方式年檢測(cè)瀏覽器是否在線，分別是Navigator．online屬性和online與offline。Navigator．online屬性為一個(gè)布爾值，當(dāng)在線時(shí)布爾值為true，反之為離線狀態(tài)。通過獲取布爾值確定了當(dāng)前網(wǎng)絡(luò)的在線狀況之后，開發(fā)者根據(jù)不同的情況編寫相應(yīng)的應(yīng)用代碼。

cache manifest緩存資源文件可以實(shí)現(xiàn)用戶離線時(shí)訪問靜態(tài)頁面，但當(dāng)需要完成客戶端處于離線狀態(tài)下的數(shù)據(jù)交互應(yīng)用時(shí)，首先必須要判斷當(dāng)前web的在線狀態(tài)之后客戶端瀏覽器與web服務(wù)器才能實(shí)現(xiàn)數(shù)據(jù)交互。

2.3 本地?cái)?shù)據(jù)儲(chǔ)存

在HTML4和更早的版本中，數(shù)據(jù)一般是通過cookie儲(chǔ)存機(jī)制保存在用戶客戶端的，這種方法有很多的缺陷，例如會(huì)限制數(shù)據(jù)的大小、保密性不強(qiáng)等特點(diǎn)。隨著web應(yīng)用技術(shù)的不斷深入，HTML5為了數(shù)據(jù)能夠在離線與在線狀態(tài)下，更好、更多、更快的儲(chǔ)存到客戶端與同步到服務(wù)器上，HTML5針對(duì)不同的儲(chǔ)存需要提供了兩種新的儲(chǔ)存方式，分別為Web Database與Web SQL Database。Web Database主要功能是臨時(shí)或永久保存客戶端的少量數(shù)據(jù)。Web SQL Database是客戶端本地化的一套數(shù)據(jù)庫系統(tǒng)，可將大量的數(shù)據(jù)保存在客戶端。

2.4 webstorage存儲(chǔ)

在HTML5中web儲(chǔ)存分兩種，分別是localStorage與sessionStorage。所以localStorage與sessionStorage的區(qū)別在于后者保存當(dāng)前訪問的頁面。Webstorage頁面儲(chǔ)存是HTML5中的一項(xiàng)重要技術(shù)，它的主要作用是將數(shù)據(jù)儲(chǔ)存在客戶端，區(qū)分長期數(shù)據(jù)和會(huì)話數(shù)據(jù)可以通過WebstorageAPI來實(shí)現(xiàn)，所以對(duì)應(yīng)的API分sessionStorage(保存會(huì)話數(shù)據(jù))、localStorage（在客戶端長期保存數(shù)據(jù))

2.5 IndexedDB

IndexedDB是一種數(shù)據(jù)庫，是用來將結(jié)構(gòu)化數(shù)據(jù)儲(chǔ)存到瀏覽器中的。IndexedDB開發(fā)了一套API支持搜索查詢并且還能夠方便的存取JavaSeript對(duì)象。HTML5－WebStorage中的一個(gè)重要環(huán)節(jié)就是IndexedDB，是一種輕量級(jí)NOSQL數(shù)據(jù)庫，W3C給IndexedDB定義了許多的接口，Database對(duì)象定義成IDBDataBase，從IDBFactory中可以獲得IDBDataBase。瀏覽器對(duì)象中只有indexedDB這個(gè)實(shí)例實(shí)現(xiàn)了IDBFactory。

3 小結(jié)

本文通過HTML5的離線應(yīng)用特性解決了當(dāng)網(wǎng)絡(luò)連接異常時(shí)的離線數(shù)據(jù)儲(chǔ)存，從離線數(shù)據(jù)應(yīng)用的實(shí)際情況開始，通過離線資源緩存、在線檢測(cè)、本地?cái)?shù)據(jù)存儲(chǔ)等過程，探討在怎么實(shí)現(xiàn)離線狀態(tài)下交互式頁面客戶端數(shù)據(jù)存儲(chǔ)和靜態(tài)頁面離線資源緩存，并為web應(yīng)用在離線時(shí)的開發(fā)提出了有效的做法，相信隨著時(shí)代的不斷發(fā)展，HTML5終會(huì)越來越成熟。

[1]龍奇．新一代網(wǎng)絡(luò)技術(shù)標(biāo)準(zhǔn)HTML5的研究［J］．科學(xué)信息，2011(10):245

[2]黃永慧，陳程凱．HTML5在移動(dòng)應(yīng)用開發(fā)上的應(yīng)用前景［J］．計(jì)算機(jī)技術(shù)與發(fā)展，2013(7)：207-210