萬紅 賈貽然 王若飛 樸雪??
摘要:在互聯(lián)網(wǎng)科技高速發(fā)展的時代,HTML5因其強(qiáng)大的跨平臺能力、自適應(yīng)的網(wǎng)頁顯示、豐富的多媒體支持、實時更新的用戶體驗,為移動WebApp的開發(fā)注入了新的活力。移動應(yīng)用開發(fā)人員應(yīng)隨互聯(lián)網(wǎng)發(fā)展的步伐,充分利用HTML5優(yōu)勢,不斷完善WebApp的功能,為用戶帶來更好的體驗。
關(guān)鍵詞:HTML5;移動Web App;用戶體驗
App開發(fā)隨著智能手機(jī)的普及,人們對各種移動應(yīng)用的需求也在迅速增加,截至2017年6月,我國網(wǎng)民規(guī)模達(dá)到7.51億,互聯(lián)網(wǎng)普及率為54.3%,我國手機(jī)網(wǎng)民規(guī)模達(dá)7.24億,網(wǎng)民中使用手機(jī)上網(wǎng)的比至96.3%[1]。不同的操作系統(tǒng)和瀏覽器的不兼容使得移動應(yīng)用開發(fā)人員不得不進(jìn)行多次開發(fā),移動應(yīng)用開發(fā)難度和成本急劇增加,HTML5的出現(xiàn)使開發(fā)跨平臺的Web App開發(fā)成為可能。
1 HTML5的特點(diǎn)
HTML技術(shù)自20世紀(jì)90年代以來經(jīng)歷了多個發(fā)展階段,如圖1所示。在2014年10月29日,HTML5標(biāo)準(zhǔn)規(guī)范公開發(fā)布,HTML5在全面的表示W(wǎng)eb內(nèi)容的同時還實現(xiàn)了跨平臺的Web應(yīng)用,Web標(biāo)準(zhǔn)迎來了巨大的革新,其主要特點(diǎn)體現(xiàn)在以下幾個方面:
(1)結(jié)構(gòu)化的語義標(biāo)簽。HTML5提供了header、footer、hgroud、section、article、navigation等標(biāo)簽,使文檔的可讀性和清晰性大大提高,更便于團(tuán)隊開發(fā)和維護(hù)。
(2)有效的離線存儲。sessionStorage和localStorage提供了與cookies對應(yīng)的功能。利用IndexedDB模塊保存數(shù)據(jù),OfflineAppCache通過緩存的方式將資源下載到本地[2],用戶處于離線狀態(tài)也依然能夠使用移動Web App。與cookie將內(nèi)容隨著請求一同發(fā)送到服務(wù)器不同,WebStorage中的數(shù)據(jù)只是存儲在本地,并不會與服務(wù)器發(fā)生任何交互,大大避免了流量資源的浪費(fèi)。
(4)直接的多媒體支持。
在HTML5出現(xiàn)之前,在網(wǎng)頁上播放視頻、音頻、動畫等,都需要借助如Flash、RealMedia和QuikTime等第三方插件。這類插件安裝使用繁瑣,不僅使網(wǎng)頁的受眾受到了限制,還存在一定的安全隱患。HTML5直接提供了video和audio標(biāo)簽支持多媒體內(nèi)容,無需安裝插件就可直接在瀏覽器上播放音視頻,極大地方便了用戶。
(5)豐富的應(yīng)用API。
HTML5提供了若干驅(qū)動設(shè)備API函數(shù),如攝像頭API、地理位置定位API、重力感應(yīng)API、觸控交互事件等,為Web App提供了調(diào)用攝像頭、地理定位、文件存儲等終端功能操作的接口,極大地提升了Web App訪問和調(diào)用終端設(shè)備的能力。
(6)多設(shè)備跨平臺特性。HTML5是萬維網(wǎng)聯(lián)盟公開的技術(shù),幾乎所有的瀏覽器都會盡力支持HTML5,這就使得HTML5可以跨平臺使用。開發(fā)一款HTML5的游戲,可以很輕易地移植到Opera的游戲中心、Facebook應(yīng)用平臺,甚至可以通過封裝的技術(shù)發(fā)放到AppStore或GooglePlay上[3]。HTML5的強(qiáng)大之處還在于它能夠?qū)崿F(xiàn)移動終端上的跨平臺,在iOS、Android、blackberry等各大手機(jī)平臺上實現(xiàn)對不同屏幕尺寸、分辨率的網(wǎng)頁自適應(yīng)。
2 移動Web app
目前主流移動應(yīng)用主要有NativeApp,Web App和Hybrid App三種,如下圖2所示。
(1)Native App。
Native App是指針對Windows、IOS、Android等操作系統(tǒng)利用不同的框架和編程語言開發(fā)的App,由云服務(wù)器數(shù)據(jù)和客戶端構(gòu)成,數(shù)據(jù)的運(yùn)算和存儲均在本地實現(xiàn),需要用戶下載安裝才能使用,且每次獲取最新的功能服務(wù)都需要更新應(yīng)用。Native App調(diào)用系統(tǒng)自帶API,響應(yīng)快,功能豐富,界面友好,用戶交互體驗最好。
(2)Web App。
Web App是基于Web系統(tǒng)的應(yīng)用,直接運(yùn)行在Web引擎上,不受平臺限制,無須下載安裝,是一種全新的用戶體驗。Web App具有App的特性,更有Web的特性,可以像傳統(tǒng)網(wǎng)頁一樣互相鏈接,實現(xiàn)Web App之間的直接跳轉(zhuǎn)?;贖TML5的Web App更可以實現(xiàn)離線存儲、音視頻播放、照相機(jī)調(diào)用、手機(jī)定位等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中的應(yīng)用
(1)移動終端瀏覽器對HTML5的支持。
HTML5通常指包括HTML5,CSS3和JavaScript在內(nèi)的一套技術(shù)組合[5]。Web App是基于Web的系統(tǒng)應(yīng)用,Web App需要調(diào)用終端的應(yīng)用API以實現(xiàn)各項功能提供良好的用戶體驗,所以瀏覽器對HTML5的各項技術(shù)的支持十分重要。筆者就目前手機(jī)端各大瀏覽器對HTML5技術(shù)的支持情況做了一些調(diào)查和統(tǒng)計,結(jié)果如下表所示。目前手機(jī)端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ù)層——服務(wù)器——數(shù)據(jù)庫的四層結(jié)構(gòu),如下圖3所示。前端采用HTML+CSS結(jié)構(gòu)構(gòu)建界面,后端用PHP和MySQL實現(xiàn)數(shù)據(jù)存儲和交互。在前端HTML提供頁面框架,CSS負(fù)責(zé)頁面表現(xiàn),JavaScript添加動態(tài)功能,AJAX技術(shù)實現(xiàn)動態(tài)地更新頁面內(nèi)容。
4 結(jié)語
HTML5從本質(zhì)上改變了移動App的開發(fā)方式,它的跨平臺、低成本、隨時動態(tài)更新優(yōu)勢備受移動開發(fā)者親睞,有效的離線緩存、強(qiáng)大的多媒體能力、無需安裝等特性極大的提升了用戶體驗,相信以HTML5為基礎(chǔ)的移動Web App將會成為移動應(yīng)用中的新趨勢。
參考文獻(xiàn):
[1]中國互聯(lián)網(wǎng)絡(luò)中心.第40次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告[EB/OL].
[2]于洋.淺析HTML5的特點(diǎn)及其在移動Web App中的應(yīng)用[J].計算機(jī)光盤軟件與應(yīng)用,2014,(24):288+290.
[3]網(wǎng)易科技報道.Opera首席標(biāo)準(zhǔn)官謝子斌:HTML5的三大優(yōu)點(diǎn)[EB/OL].
[4]尚鮮連,王勤宏,徐福揚(yáng),陸化梅,蔡道琦.基于HTML5的移動Web App開發(fā)研究[J].江蘇科技信息,2017,(15):3739.
[5]章斕.基于HTML5的Web App的開發(fā)與探索[J].長沙大學(xué)學(xué)報,2015,(05):5053.
基金項目:江蘇省大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計劃項目(項目編號:201710313047Y)
作者簡介:萬紅(1995),女,江蘇徐州人,本科在讀,研究方向:物聯(lián)網(wǎng)工程。
*通訊作者:樸雪(1979),女,遼寧本溪人,碩士,副教授,研究方向:計算機(jī)應(yīng)用與生物信息學(xué)。