作者注：此文章原為2013年5月的《程序員》雜志所做，現刊登于此，以饗讀者。  **從HTML5移動應用現狀談發展趨勢** ? ? ? 時光如梭，自2008年HTML5誕生以來已經過去了5年的時間，作為新一代的Web標準，它自問世以來就受到方方面面的強烈關注，也引起了許多爭議，支持者因其開放強大的特點而鼓吹它的美好前景，質疑者因其遲遲不能很好落地而懷疑它的實際作用。現在我們從現狀入手，以提問的方式針對HTML5在移動平臺的發展趨勢做一個剖析，使得大家能夠從紛繁復雜的信息中對HTML5的未來有更清晰的了解和認識。 ? ? ??**針對移動平臺，采用HTML5開發Web App（或者Hybrid App）有哪些優勢？** ? ? ??使用HTML5開發的頁面更具有現代網頁的特性：界面華麗、人機交互出色、功能強大，現在我們已經很難單純用傳統的表現方式滿足用戶多種多樣的需求，實現時也很難將HTML5與之前的版本割裂開來，所以我們可以認為在移動平臺上絕大部分的現代Web App（或者Hybrid App）都將會采用HTML5開發。那么這樣做究竟有哪些好處呢？ ? ? ??跨平臺：一次開發，到處使用，不需要考慮兼容性。這可以極大減少跨平臺開發人員數量和成本。如果反過來思考，現在移動平臺日新月異，除了Android和iOS兩強獨大，還有Windows Phone、Blackberry、Bada等多個系統參與競爭，各自覆蓋一部分用戶，而一個應用要想覆蓋這么多的平臺，除了采用Web App的方式，幾乎不可能解決這個現實的問題。 ? ? ??云端升級：在移動開發中最痛苦的是每次發布。發布時需要涉及多個應用商店和渠道，另外還要非常的謹慎。如果出現重大bug或者質量問題，通過新版本修復是極其麻煩的事情，在這個過程中蘋果App Store的審核期也讓很多開發者非常頭疼。而云端升級可以一次性覆蓋所有用戶，不需要用戶手動升級和安裝；有任何問題可以隨時及時修復，不需要經過應用商店和用戶手動更新，大大減少了風險和工作量。 ? ? ??與云計算平臺結合，解決移動設備運算能力有限的問題：如果將Web App存放在云端的服務器上，可以很好的利用云計算平臺強大的服務器和運算資源，完成很多受移動設備硬件能力限制難以完成的復雜工作。 ? ? ??能夠更好的被搜索引擎索引和檢索，并形成可量化的大數據：Native形式本身是封閉的，封閉、無序的數據對于信息流動來說是一種阻礙，很容易造成信息孤島；Web本身的精神就是開放，同時HTML5提供的語義化標簽能夠更好的被識別和組織。如果我們能夠通過Web App獲取更多開放的信息與數據結構，才能更好的迎接和擁抱大數據時代。 ? ? ??人才儲備巨大：傳統的Web工程師都是潛在的HTML5工程師，轉型相對來說更為容易。 ? ? ??繞過嚴苛的應用商店：應用商店對于應用過于嚴格的控制是一把雙刃劍，對于許多開發者和應用開發商來說Web App的形式是繞過傳統手機應用商店模式的最佳途徑。 ? ? ??**HTML5發展的現狀如何？** ? ? ??1、HTML5標準進度 ? ? ??W3C規范在成為正式標準前通常需要歷經5個階段：工作草案（Working Draft）、最后修訂（Last Call）、候選推薦（Candidate Recommendation）、建議推薦（Proposed Recommendation）和推薦（Recommendation）。 ? ? ??2012年12月17日，W3C宣布HTML5規范制定完成并發布了HTML5候選推薦規范，這代表HTML5規范已經穩定，今后只會對漏洞進行修正，企業和開發者有了穩定的實施目標，可以開展試驗性實施。W3C將會開始致力于HTML5標準化的互用性測試和性能優化，并預計到2014年底發布HTML5推薦規范。  截至目前的HTML5標準進度 ? ? ??W3C計劃把后繼的技術升級匯總到2016年底發布的HTML 5.1中，例如改進視頻字幕、響應式圖片、更好的表單支持、新一代的iFrame等。這種類似于迭代開發的方式讓HTML5可以更快更好的落地，而不會無限期的推遲。 ? ? ??總結一下，HTML5標準的進度是規范已完成，正在逐步成熟和落地。 ? ? ??2、移動瀏覽器支持情況 ? ? ??和桌面端IE占有率持續下跌、Chrome迅速崛起的現狀不同，移動平臺的主流瀏覽器包括Safari、Android Browser、Opera Mobile、Chrome都較好的支持HTML5，同時它們的份額還在不斷擴大。主流移動瀏覽器的支持讓HTML5的平臺更加普及，同時對HTML5的良好支持也讓這些瀏覽器獲得了更多用戶的選擇。  移動瀏覽器對HTML5的支持情況（來源：[http://caniuse.com](http://caniuse.com/)） ? ? ??移動設備上HTML5訪問系統硬件的能力還在落地中，同時移動瀏覽器對于基本HTML5標準的支持不是大問題，但是性能和速度還有待提高。用戶移動設備和移動平臺硬件的快速更新會解決一部分問題，例如2011年到2013年我就曾經使用過單核528M頻率的G8、單核1G的Nexus One、雙核1.2G的Galaxy SII，現在則是4核1.6G的NoteII。 ? ? ??3、各種開源或收費的框架、工具和平臺如雨后春筍般不斷出現和完善 ? ? ??除了老牌的Sencha Touch、jQuery Mobile、PhoneGap、LungoJS外，還出現了例如像EaselJS、Construct2、GameMaker、limeJS、Impact、Crafty、Cocos2d-html5等游戲開發引擎或工具，GroundworkCSS、Skeleton、Gumby、Wirefy、Base等響應式設計框架，以及大量工具平臺。需求是拉動技術進步的催化劑，大量工具的涌現證明了在HTML5開發方面有強烈需求的存在。 ? ? ??而大公司也紛紛推出各種HTML5工具和平臺，例如百度的Web App平臺西米露、Opera的游戲引擎Sphinx、Firefox的HTML5根平臺Firefox OS、Intel的應用移植工具App Porter、任天堂的應用開發框架NintendoWeb Framework等等。而Adobe在放棄移動端Flash的情況下，迅速發布了一系列HTML5開發工具，其中包括HTML5動畫制作工具Adobe Edge Animate和類似于Flash編輯器的可視化HTML5響應式設計工具Adobe Edge Reflow。 ? ? ??總體來看，HTML5工具和框架在經歷了摸索的階段后，正在逐步成熟和完善，有望進一步普及。 ? ? ??3、開發者繼續保持很高的開發意愿 ? ? ??根據HTML5開發框架Kendo UI的調查顯示，73%的受訪者仍然對HTML5充滿信心，超過94%的受訪者正在或者將要使用HTML5來進行應用的開發，Appcelerator的相關調查也得出了相似的結論。同時國內的HTML5社區仍然保持很高的人氣和關注度，社區活動也非常活躍。 ? ? ??4、應用發展情況 ? ? ??不知不覺中，HTML5正在大量進入我們的實際生活。其中一種應用方式是傳統桌面網站的移動化，例如百度地圖WAP版就使用了地理定位API和大量HTML5新特性，其它有代表性的應用還包括YouTube、新浪微博、攜程、淘寶等等。 ? ? ??第二種應用的場景是純移動Web App，例如記賬應用DailyCost、天氣應用Sun、閱讀應用美閱等等，它們和Native App非常相似，在性能和體驗上都有很好的表現。  記賬應用DailyCost風格簡單大方 ? ? ??還有一種方式是在Hybrid App里使用HTML5技術，現在許多應用都通過內置WebView來展示內容，例如下面要提到的LinkedIniPad版。 ? ? ??而目前HTML5在移動平臺上落地的實際阻礙都有哪些？ ? ? ??1、性能 ? ? ??HTML5的性能已經是老生常談的問題了。問題的因素有多個，包括硬件、瀏覽器以及實現方式。硬件會隨著移動設備的快速更新而得到改進，甚至在硬件層面，設備有可能針對HTML5進行特殊的支持。瀏覽器的性能在不斷改進中，而應用的實現方式取決于開發者的編程模型和技能，這一部分是可以隨著工具、框架的進步和開發水平提升而改進的。 ? ? ??2、移動設備的碎片化、瀏覽器的分裂 ? ? ??不同設備、不同瀏覽器對于HTML5的支持程度是不一致的，另外不同的手機分辨率也給WebApp的開發帶來了挑戰。 ? ? ??業界對于第一個問題的解決方案是優雅降級，而第二個問題就需要采用響應式設計（Responsive Design）。響應式設計讓我們應對設備碎片化有了更靈活的方式，而且它不僅僅只包括CSS3 Media Queries技術的應用，還包括響應式圖片（ResponsiveImages）、響應式視頻等多種技術，我們更應該將其視作一整套的現代網頁設計方式。  響應式設計是解決移動設備碎片化問題的基石 ? ? ??3、缺少統一實現標準 ? ? ??某種程度上，當前阻礙HTML5迅速普及的最主要問題不是技術實現方式和方法少，也不是性能差，而是太分裂、缺少統一的實現標準。 ? ? ??例如，Sench Touch、jQuery Mobile、limeJS、Kendo UI、Impact，以及easeljs、GameMaker、Construct2，你能搞清楚它們的特點、都有哪些不同的適用場景以及各自的優劣嗎？ ? ? ??而像Google和Apple為Android、iOS平臺各自提供了一套標準的開發工具和框架，幫助開發者只需要專注在實現上，就能夠快速高效的開發出最終產品。而HTML5太開放所帶來的結果就是沒有統一的實現方式和標準，這一方面導致開發者需要經歷選型的痛苦，另一方面不能保證其實現的正確性和高效性。 ? ? ??W3C更多只關注標準，不過它們也在針對HTML5的表現和性能進行測試，而從標準到技術到應用有距離，是現實存在的問題，這個過程需要一段時間來完善和改進。 ? ? ??4、用戶習慣 ??????? 用戶在移動設備上目前大多數時候習慣于通過單個App來滿足需求，所以標準的Web App對用戶來說認知度不如Native App。但是用戶習慣是逐漸培養出來的，當Web App的性能、表現和易用性上逼近或者等同于Native App的時候，用戶會有一個逐步認知，逐步向Web App遷移的過程。 ? ? ??**針對HTML5移動平臺，開發的最佳實踐有哪些？** ? ? ??1、開發者應當意識到，在移動端，HTML5應用有適合它的特別的表現方式，而不應專注和原生應用做的完全一致。這才能發揮出HTML5的優勢和避免陷入無盡的痛苦。事實上如果要開發與原生應用性能相當的HTML5應用，所投入的精力、測試和資源遠遠超過原生應用。 ? ? ??這一方面比較有代表性要數Linkedin iPad版，它95%以上都采用HTML5開發，性能和界面都非常優秀，而為了保證良好的性能體驗，設計時特意去掉了許多不必要的設計元素，例如所有的漸變背景和圓角，因為這會造成渲染性能降低。  LinkedIn iPad版是有代表性的HTML5應用之一 ? ? ??2、有針對性的根據HTML5的特性對應用進行設計。HTML5有它的適用場景，不是放之四海而皆準，雖然這個場景正在變得越來越廣闊和豐富。Web App不會完全取代Native App，Native App也不會戰勝Web App。共生共贏，各擅勝場，它們有各自適合的場景和用途，會逐漸并存下去。所以我們需要做的是不要用Native App的思維來設計Web App，而應該著力于發揮HTML5的長處，做出特色。 ? ? ??以百度相冊iPad版為例來進行說明，除了保證良好的流暢性和交互外，我們還通過HTML5嘗試了許多有趣和酷炫的創新功能。其中包括： ? ? ??1）利用傳感器來展示圖片的移動和漸變效果：當iPad水平傾斜的時候，封面圖片會向同樣角度的慢慢移動，通過視差展現出一種美輪美奐的效果。 ? ? ??2）支持圖片手勢操作：用過iPad的朋友都對相冊方便快捷的手勢操作贊不絕口。而由于HTML5對于手勢的支持也已經比較完善，所以這次我們在百度相冊iPad版本里嘗試添加了對絕大多數手勢的支持來貼近用戶習慣和方便用戶操作，例如展開相冊、關閉單張圖片、旋轉圖片等等。  百度相冊iPad版嘗試了多種HTML5創新功能 ? ? ??3、開發者覆蓋全平臺的最佳實踐是OnePlatform+ HTML5，即關鍵平臺（可以是Android，也可以是iOS）采用Native App，而剩下的所有平臺采用HTML5的Web App來適配。考慮到成本和效率問題，這種方式會變得越來越普遍。 ? ? ??**移動App產業化趨勢越來越明顯，那么HTML5發展的趨勢和所帶來的機會會有哪些呢？** ? ? ??1、桌面端IE逐步衰落，支持HTML5的現代瀏覽器逐步占領市場已經是顯而易見的事情。而移動平臺更為樂觀，據估計2013年用戶對于智能終端更新換代的比例會在50%以上，設備的迅猛更新會讓支持HTML5的現代瀏覽器輕松獲取80%以上的市場份額。 ? ? ??2、2012年HTML5已經正式發布，標準趨于穩定，2013年標準會更成熟，更加便于普及和應用。HTML5規范將逐步落地，隨著WebGL、Device API的成熟，HTML5能實現的界面效果和功能會更加廣闊。當基于HTML5的移動App性能和表現上非常趨近于Native App，而且有成熟的開發標準時，會出現一個App大量向HTML5遷移的浪潮，導致的結果是用戶也大量向HTML5應用轉移。 ? ? ??同時目前智能終端美國和中國的滲透率在50%以上，隨著它們的逐漸普及，會出現一波應用從桌面端向移動端遷移的過程，而在這個過程中，HTML5將會成為很大一部分應用的技術選擇。 ? ? ??HTML5應用大量的出現會導致移動端有可能誕生HTML5應用的showcase，極有可能產生類似于韓國Anipang這樣的成功游戲應用。 ? ? ??**3、基于HTML5的手機網頁游戲、資訊新聞類應用將會蓬勃發展。** ? ? ??現在，桌面端的HTML5游戲已經出現了像Disney的魔境仙蹤游戲《Find Your Way to OZ》、EA的《命令與征服》、Rocket Pack的《Warimals:Cats?vs.?Dogs》等優秀作品，那么在移動平臺上呢？ ? ? ??韓國Kakao Talk和日本Line平臺在移動游戲方面已經取得了初步的成功，中國移動游戲的發展趨勢將和韓國非常類似，會出現一個迅猛增長的態勢。而游戲在桌面端的發展歷程是從單機桌面客戶端、聯網桌面客戶端再到網頁游戲，因為網頁游戲迎合了當今用戶時間碎片化和追求簡單易上手的需求，而移動平臺上隨時隨地的碎片化時間正好切合網頁游戲的特質，所以HTML5手機網頁游戲有可能出現爆發性增長的態勢，尤其是在微信平臺上，目前可以看到許多大公司和創業公司都在進行這方面的努力。 ? ? ??另外一類有代表性的資訊新聞類應用重在內容，而處理內容正是Web的專長，而更自由的分發形式、更便捷的搜索引擎檢索、更廣泛的跨端需求是這類應用的最大需求。現在國外《金融時報》、《紐約時報》等傳統媒體都已經嘗試用HTML5的方式來分發移動應用。 ? ? ??4、HTML5生態鏈上相關平臺和工具的缺乏是潛在的機會，例如安全、測試、開發、系統等多個方面。 ? ? ??HTML5移動應用產業鏈上的必需品包括兩類：平臺類產品，例如統計平臺、支付平臺、廣告平臺、游戲引擎等；以及基本以開源和免費為主的工具類產品。這一方面大公司、創業公司以及個人開發者都在開始嘗試。 ? ? ? 5、企業移動化這個方向對于HTML5來說也有很大潛力。對企業級應用來說，用戶體驗和用戶界面要求不像消費類應用那么高，例如豐富多彩的產品界面、快速流暢的滑動體驗、千變萬化的手勢操作，所以更適于發揮HTML5的長處而避免其劣勢。 ? ? ??例如，Path、FlipBoard、iPhoto這樣界面華麗、動畫絢麗的應用其實在企業級來說并沒有太多的實際意義，也不會要求性能像切水果、Real Racing那樣流暢和支持多點觸摸。在桌面端，傳統的OA已經可以很好的滿足企業的需求，而在移動端，企業更關注的是服務的穩定性以及隨時隨地辦公的便捷性。  企業應用不需要像Real Racing這樣界面華麗、體現蘋果新特性 ? ? ? 原創文章，轉載請標明出處：[蔣宇捷的專欄](http://blog.csdn.net/hfahe)（http://blog.csdn.net/hfahe）