?? ? 時光如梭，自2008年HTML5誕生以來已經(jīng)過去了5年的時間，作為新一代的Web標(biāo)準(zhǔn)，它自問世以來就受到方方面面的強烈關(guān)注，也引起了許多爭議，支持者因其開放強大的特點而鼓吹它的美好前景，質(zhì)疑者因其遲遲不能很好落地而懷疑它的實際作用。現(xiàn)在我們從現(xiàn)狀入手，以提問的方式針對HTML5在移動平臺的發(fā)展趨勢做一個剖析，使得大家能夠從紛繁復(fù)雜的信息中對HTML5的未來有更清晰的了解和認(rèn)識。

? ? ? ??針對移動平臺，采用HTML5開發(fā)Web App（或者Hybrid App）有哪些優(yōu)勢？

? ? ? ??使用HTML5開發(fā)的頁面更具有現(xiàn)代網(wǎng)頁的特性：界面華麗、人機交互出色、功能強大，現(xiàn)在我們已經(jīng)很難單純用傳統(tǒng)的表現(xiàn)方式滿足用戶多種多樣的需求，實現(xiàn)時也很難將HTML5與之前的版本割裂開來，所以我們可以認(rèn)為在移動平臺上絕大部分的現(xiàn)代Web App（或者Hybrid App）都將會采用HTML5開發(fā)。那么這樣做究竟有哪些好處呢？

? ? ? ??跨平臺：一次開發(fā)，到處使用，不需要考慮兼容性。這可以極大減少跨平臺開發(fā)人員數(shù)量和成本。如果反過來思考，現(xiàn)在移動平臺日新月異，除了Android和iOS兩強獨大，還有Windows Phone、Blackberry、Bada等多個系統(tǒng)參與競爭，各自覆蓋一部分用戶，而一個應(yīng)用要想覆蓋這么多的平臺，除了采用Web App的方式，幾乎不可能解決這個現(xiàn)實的問題。

? ? ? ??云端升級：在移動開發(fā)中最痛苦的是每次發(fā)布。發(fā)布時需要涉及多個應(yīng)用商店和渠道，另外還要非常的謹(jǐn)慎。如果出現(xiàn)重大bug或者質(zhì)量問題，通過新版本修復(fù)是極其麻煩的事情，在這個過程中蘋果App Store的審核期也讓很多開發(fā)者非常頭疼。而云端升級可以一次性覆蓋所有用戶，不需要用戶手動升級和安裝；有任何問題可以隨時及時修復(fù)，不需要經(jīng)過應(yīng)用商店和用戶手動更新，大大減少了風(fēng)險和工作量。

? ? ? ??與云計算平臺結(jié)合，解決移動設(shè)備運算能力有限的問題：如果將Web App存放在云端的服務(wù)器上，可以很好的利用云計算平臺強大的服務(wù)器和運算資源，完成很多受移動設(shè)備硬件能力限制難以完成的復(fù)雜工作。

? ? ? ??能夠更好的被搜索引擎索引和檢索，并形成可量化的大數(shù)據(jù)：Native形式本身是封閉的，封閉、無序的數(shù)據(jù)對于信息流動來說是一種阻礙，很容易造成信息孤島；Web本身的精神就是開放，同時HTML5提供的語義化標(biāo)簽?zāi)軌蚋玫谋蛔R別和組織。如果我們能夠通過Web App獲取更多開放的信息與數(shù)據(jù)結(jié)構(gòu)，才能更好的迎接和擁抱大數(shù)據(jù)時代。

? ? ? ??人才儲備巨大：傳統(tǒng)的Web工程師都是潛在的HTML5工程師，轉(zhuǎn)型相對來說更為容易。

? ? ? ??繞過嚴(yán)苛的應(yīng)用商店：應(yīng)用商店對于應(yīng)用過于嚴(yán)格的控制是一把雙刃劍，對于許多開發(fā)者和應(yīng)用開發(fā)商來說Web App的形式是繞過傳統(tǒng)手機應(yīng)用商店模式的最佳途徑。

? ? ? ??HTML5發(fā)展的現(xiàn)狀如何？

? ? ? ??1、HTML5標(biāo)準(zhǔn)進(jìn)度

? ? ? ??W3C規(guī)范在成為正式標(biāo)準(zhǔn)前通常需要歷經(jīng)5個階段：工作草案（Working Draft）、最后修訂（Last Call）、候選推薦（Candidate Recommendation）、建議推薦（Proposed Recommendation）和推薦（Recommendation）。

? ? ? ??2012年12月17日，W3C宣布HTML5規(guī)范制定完成并發(fā)布了HTML5候選推薦規(guī)范，這代表HTML5規(guī)范已經(jīng)穩(wěn)定，今后只會對漏洞進(jìn)行修正，企業(yè)和開發(fā)者有了穩(wěn)定的實施目標(biāo)，可以開展試驗性實施。W3C將會開始致力于HTML5標(biāo)準(zhǔn)化的互用性測試和性能優(yōu)化，并預(yù)計到2014年底發(fā)布HTML5推薦規(guī)范。

截至目前的HTML5標(biāo)準(zhǔn)進(jìn)度

? ? ? ??W3C計劃把后繼的技術(shù)升級匯總到2016年底發(fā)布的HTML 5.1中，例如改進(jìn)視頻字幕、響應(yīng)式圖片、更好的表單支持、新一代的iFrame等。這種類似于迭代開發(fā)的方式讓HTML5可以更快更好的落地，而不會無限期的推遲。

? ? ? ??總結(jié)一下，HTML5標(biāo)準(zhǔn)的進(jìn)度是規(guī)范已完成，正在逐步成熟和落地。

? ? ? ??2、移動瀏覽器支持情況

? ? ? ??和桌面端IE占有率持續(xù)下跌、Chrome迅速崛起的現(xiàn)狀不同，移動平臺的主流瀏覽器包括Safari、Android Browser、Opera Mobile、Chrome都較好的支持HTML5，同時它們的份額還在不斷擴大。主流移動瀏覽器的支持讓HTML5的平臺更加普及，同時對HTML5的良好支持也讓這些瀏覽器獲得了更多用戶的選擇。

移動瀏覽器對HTML5的支持情況（來源：http://caniuse.com）

? ? ? ??移動設(shè)備上HTML5訪問系統(tǒng)硬件的能力還在落地中，同時移動瀏覽器對于基本HTML5標(biāo)準(zhǔn)的支持不是大問題，但是性能和速度還有待提高。用戶移動設(shè)備和移動平臺硬件的快速更新會解決一部分問題，例如2011年到2013年我就曾經(jīng)使用過單核528M頻率的G8、單核1G的Nexus One、雙核1.2G的Galaxy SII，現(xiàn)在則是4核1.6G的NoteII。

? ? ? ??3、各種開源或收費的框架、工具和平臺如雨后春筍般不斷出現(xiàn)和完善

? ? ? ??除了老牌的Sencha Touch、jQuery Mobile、PhoneGap、LungoJS外，還出現(xiàn)了例如像EaselJS、Construct2、GameMaker、limeJS、Impact、Crafty、Cocos2d-html5等游戲開發(fā)引擎或工具，GroundworkCSS、Skeleton、Gumby、Wirefy、Base等響應(yīng)式設(shè)計框架，以及大量工具平臺。需求是拉動技術(shù)進(jìn)步的催化劑，大量工具的涌現(xiàn)證明了在HTML5開發(fā)方面有強烈需求的存在。

? ? ? ??而大公司也紛紛推出各種HTML5工具和平臺，例如百度的Web App平臺西米露、Opera的游戲引擎Sphinx、Firefox的HTML5根平臺Firefox OS、Intel的應(yīng)用移植工具App Porter、任天堂的應(yīng)用開發(fā)框架NintendoWeb Framework等等。而Adobe在放棄移動端Flash的情況下，迅速發(fā)布了一系列HTML5開發(fā)工具，其中包括HTML5動畫制作工具Adobe Edge Animate和類似于Flash編輯器的可視化HTML5響應(yīng)式設(shè)計工具Adobe Edge Reflow。

? ? ? ??總體來看，HTML5工具和框架在經(jīng)歷了摸索的階段后，正在逐步成熟和完善，有望進(jìn)一步普及。

? ? ? ??3、開發(fā)者繼續(xù)保持很高的開發(fā)意愿

? ? ? ??根據(jù)HTML5開發(fā)框架Kendo UI的調(diào)查顯示，73%的受訪者仍然對HTML5充滿信心，超過94%的受訪者正在或者將要使用HTML5來進(jìn)行應(yīng)用的開發(fā)，Appcelerator的相關(guān)調(diào)查也得出了相似的結(jié)論。同時國內(nèi)的HTML5社區(qū)仍然保持很高的人氣和關(guān)注度，社區(qū)活動也非常活躍。

? ? ? ??4、應(yīng)用發(fā)展情況

? ? ? ??不知不覺中，HTML5正在大量進(jìn)入我們的實際生活。其中一種應(yīng)用方式是傳統(tǒng)桌面網(wǎng)站的移動化，例如百度地圖WAP版就使用了地理定位API和大量HTML5新特性，其它有代表性的應(yīng)用還包括YouTube、新浪微博、攜程、淘寶等等。

? ? ? ??第二種應(yīng)用的場景是純移動Web App，例如記賬應(yīng)用DailyCost、天氣應(yīng)用Sun、閱讀應(yīng)用美閱等等，它們和Native App非常相似，在性能和體驗上都有很好的表現(xiàn)。

記賬應(yīng)用DailyCost風(fēng)格簡單大方

? ? ? ??還有一種方式是在Hybrid App里使用HTML5技術(shù)，現(xiàn)在許多應(yīng)用都通過內(nèi)置WebView來展示內(nèi)容，例如下面要提到的LinkedIniPad版。

? ? ? ??而目前HTML5在移動平臺上落地的實際阻礙都有哪些？

? ? ? ??1、性能

? ? ? ??HTML5的性能已經(jīng)是老生常談的問題了。問題的因素有多個，包括硬件、瀏覽器以及實現(xiàn)方式。硬件會隨著移動設(shè)備的快速更新而得到改進(jìn)，甚至在硬件層面，設(shè)備有可能針對HTML5進(jìn)行特殊的支持。瀏覽器的性能在不斷改進(jìn)中，而應(yīng)用的實現(xiàn)方式取決于開發(fā)者的編程模型和技能，這一部分是可以隨著工具、框架的進(jìn)步和開發(fā)水平提升而改進(jìn)的。

? ? ? ??2、移動設(shè)備的碎片化、瀏覽器的分裂

? ? ? ??不同設(shè)備、不同瀏覽器對于HTML5的支持程度是不一致的，另外不同的手機分辨率也給WebApp的開發(fā)帶來了挑戰(zhàn)。

? ? ? ??業(yè)界對于第一個問題的解決方案是優(yōu)雅降級，而第二個問題就需要采用響應(yīng)式設(shè)計（Responsive Design）。響應(yīng)式設(shè)計讓我們應(yīng)對設(shè)備碎片化有了更靈活的方式，而且它不僅僅只包括CSS3 Media Queries技術(shù)的應(yīng)用，還包括響應(yīng)式圖片（ResponsiveImages）、響應(yīng)式視頻等多種技術(shù)，我們更應(yīng)該將其視作一整套的現(xiàn)代網(wǎng)頁設(shè)計方式。

響應(yīng)式設(shè)計是解決移動設(shè)備碎片化問題的基石

? ? ? ??3、缺少統(tǒng)一實現(xiàn)標(biāo)準(zhǔn)

? ? ? ??某種程度上，當(dāng)前阻礙HTML5迅速普及的最主要問題不是技術(shù)實現(xiàn)方式和方法少，也不是性能差，而是太分裂、缺少統(tǒng)一的實現(xiàn)標(biāo)準(zhǔn)。

? ? ? ??例如，Sench Touch、jQuery Mobile、limeJS、Kendo UI、Impact，以及easeljs、GameMaker、Construct2，你能搞清楚它們的特點、都有哪些不同的適用場景以及各自的優(yōu)劣嗎？

? ? ? ??而像Google和Apple為Android、iOS平臺各自提供了一套標(biāo)準(zhǔn)的開發(fā)工具和框架，幫助開發(fā)者只需要專注在實現(xiàn)上，就能夠快速高效的開發(fā)出最終產(chǎn)品。而HTML5太開放所帶來的結(jié)果就是沒有統(tǒng)一的實現(xiàn)方式和標(biāo)準(zhǔn)，這一方面導(dǎo)致開發(fā)者需要經(jīng)歷選型的痛苦，另一方面不能保證其實現(xiàn)的正確性和高效性。

? ? ? ??W3C更多只關(guān)注標(biāo)準(zhǔn)，不過它們也在針對HTML5的表現(xiàn)和性能進(jìn)行測試，而從標(biāo)準(zhǔn)到技術(shù)到應(yīng)用有距離，是現(xiàn)實存在的問題，這個過程需要一段時間來完善和改進(jìn)。

? ? ? ??4、用戶習(xí)慣

???????? 用戶在移動設(shè)備上目前大多數(shù)時候習(xí)慣于通過單個App來滿足需求，所以標(biāo)準(zhǔn)的Web App對用戶來說認(rèn)知度不如Native App。但是用戶習(xí)慣是逐漸培養(yǎng)出來的，當(dāng)Web App的性能、表現(xiàn)和易用性上逼近或者等同于Native App的時候，用戶會有一個逐步認(rèn)知，逐步向Web App遷移的過程。

? ? ? ??針對HTML5移動平臺，開發(fā)的最佳實踐有哪些？

? ? ? ??1、開發(fā)者應(yīng)當(dāng)意識到，在移動端，HTML5應(yīng)用有適合它的特別的表現(xiàn)方式，而不應(yīng)專注和原生應(yīng)用做的完全一致。這才能發(fā)揮出HTML5的優(yōu)勢和避免陷入無盡的痛苦。事實上如果要開發(fā)與原生應(yīng)用性能相當(dāng)?shù)腍TML5應(yīng)用，所投入的精力、測試和資源遠(yuǎn)遠(yuǎn)超過原生應(yīng)用。

? ? ? ??這一方面比較有代表性要數(shù)Linkedin iPad版，它95%以上都采用HTML5開發(fā)，性能和界面都非常優(yōu)秀，而為了保證良好的性能體驗，設(shè)計時特意去掉了許多不必要的設(shè)計元素，例如所有的漸變背景和圓角，因為這會造成渲染性能降低。

LinkedIn iPad版是有代表性的HTML5應(yīng)用之一

? ? ? ??2、有針對性的根據(jù)HTML5的特性對應(yīng)用進(jìn)行設(shè)計。HTML5有它的適用場景，不是放之四海而皆準(zhǔn)，雖然這個場景正在變得越來越廣闊和豐富。Web App不會完全取代Native App，Native App也不會戰(zhàn)勝Web App。共生共贏，各擅勝場，它們有各自適合的場景和用途，會逐漸并存下去。所以我們需要做的是不要用Native App的思維來設(shè)計Web App，而應(yīng)該著力于發(fā)揮HTML5的長處，做出特色。

? ? ? ??以百度相冊iPad版為例來進(jìn)行說明，除了保證良好的流暢性和交互外，我們還通過HTML5嘗試了許多有趣和酷炫的創(chuàng)新功能。其中包括：

? ? ? ??1）利用傳感器來展示圖片的移動和漸變效果：當(dāng)iPad水平傾斜的時候，封面圖片會向同樣角度的慢慢移動，通過視差展現(xiàn)出一種美輪美奐的效果。

? ? ? ??2）支持圖片手勢操作：用過iPad的朋友都對相冊方便快捷的手勢操作贊不絕口。而由于HTML5對于手勢的支持也已經(jīng)比較完善，所以這次我們在百度相冊iPad版本里嘗試添加了對絕大多數(shù)手勢的支持來貼近用戶習(xí)慣和方便用戶操作，例如展開相冊、關(guān)閉單張圖片、旋轉(zhuǎn)圖片等等。

百度相冊iPad版嘗試了多種HTML5創(chuàng)新功能

? ? ? ??3、開發(fā)者覆蓋全平臺的最佳實踐是OnePlatform+ HTML5，即關(guān)鍵平臺（可以是Android，也可以是iOS）采用Native App，而剩下的所有平臺采用HTML5的Web App來適配。考慮到成本和效率問題，這種方式會變得越來越普遍。

? ? ? ??移動App產(chǎn)業(yè)化趨勢越來越明顯，那么HTML5發(fā)展的趨勢和所帶來的機會會有哪些呢？

? ? ? ??1、桌面端IE逐步衰落，支持HTML5的現(xiàn)代瀏覽器逐步占領(lǐng)市場已經(jīng)是顯而易見的事情。而移動平臺更為樂觀，據(jù)估計2013年用戶對于智能終端更新?lián)Q代的比例會在50%以上，設(shè)備的迅猛更新會讓支持HTML5的現(xiàn)代瀏覽器輕松獲取80%以上的市場份額。

? ? ? ??2、2012年HTML5已經(jīng)正式發(fā)布，標(biāo)準(zhǔn)趨于穩(wěn)定，2013年標(biāo)準(zhǔn)會更成熟，更加便于普及和應(yīng)用。HTML5規(guī)范將逐步落地，隨著WebGL、Device API的成熟，HTML5能實現(xiàn)的界面效果和功能會更加廣闊。當(dāng)基于HTML5的移動App性能和表現(xiàn)上非常趨近于Native App，而且有成熟的開發(fā)標(biāo)準(zhǔn)時，會出現(xiàn)一個App大量向HTML5遷移的浪潮，導(dǎo)致的結(jié)果是用戶也大量向HTML5應(yīng)用轉(zhuǎn)移。

? ? ? ??同時目前智能終端美國和中國的滲透率在50%以上，隨著它們的逐漸普及，會出現(xiàn)一波應(yīng)用從桌面端向移動端遷移的過程，而在這個過程中，HTML5將會成為很大一部分應(yīng)用的技術(shù)選擇。

? ? ? ??HTML5應(yīng)用大量的出現(xiàn)會導(dǎo)致移動端有可能誕生HTML5應(yīng)用的showcase，極有可能產(chǎn)生類似于韓國Anipang這樣的成功游戲應(yīng)用。

? ? ? ??3、基于HTML5的手機網(wǎng)頁游戲、資訊新聞類應(yīng)用將會蓬勃發(fā)展。

? ? ? ??現(xiàn)在，桌面端的HTML5游戲已經(jīng)出現(xiàn)了像Disney的魔境仙蹤游戲《Find Your Way to OZ》、EA的《命令與征服》、Rocket Pack的《Warimals:Cats?vs.?Dogs》等優(yōu)秀作品，那么在移動平臺上呢？

? ? ? ??韓國Kakao Talk和日本Line平臺在移動游戲方面已經(jīng)取得了初步的成功，中國移動游戲的發(fā)展趨勢將和韓國非常類似，會出現(xiàn)一個迅猛增長的態(tài)勢。而游戲在桌面端的發(fā)展歷程是從單機桌面客戶端、聯(lián)網(wǎng)桌面客戶端再到網(wǎng)頁游戲，因為網(wǎng)頁游戲迎合了當(dāng)今用戶時間碎片化和追求簡單易上手的需求，而移動平臺上隨時隨地的碎片化時間正好切合網(wǎng)頁游戲的特質(zhì)，所以HTML5手機網(wǎng)頁游戲有可能出現(xiàn)爆發(fā)性增長的態(tài)勢，尤其是在微信平臺上，目前可以看到許多大公司和創(chuàng)業(yè)公司都在進(jìn)行這方面的努力。

? ? ? ??另外一類有代表性的資訊新聞類應(yīng)用重在內(nèi)容，而處理內(nèi)容正是Web的專長，而更自由的分發(fā)形式、更便捷的搜索引擎檢索、更廣泛的跨端需求是這類應(yīng)用的最大需求。現(xiàn)在國外《金融時報》、《紐約時報》等傳統(tǒng)媒體都已經(jīng)嘗試用HTML5的方式來分發(fā)移動應(yīng)用。

? ? ? ??4、HTML5生態(tài)鏈上相關(guān)平臺和工具的缺乏是潛在的機會，例如安全、測試、開發(fā)、系統(tǒng)等多個方面。

? ? ? ??HTML5移動應(yīng)用產(chǎn)業(yè)鏈上的必需品包括兩類：平臺類產(chǎn)品，例如統(tǒng)計平臺、支付平臺、廣告平臺、游戲引擎等；以及基本以開源和免費為主的工具類產(chǎn)品。這一方面大公司、創(chuàng)業(yè)公司以及個人開發(fā)者都在開始嘗試。

? ? ? ? 5、企業(yè)移動化這個方向?qū)τ贖TML5來說也有很大潛力。對企業(yè)級應(yīng)用來說，用戶體驗和用戶界面要求不像消費類應(yīng)用那么高，例如豐富多彩的產(chǎn)品界面、快速流暢的滑動體驗、千變?nèi)f化的手勢操作，所以更適于發(fā)揮HTML5的長處而避免其劣勢。

? ? ? ??例如，Path、FlipBoard、iPhoto這樣界面華麗、動畫絢麗的應(yīng)用其實在企業(yè)級來說并沒有太多的實際意義，也不會要求性能像切水果、Real Racing那樣流暢和支持多點觸摸。在桌面端，傳統(tǒng)的OA已經(jīng)可以很好的滿足企業(yè)的需求，而在移動端，企業(yè)更關(guān)注的是服務(wù)的穩(wěn)定性以及隨時隨地辦公的便捷性。

企業(yè)應(yīng)用不需要像Real Racing這樣界面華麗、體現(xiàn)蘋果新特性

轉(zhuǎn)載于:https://www.cnblogs.com/gongcheng9990/p/4654531.html

總結(jié)

以上是生活随笔為你收集整理的从HTML5移动应用现状谈发展趋势的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。