李 正 張欣宇 馮一帆
1 中國(guó)聯(lián)通研究院 北京 100032
2 北京中網(wǎng)華通設(shè)計(jì)咨詢有限公司 北京 100070
近三年來,我國(guó)移動(dòng)互聯(lián)網(wǎng)用戶規(guī)模呈迅猛增長(zhǎng)態(tài)勢(shì),根據(jù)中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心發(fā)布的統(tǒng)計(jì)數(shù)據(jù)[1],截至2013年6月底,我國(guó)網(wǎng)民規(guī)模達(dá)5.91億,其中手機(jī)網(wǎng)民規(guī)模4.6億,占比78.5%,相比較2009年12月的調(diào)查結(jié)果,使用手機(jī)上網(wǎng)用戶規(guī)模增長(zhǎng)98.7%。促成手機(jī)網(wǎng)民數(shù)量大規(guī)模增長(zhǎng)的原因除了我國(guó)3G移動(dòng)網(wǎng)絡(luò)的普及、無線網(wǎng)絡(luò)發(fā)展(包括公用和私有WiFi的發(fā)展)外,也得益于智能手機(jī)的大規(guī)模普及和手機(jī)應(yīng)用的創(chuàng)新。
根據(jù)市場(chǎng)研究公司Gartner于2013年9月20日發(fā)布的數(shù)據(jù),2013年全球移動(dòng)應(yīng)用下載量猛增至1 020億次,并將持續(xù)增長(zhǎng)至2017年,屆時(shí)將達(dá)到2 690億次??梢?,移動(dòng)互聯(lián)網(wǎng)應(yīng)為用戶的工作和生活所帶來的便利已深入人心。同時(shí),對(duì)于移動(dòng)互聯(lián)網(wǎng)應(yīng)用的開發(fā)者來說,想要讓更多的用戶使用自己的應(yīng)用,面對(duì)市場(chǎng)中種類繁多的移動(dòng)終端,如何更加快速、有效地開發(fā)、維護(hù)應(yīng)用程序便是關(guān)鍵的一環(huán)。
目前,移動(dòng)互聯(lián)網(wǎng)應(yīng)用的呈現(xiàn)形態(tài)主要分為移動(dòng)Web應(yīng)用和本地應(yīng)用(Native App)兩大類。本地應(yīng)用是指數(shù)據(jù)的運(yùn)算和存儲(chǔ)均在本地(移動(dòng)終端)操作系統(tǒng)上的應(yīng)用,一般采用系統(tǒng)原生語言開發(fā)(如Android系統(tǒng)中使用Java,IOS系統(tǒng)中使用Object-C,Windows Phone中使用C#或C++等)。Web應(yīng)用是指運(yùn)行在Web引擎上的應(yīng)用,一般采用網(wǎng)頁(yè)編程語言開發(fā)。
本地應(yīng)用的特點(diǎn)是運(yùn)行效率高、能夠直接與終端硬件交互、實(shí)現(xiàn)豐富的人機(jī)交互方式。目前,在移動(dòng)互聯(lián)網(wǎng)應(yīng)用市場(chǎng)中,絕大多數(shù)應(yīng)用都是本地應(yīng)用,但隨著用戶和智能移動(dòng)終端平臺(tái)種類的增加,本地應(yīng)用發(fā)展所面臨的問題也逐漸擺在應(yīng)用開發(fā)商的面前。
1) 跨平臺(tái)部署問題。當(dāng)前主流移動(dòng)智能終端系統(tǒng)有Android、IOS、BlackBerry OS、Windows Phone等,這些系統(tǒng)下的本地應(yīng)用均無法運(yùn)行在其它系統(tǒng)中,這意味著開發(fā)商要針對(duì)每一個(gè)移動(dòng)平臺(tái)招聘不同的開發(fā)、維護(hù)人員,將使得開發(fā)成本激增。
2) 快速更新與發(fā)布控制。上述主流操作系統(tǒng)中,除Android系統(tǒng)外,應(yīng)用的發(fā)布都要受到系統(tǒng)廠商的管理,應(yīng)用開發(fā)商必須通過特定的應(yīng)用商店(比如Windows Phone Apps+Games Store、IOS下的App Store)才能讓用戶得到自家開發(fā)的應(yīng)用,這對(duì)開發(fā)商在開發(fā)應(yīng)用的功能上做了限制,也降低了應(yīng)用的發(fā)布速度。
3) 碎片化問題。碎片化問題在Android系統(tǒng)中表現(xiàn)的尤為明顯,由于其系統(tǒng)和硬件的開放性,市場(chǎng)中的Android設(shè)備屏幕尺寸、分辨率各異,再加上Android系統(tǒng)頻繁更新,小的設(shè)備廠商沒有實(shí)力快速加入新版本陣營(yíng)中,使得碎片化日益嚴(yán)重。應(yīng)用開發(fā)商要適配不同設(shè)備,使開發(fā)成本大幅增加,甚至導(dǎo)致了許多開發(fā)商放棄Android平臺(tái)[2]。
這三個(gè)問題是制約本地應(yīng)用發(fā)展的主要原因,相比較而言,移動(dòng)Web應(yīng)用在這些方面有著明顯的優(yōu)勢(shì)。
與本地應(yīng)用相比,Web應(yīng)用不直接依賴于終端系統(tǒng)的原生語言,而是直接在終端系統(tǒng)的Web引擎上運(yùn)行,具有良好的跨平臺(tái)特性,面對(duì)移動(dòng)智能終端的“碎片化”問題相比本地應(yīng)用也有更好的表現(xiàn)。這一特性也使Web應(yīng)用的分享、傳播變得極為方便,用戶只需要知道應(yīng)用的地址鏈接便可訪問該應(yīng)用,應(yīng)用升級(jí)時(shí)開發(fā)商只需將升級(jí)后的應(yīng)用部署到服務(wù)器上,用戶再次訪問時(shí)便可以使用最新的版本,因此,開發(fā)商可以自如地控制Web應(yīng)用的發(fā)布可版本升級(jí)。
然而在HTML5技術(shù)出現(xiàn)之前,Web應(yīng)用與本地應(yīng)用之間有著不可逾越的障礙,從功能上可分為以下幾類問題。
1) 本地存儲(chǔ)。首先,相對(duì)傳統(tǒng)的應(yīng)用,Web應(yīng)用不需要安裝,所占空間小的特性使其具備傳統(tǒng)軟件應(yīng)用所不具備的優(yōu)勢(shì),但由于缺少本地存儲(chǔ)數(shù)據(jù)的能力,在沒有網(wǎng)絡(luò)信號(hào)覆蓋的地方,Web應(yīng)用也就無法正常使用;其次,每次訪問同一個(gè)Web應(yīng)用時(shí),都需要下載一次應(yīng)用數(shù)據(jù),其中包含大量重復(fù)數(shù)據(jù),這會(huì)消耗大量帶寬和流量。
2) 設(shè)備硬件訪問。由于當(dāng)前網(wǎng)絡(luò)標(biāo)準(zhǔn)的限制,使得Web應(yīng)用很難訪問設(shè)備上的各種硬件,比如各重力感應(yīng)傳感器、GPS、攝像頭等硬件。無法利用這些元件的硬件特性會(huì)極大地阻礙Web應(yīng)用的創(chuàng)新,這是制約Web應(yīng)用發(fā)展的重要原因。
3) 圖像繪制及渲染。想要直接在網(wǎng)頁(yè)上進(jìn)行繪圖是不能輕易完成的,即使是幾何圖形也不可以。在瀏覽器當(dāng)中只能對(duì)圖片做出點(diǎn)擊、保存等有限的交互操作。如果希望在網(wǎng)頁(yè)中對(duì)圖片做出更多操作或者畫出圖形,就需要借助 flash、silverlight這類插件來完成。
4) 多媒體播放。當(dāng)前在Web應(yīng)用中,大多數(shù)音視頻是通過插件(比如 Flash)來播放的,這對(duì)含有此類功能的Web應(yīng)用帶來了跨平臺(tái)方面的困難,因?yàn)椴⒎撬袨g覽器都支持同樣的插件(比如Safari瀏覽器就不支持flash插件)。
5) Web通信能力。當(dāng)設(shè)計(jì)一個(gè)Web應(yīng)用來展示實(shí)時(shí)的信息時(shí)(如股票信息、票務(wù)信息等),通常是使用輪詢(Polling)、長(zhǎng)輪詢(Long-Polling)或流(Streaming)等實(shí)時(shí)交互方式,這些方法在交互時(shí)都會(huì)用到HTTP的請(qǐng)求頭和響應(yīng)頭,包含很多不必要的額外信息以至于增加了延遲,在對(duì)流量比較敏感的移動(dòng)互聯(lián)網(wǎng)領(lǐng)域,這些包頭消耗的流量也是一筆不可忽視的開銷。
6) 腳本運(yùn)行效率。眾所周知,瀏覽器在處理HTML頁(yè)面中的腳本時(shí),當(dāng)前頁(yè)面處于不可響應(yīng)的狀態(tài),如果頁(yè)面嵌入的腳本較多或腳本執(zhí)行時(shí)間較長(zhǎng)時(shí),用戶是無法做其它操作的,因此,十分影響Web應(yīng)用的用戶體驗(yàn)。
這些問題一直以來限制著移動(dòng)Web應(yīng)用的發(fā)展,使其完全無法和本地應(yīng)用相抗衡,以至于出現(xiàn)了當(dāng)前移動(dòng)互聯(lián)網(wǎng)市場(chǎng)中本地應(yīng)用為王的局面。直到HTML5技術(shù)的出現(xiàn),HTML5在這些問題上做出了令人興奮的改進(jìn),促使Web應(yīng)用急速發(fā)展,并受到越來越多開發(fā)者的關(guān)注。
在HTML5推出之前,W3C推薦標(biāo)準(zhǔn)還是1999年發(fā)布的HTML4.01和2001年發(fā)布的XHTML1.1,十多年來,HTML一直沒有進(jìn)行真正的升級(jí),隨著互聯(lián)網(wǎng)應(yīng)用的迅速發(fā)展,HTML4.01和XHTML1.1標(biāo)準(zhǔn)已力不從心,它們以文檔為中心的理念已無法滿足現(xiàn)代互聯(lián)網(wǎng)應(yīng)用的需要,因此,開發(fā)人員要求升級(jí)的呼聲越來越高。2008年1月22日,HTML5的第一份正式草案發(fā)布,其目標(biāo)便是取代HTML 4.01和XHTML 1.1標(biāo)準(zhǔn),使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。
廣義論及HTML5時(shí),實(shí)際指的是包括HTML5、CSS3和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對(duì)于需要插件的豐富網(wǎng)絡(luò)應(yīng)用服務(wù)(plugin-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight和Oracle JavaFX的需求,并提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。
具體來說,HTML5添加了許多新的語法特征,其中包括
2012年第四季度,HTML5被W3C作為“候選推薦規(guī)范”正式發(fā)布,這意味著HTML5技術(shù)標(biāo)準(zhǔn)此時(shí)已是穩(wěn)定版本,此后只會(huì)對(duì)漏洞進(jìn)行修正,并計(jì)劃在2014年第四季度最終定稿。與其同時(shí)發(fā)布的還有HTML5.1的首份規(guī)范草案。
HTML5一發(fā)布便受到開發(fā)者的關(guān)注,主要原因是其新特性將解決當(dāng)前移動(dòng)Web應(yīng)用所遇到的眾多問題,使移動(dòng)Web應(yīng)用可以與本地應(yīng)用相抗衡甚至更具優(yōu)勢(shì)。針對(duì)傳統(tǒng)Web應(yīng)用遇到的問題,HTML5技術(shù)提供了以下新特性。
1) 本地存儲(chǔ)。①Web storage。HTML5的Web storage API 采用了離線緩存,緩存后會(huì)生成一個(gè)清單文件(manifest file),這個(gè)清單文件實(shí)質(zhì)就是一系列的URL列表文件,這些URL分別指向頁(yè)面當(dāng)中的HTML、CSS、Javascrpit、圖片等相關(guān)內(nèi)容。當(dāng)使用離線應(yīng)用時(shí),應(yīng)用會(huì)引入這一清單文件,瀏覽器會(huì)讀取這一文件,下載相應(yīng)的文件,并將其緩存到本地。使得這些Web應(yīng)用能夠脫離網(wǎng)絡(luò)使用,而用戶在離線時(shí)的更改也同樣會(huì)映射到清單文件中,并在重新連線之后將更改返回應(yīng)用。②Indexed DB。它是HTML5的另外一種數(shù)據(jù)存儲(chǔ)方式,目的是幫助Web應(yīng)用在本地存儲(chǔ)比較復(fù)雜的數(shù)據(jù)。每個(gè)域名可以創(chuàng)建多個(gè)“數(shù)據(jù)庫(kù)”,每個(gè)“數(shù)據(jù)庫(kù)”可以存放多個(gè)“表”,每個(gè)表中可以存放多個(gè)不同類型的Json對(duì)象。
2) 設(shè)備硬件訪問。①Geolocation API。移動(dòng)Web應(yīng)用可以靈活使用移動(dòng)智能終端上的GPS、Wi-Fi等定位方式,快速獲取終端的精確位置。②Device Orientation API。該API可以讓W(xué)eb應(yīng)用訪問終端上的陀螺儀,收集設(shè)備的方向和移動(dòng)信息,配合Geolocation API可以讓開發(fā)人員實(shí)現(xiàn)豐富的地圖、導(dǎo)航等類型的應(yīng)用。③Media Capture API。HTML5的Media Capture API提供了對(duì)移動(dòng)終端攝像頭的可編程訪問,比如用戶可以直接調(diào)用getUserMedia方法獲得攝像頭提供的視頻流。
3) 圖像繪制及渲染。①Canvas。Canvas的應(yīng)用編程接口提供了數(shù)十個(gè)方法以實(shí)現(xiàn)Web應(yīng)用的繪圖功能,用戶可以在使用了Canvas標(biāo)簽的Web應(yīng)用中動(dòng)態(tài)地生成各種圖形圖像以及動(dòng)畫。②WebGL。開發(fā)人員可以通過WebGL提供的技術(shù)方案直接在網(wǎng)頁(yè)上展示3D物體形象,其繪圖性能可以直接使用終端設(shè)備的圖形處理器能力。Canvas和WebGL的出現(xiàn)使Web應(yīng)用可以不借助其它插件實(shí)現(xiàn)出色的繪圖和渲染能力[5]。
4) 多媒體播放。①在HTML5中,增加了
5) Web通信能力。①Web Socket。Web Socket基于瀏覽器原生Socket,實(shí)現(xiàn)了全雙工通信,使Web應(yīng)用能實(shí)現(xiàn)真正的實(shí)時(shí)通信[6]。與Ajax相比,Ajax技術(shù)需要客戶端發(fā)起請(qǐng)求,XHR收到域的限制,而WebSocket使服務(wù)器和客戶端之間彼此互推信息,并允許跨域通信。②Web Notification。過去瀏覽器采用嚴(yán)格的沙盒機(jī)制將瀏覽器與桌面環(huán)境隔離,Web Notification提供了一種可以跨越沙盒的API,當(dāng)瀏覽器運(yùn)行在后臺(tái)時(shí),用戶也可以收到來自Web應(yīng)用的通知。
6) 腳本運(yùn)行效率。①Web Worker。HTML5提出了線程的概念,通過Web Worker可以為Web應(yīng)用提供多線程支持[7]。Web Worker的主要特征是:能夠長(zhǎng)時(shí)間運(yùn)行(響應(yīng))、理想的啟動(dòng)性能、理想的內(nèi)存消耗。Web Worker允許開發(fā)人員將需要長(zhǎng)時(shí)間運(yùn)行的計(jì)算放在后臺(tái)進(jìn)行,并保證頁(yè)面對(duì)用戶的及時(shí)響應(yīng)。
HTML5帶來的這些新特性,迅速縮小了移動(dòng)Web應(yīng)用和本地應(yīng)用在功能和性能上的差距,并憑借其跨平臺(tái)、節(jié)省本地存儲(chǔ)資源、更易于版本控制等優(yōu)勢(shì),Web應(yīng)用極有可能改變當(dāng)前移動(dòng)互聯(lián)網(wǎng)本地應(yīng)用為王的局面,成為未來的主流應(yīng)用形態(tài)。
隨著HTML5標(biāo)準(zhǔn)的正式發(fā)布,基于HTML5技術(shù)的移動(dòng)Web應(yīng)用也大量出現(xiàn)在人們的視線中,其中一類應(yīng)用是桌面Web應(yīng)用的移動(dòng)化,例如百度和谷歌的地圖應(yīng)用移動(dòng)版使用了地理定位API;Gmail移動(dòng)Web版使用了本地存儲(chǔ),使用戶可以離線閱讀郵件;優(yōu)酷、愛奇藝、Youtube等視頻網(wǎng)站也在其移動(dòng)版中放棄了Flash插件,用HTML5的新特性實(shí)現(xiàn)音視頻的播放。另一類應(yīng)用是純移動(dòng)Web應(yīng)用,天氣應(yīng)用Sun、閱讀應(yīng)用美閱等等,它們和本地應(yīng)用非常相似,在性能和體驗(yàn)上都有很好的表現(xiàn)[8]。
眾多大公司也紛紛推出了各自的HTML5開發(fā)工具,例如Adobe已感到移動(dòng)互聯(lián)網(wǎng)中Flash大勢(shì)已去,在2011年放棄了移動(dòng)設(shè)備的Flash支持,并發(fā)布了HTML5動(dòng)畫制作工具Adobe Edge Animate等HTML5開發(fā)工具;Opera公司發(fā)布了全球首款GPU加速的HTML5處理引擎,隨后EPIC Games公司發(fā)布的新一代虛幻4游戲引擎也支持了基于HTML5的跨平臺(tái)3D游戲開發(fā);百度也上線了Site App平臺(tái),幫助開發(fā)者建立、推廣移動(dòng)Web應(yīng)用??梢钥闯?,HTML5技術(shù)正在移動(dòng)互聯(lián)網(wǎng)中進(jìn)一步普及。
然而,完全使用HTML5技術(shù)(HTML5+JS+CSS3)開發(fā)的移動(dòng)應(yīng)用在調(diào)用終端硬件功能時(shí),是通過終端系統(tǒng)中的瀏覽器調(diào)用Device API來實(shí)現(xiàn)的,因此,需要瀏覽器對(duì)HTML5標(biāo)準(zhǔn)支持良好。但目前市面上眾多瀏覽器對(duì)HTML5的各項(xiàng)新特性的支持參差不齊[9],這造成了一些HTML5應(yīng)用無法在某些瀏覽器上正常運(yùn)行。
為了解決這一問題,同時(shí)利用本地應(yīng)用和HTML5 Web應(yīng)用的特性,混合型應(yīng)用應(yīng)運(yùn)而生。
混合型應(yīng)用(Hybrid APP)是介于本地應(yīng)用和移動(dòng)Web應(yīng)用之間的折中方案,它繼承了兩種應(yīng)用形態(tài)的長(zhǎng)處。結(jié)合移動(dòng)Web應(yīng)用的需求和HTML5的特性, 現(xiàn)階段出現(xiàn)了多種混合型應(yīng)用的開發(fā)框架,如PhoneGap、AppCan、AppMobi、Titanium等。圖1為PhoneGap應(yīng)用架構(gòu)圖。
圖1 PhoneGap應(yīng)用架構(gòu)圖
開發(fā)者可以用HTML5技術(shù)完成移動(dòng)應(yīng)用主要功能的編程來解決本地應(yīng)用的跨平臺(tái)、“碎片化”等問題;使用JavaScript調(diào)用混合應(yīng)用框架提供的插件庫(kù),能解決移動(dòng)瀏覽器對(duì)Device API的支持不全面的情況,讓HTML5充分發(fā)揮其特性。
雖然混合應(yīng)用與移動(dòng)Web應(yīng)用相比增加了一定的開發(fā)復(fù)雜度,但面對(duì)移動(dòng)瀏覽器對(duì)HTML5兼容性不一致的現(xiàn)狀,在現(xiàn)階段使用混合型應(yīng)用更具優(yōu)勢(shì),它可以獲得比本地應(yīng)用更好的跨平臺(tái)特性,減少開發(fā)成本,同時(shí)可以在將來瀏覽器對(duì)HTML5的兼容性統(tǒng)一時(shí)能更快更好的過渡到移動(dòng)Web應(yīng)用。
從目前的發(fā)展趨勢(shì)來看,移動(dòng)互聯(lián)網(wǎng)依舊是IT產(chǎn)業(yè)的未來,谷歌和Mozilla基金會(huì)都已推出了完全基于瀏覽器的操作系統(tǒng)Chrome OS和Firefox OS,這些都是推動(dòng)本地應(yīng)用Web化的風(fēng)向標(biāo)。隨著移動(dòng)通信技術(shù)的快速發(fā)展以及HTML5技術(shù)的逐步完善,我們可以肯定HTML5技術(shù)將在未來有著更廣泛的應(yīng)用和發(fā)展,我們現(xiàn)在所見的即是未來!
參考文獻(xiàn)
[1]中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心(CNNIC),第32次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告[R].2013.7
[2]Appcelerator-IDC.2012年Q3移動(dòng)開發(fā)者調(diào)查報(bào)告[R].2012.9.25
[3]van Kesteren A,Pieters S.HTML5 Differences from HTML4[EB/OL].[2014-08-10].http://dev.w3.org/html5/html4-differences/
[4]W3C.Syntax Errors[EB/OL].[2014-08-10].http://www.w3.org/html/ig/zh/wiki/HTML5/introduction#.E8.AA.9E.E6.B3.95.E9.8C.AF.E8.AA.A4
[5]李慧云,何震葦,李麗,等.HTML5技術(shù)與應(yīng)用模式研究[J].電信科學(xué),2012(5):24-29
[6]李代立,陳榕.WebSocket在Web實(shí)時(shí)通信領(lǐng)域的研究[J].電腦知識(shí)與技術(shù),2010,6(28):7923-7925
[7]劉華星,楊庚.HTML5——下一代Web開發(fā)標(biāo)準(zhǔn)研究[J].計(jì)算機(jī)技術(shù)與發(fā)展,2011(8):54-58
[8]蔣宇捷.從HTML5移動(dòng)應(yīng)用現(xiàn)狀談發(fā)展趨勢(shì)[J].程序員,2013(5):88-91
[9]崔康.瀏覽器對(duì)HTML5的兼容性分析[J].程序員,2011(4):44-47