HTML5離線應用開發技術研究

陳貽品 匡成寶（通訊作者） 湖南高速鐵路職業技術學院

HTML5離線應用開發技術研究

陳貽品 匡成寶（通訊作者） 湖南高速鐵路職業技術學院

本文在講解HTML5技術的新特性的同時著重介紹在網絡異常時web應用的數據處理和解決方法。離線狀態下的數據通過離線資源緩存、在線監測、本地數據存儲等三步驟來處理。通過客戶端前期儲存數據的技術比較來改善它的不足，本文通過HTML5的webstorage API的技術讓客戶端數據儲存的開發方法變得更加的簡單易行。

HTML Web 離線應用

在上世紀90年代HTML技術應運而生。20世紀90年代末，經典的HTML4成為互聯網標準。HTML5的前身是web application 1.0草案，該草案2004年被提出2007年被W3C認可。2008年新一代的HTML技術HTML5在1月22日正式發布，新技術在修復上一代技術種種問題的同時增強了多媒體方面的表現，并且增加和廢除了一部分標簽。現如今HTML5已解決了瀏覽器對眾多插件的依賴，并得到了大部分瀏覽器的技術支持。

1 HTML5關鍵技術

創建一個成熟的應用平臺是HTML5的目標，與之前的web相比它還用來表示web的內容。本文通過對離線應用的開發作為研究的重點，對離線應用的特點和技術的特性進行深入的探究分析，通過相關的研究以后，將現階段web領域中新穎的技術，進行全面的跟蹤和利用，以此來提升HTML5離線應用技術。

2 HTML5的離線應用及開發

2.1 離線資源緩存

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

2.2 在線狀態檢測

在開發基于web應用程序的實際過程中，通常要針對是否在線來做出相應的處置。在HTML5中可以通過兩種方式年檢測瀏覽器是否在線，分別是Navigator．online屬性和online與offline。Navigator．online屬性為一個布爾值，當在線時布爾值為true，反之為離線狀態。通過獲取布爾值確定了當前網絡的在線狀況之后，開發者根據不同的情況編寫相應的應用代碼。

cache manifest緩存資源文件可以實現用戶離線時訪問靜態頁面，但當需要完成客戶端處于離線狀態下的數據交互應用時，首先必須要判斷當前web的在線狀態之后客戶端瀏覽器與web服務器才能實現數據交互。

2.3 本地數據儲存

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

2.4 webstorage存儲

在HTML5中web儲存分兩種，分別是localStorage與sessionStorage。所以localStorage與sessionStorage的區別在于后者保存當前訪問的頁面。Webstorage頁面儲存是HTML5中的一項重要技術，它的主要作用是將數據儲存在客戶端，區分長期數據和會話數據可以通過WebstorageAPI來實現，所以對應的API分sessionStorage(保存會話數據)、localStorage（在客戶端長期保存數據)

2.5 IndexedDB

IndexedDB是一種數據庫，是用來將結構化數據儲存到瀏覽器中的。IndexedDB開發了一套API支持搜索查詢并且還能夠方便的存取JavaSeript對象。HTML5－WebStorage中的一個重要環節就是IndexedDB，是一種輕量級NOSQL數據庫，W3C給IndexedDB定義了許多的接口，Database對象定義成IDBDataBase，從IDBFactory中可以獲得IDBDataBase。瀏覽器對象中只有indexedDB這個實例實現了IDBFactory。

3 小結

本文通過HTML5的離線應用特性解決了當網絡連接異常時的離線數據儲存，從離線數據應用的實際情況開始，通過離線資源緩存、在線檢測、本地數據存儲等過程，探討在怎么實現離線狀態下交互式頁面客戶端數據存儲和靜態頁面離線資源緩存，并為web應用在離線時的開發提出了有效的做法，相信隨著時代的不斷發展，HTML5終會越來越成熟。

[1]龍奇．新一代網絡技術標準HTML5的研究［J］．科學信息，2011(10):245

[2]黃永慧，陳程凱．HTML5在移動應用開發上的應用前景［J］．計算機技術與發展，2013(7)：207-210