基於HTML5的離線Web應用設計與實現
研究設計
作者：尹樂 許剛強
摘要：文章主要介紹利用HTML5提供的緩存控製機製和本地存儲支持構建離線Web應用。介紹HTML5標準中提供的緩存文件清單、網絡狀態檢測、Web Storage、IndexedDB等與離線應用有關的功能，以一個填報周報的應用場景介紹HTML5離線Web應用的實現方式，並對localstorage和IndexedDB兩種本地存儲實現方式進行了對比。
關鍵詞：RIA；HTML5；離線Web應用
中圖分類號：TP393 文獻標識碼：A 文章編號：1009-2374（2014）12-0017-03
隨著Web技術的不斷發展，構建在B/S架構上的Web應用程序在很多領域得到了廣泛的應用。使用Web應用程序需要用戶和服務器建立連接，否則B/S應用程序無法正常運行。
要實現離線Web應用，可用的技術手段包括脫機瀏覽、Flash/Flex、Google Gears、HTML5等。其中HTML5方式具有可跨平台、不需要安裝插件、提供一致的用戶體驗等優勢。通過HTML5提供的離線支持，用戶在掉線的情況下仍然能使用Web應用提供的部分功能，適用於網絡環境較差的情況或是移動應用領域。
1 HTML5離線應用
1.1 HTML5簡介及現狀
HTML5是新一代的HTML標準版本，強化了 Web 網頁的表現性能和Web應用的功能，通過HTML、CSS和JavaScript的技術組合，開發富互聯網應用（RIA），提升用戶體驗。
HTML5正在不斷的發展和完善中。2013年5月，HTML 5.1正式草案公布。目前大部分主流瀏覽器廠商都對HTML5提供了支持，如Firefox、IE、Chrome、Safari等。
1.2 HTML5緩存控製機製
引入網絡狀態檢測事件以及離線Web應用API，使基於Web技術構建的Web應用程序可以在脫機情況下使用。
（1）緩存清單文件。通過manifest屬性指定緩存清單文件，按照特定格式列出哪些資源脫機時可用，這些資源構成了應用緩存，在需要的時候資源可以從應用緩存中加載。
（2）網絡狀態檢測事件。通過online屬性判斷當前是否處於在線狀態，實現在線狀態和離線狀態的不同行為模式。引入離線事件用來檢測網絡連接狀態，通過對事件的監聽，實現應用程序在線和離線自動切換。
（3）應用緩存API。定義一係列應用緩存API，用來作為操作應用緩存的接口，可以自行控製應用緩存的使用。
1.3 HTML5數據存儲支持
構建離線Web應用，要解決數據的本地緩存問題。HTML5提供了Web Storage以及本地數據庫兩種方式支持數據在瀏覽器本地的存儲。
（1）Web Storage。Web Storage采用“鍵-值”對的形式存取數據，可以將數兆字節的大數據存儲在Javas cript對象中。分為local Storage和session Storage兩種，主要的差異是數據的保存時長及共享方式。
（2）本地數據庫。HTML5規範中，由瀏覽器提供本地數據庫的支持，無需另外安裝數據庫。關於本地數據庫仍在完善中，目前有Web SQL Database和Indexed Database兩個主要的方案。
2 離線周報填報應用
通過緩存控製機製以及數據存儲支持技術的結合使用，可以實現HTML5離線Web應用，使用戶在掉線的情況下仍然能使用Web應用提供的部分功能，並在在線和離線兩種狀態下自行切換。
2.1 應用描述
應用模擬實現用戶填寫周報的場景，用戶可以查看已填報的周報列表，並對周報做新建、編輯、刪除操作。
應用中離線支持相關功能主要是通過HTML5以及Java Script瀏覽器端代碼實現的，與服務器端數據的交互采用標準化的Ajax方式進行，隻要服務器端能提供相應的支持，離線功能可以較為方便的移植到其他服務器框架上。