HTML5在移動Web App中的應用研究

萬紅　賈貽然　王若飛　樸雪??

摘要：在互聯(lián)網(wǎng)科技高速發(fā)展的時代，HTML5因其強大的跨平臺能力、自適應的網(wǎng)頁顯示、豐富的多媒體支持、實時更新的用戶體驗，為移動WebApp的開發(fā)注入了新的活力。移動應用開發(fā)人員應隨互聯(lián)網(wǎng)發(fā)展的步伐，充分利用HTML5優(yōu)勢，不斷完善WebApp的功能，為用戶帶來更好的體驗。

關(guān)鍵詞：HTML5；移動Web App；用戶體驗

App開發(fā)隨著智能手機的普及，人們對各種移動應用的需求也在迅速增加，截至2017年6月，我國網(wǎng)民規(guī)模達到7.51億，互聯(lián)網(wǎng)普及率為54.3%，我國手機網(wǎng)民規(guī)模達7.24億，網(wǎng)民中使用手機上網(wǎng)的比至96.3%[1]。不同的操作系統(tǒng)和瀏覽器的不兼容使得移動應用開發(fā)人員不得不進行多次開發(fā)，移動應用開發(fā)難度和成本急劇增加，HTML5的出現(xiàn)使開發(fā)跨平臺的Web App開發(fā)成為可能。

1 HTML5的特點

HTML技術(shù)自20世紀90年代以來經(jīng)歷了多個發(fā)展階段，如圖1所示。在2014年10月29日，HTML5標準規(guī)范公開發(fā)布，HTML5在全面的表示W(wǎng)eb內(nèi)容的同時還實現(xiàn)了跨平臺的Web應用，Web標準迎來了巨大的革新，其主要特點體現(xiàn)在以下幾個方面：

（1）結(jié)構(gòu)化的語義標簽。HTML5提供了header、footer、hgroud、section、article、navigation等標簽，使文檔的可讀性和清晰性大大提高，更便于團隊開發(fā)和維護。

（2）有效的離線存儲。sessionStorage和localStorage提供了與cookies對應的功能。利用IndexedDB模塊保存數(shù)據(jù)，OfflineAppCache通過緩存的方式將資源下載到本地[2]，用戶處于離線狀態(tài)也依然能夠使用移動Web App。與cookie將內(nèi)容隨著請求一同發(fā)送到服務器不同，WebStorage中的數(shù)據(jù)只是存儲在本地，并不會與服務器發(fā)生任何交互，大大避免了流量資源的浪費。

（4）直接的多媒體支持。

在HTML5出現(xiàn)之前，在網(wǎng)頁上播放視頻、音頻、動畫等，都需要借助如Flash、RealMedia和QuikTime等第三方插件。這類插件安裝使用繁瑣，不僅使網(wǎng)頁的受眾受到了限制，還存在一定的安全隱患。HTML5直接提供了video和audio標簽支持多媒體內(nèi)容，無需安裝插件就可直接在瀏覽器上播放音視頻，極大地方便了用戶。

（5）豐富的應用API。

HTML5提供了若干驅(qū)動設(shè)備API函數(shù)，如攝像頭API、地理位置定位API、重力感應API、觸控交互事件等，為Web App提供了調(diào)用攝像頭、地理定位、文件存儲等終端功能操作的接口，極大地提升了Web App訪問和調(diào)用終端設(shè)備的能力。

（6）多設(shè)備跨平臺特性。HTML5是萬維網(wǎng)聯(lián)盟公開的技術(shù)，幾乎所有的瀏覽器都會盡力支持HTML5，這就使得HTML5可以跨平臺使用。開發(fā)一款HTML5的游戲，可以很輕易地移植到Opera的游戲中心、Facebook應用平臺，甚至可以通過封裝的技術(shù)發(fā)放到AppStore或GooglePlay上[3]。HTML5的強大之處還在于它能夠?qū)崿F(xiàn)移動終端上的跨平臺，在iOS、Android、blackberry等各大手機平臺上實現(xiàn)對不同屏幕尺寸、分辨率的網(wǎng)頁自適應。

2 移動Web app

目前主流移動應用主要有NativeApp，Web App和Hybrid App三種，如下圖2所示。

（1）Native App。

Native App是指針對Windows、IOS、Android等操作系統(tǒng)利用不同的框架和編程語言開發(fā)的App，由云服務器數(shù)據(jù)和客戶端構(gòu)成，數(shù)據(jù)的運算和存儲均在本地實現(xiàn)，需要用戶下載安裝才能使用，且每次獲取最新的功能服務都需要更新應用。Native App調(diào)用系統(tǒng)自帶API，響應快，功能豐富，界面友好，用戶交互體驗最好。

（2）Web App。

Web App是基于Web系統(tǒng)的應用，直接運行在Web引擎上，不受平臺限制，無須下載安裝，是一種全新的用戶體驗。Web App具有App的特性，更有Web的特性，可以像傳統(tǒng)網(wǎng)頁一樣互相鏈接，實現(xiàn)Web App之間的直接跳轉(zhuǎn)。基于HTML5的Web App更可以實現(xiàn)離線存儲、音視頻播放、照相機調(diào)用、手機定位等Native App的功能。

（3）Hybrid App。

Hybrid App介于Native App和Web App兩者之間，兼具“Native App良好用戶交互體驗的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”[4]。Hybrid App只有一個UI WebView，里面訪問Web App，用戶體驗上與Native App更為相似，同時具有基于HTML5的跨平臺開發(fā)的低成本優(yōu)勢。

3 HTML5在移動Web App中的應用

（1）移動終端瀏覽器對HTML5的支持。

HTML5通常指包括HTML5，CSS3和JavaScript在內(nèi)的一套技術(shù)組合[5]。Web App是基于Web的系統(tǒng)應用，Web App需要調(diào)用終端的應用API以實現(xiàn)各項功能提供良好的用戶體驗，所以瀏覽器對HTML5的各項技術(shù)的支持十分重要。筆者就目前手機端各大瀏覽器對HTML5技術(shù)的支持情況做了一些調(diào)查和統(tǒng)計，結(jié)果如下表所示。目前手機端iOS Safari 10.3、Chrome 59、UCBrowser 11.4、AndroidBrowser4.3、QQ Browser 1.2等瀏覽器對HTML5都提供了較好的支持。

（2）基于HTML5的Web App的實現(xiàn)。

Web App采用了UI界面——前端數(shù)據(jù)層——服務器——數(shù)據(jù)庫的四層結(jié)構(gòu)，如下圖3所示。前端采用HTML+CSS結(jié)構(gòu)構(gòu)建界面，后端用PHP和MySQL實現(xiàn)數(shù)據(jù)存儲和交互。在前端HTML提供頁面框架，CSS負責頁面表現(xiàn)，JavaScript添加動態(tài)功能，AJAX技術(shù)實現(xiàn)動態(tài)地更新頁面內(nèi)容。

4 結(jié)語

HTML5從本質(zhì)上改變了移動App的開發(fā)方式，它的跨平臺、低成本、隨時動態(tài)更新優(yōu)勢備受移動開發(fā)者親睞，有效的離線緩存、強大的多媒體能力、無需安裝等特性極大的提升了用戶體驗，相信以HTML5為基礎(chǔ)的移動Web App將會成為移動應用中的新趨勢。

參考文獻：

[1]中國互聯(lián)網(wǎng)絡(luò)中心.第40次中國互聯(lián)網(wǎng)絡(luò)發(fā)展狀況統(tǒng)計報告[EB/OL].

[2]于洋.淺析HTML5的特點及其在移動Web App中的應用[J].計算機光盤軟件與應用，2014，（24）：288+290.

[3]網(wǎng)易科技報道.Opera首席標準官謝子斌：HTML5的三大優(yōu)點[EB/OL].

[4]尚鮮連，王勤宏，徐福揚，陸化梅，蔡道琦.基于HTML5的移動Web App開發(fā)研究[J].江蘇科技信息，2017，（15）：3739.

[5]章斕.基于HTML5的Web App的開發(fā)與探索[J].長沙大學學報，2015，（05）：5053.

基金項目：江蘇省大學生創(chuàng)新創(chuàng)業(yè)訓練計劃項目（項目編號：201710313047Y）

作者簡介：萬紅（1995），女，江蘇徐州人，本科在讀，研究方向：物聯(lián)網(wǎng)工程。

*通訊作者：樸雪（1979），女，遼寧本溪人，碩士，副教授，研究方向：計算機應用與生物信息學。