從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發展的現狀如何？

        一、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標準的進度是規範已完成，正在逐步成熟和落地。

        二、移動瀏覽器支持狀況

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

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

        移動設備上HTML5訪問系統硬件的能力還在落地中，同時移動瀏覽器對於基本HTML5標準的支持不是大問題，可是性能和速度還有待提升。用戶移動設備和移動平臺硬件的快速更新會解決一部分問題，例如2011年到2013年我就曾經使用過單核528M頻率的G八、單核1G的Nexus One、雙核1.2G的Galaxy SII，如今則是4核1.6G的NoteII。

        三、各類開源或收費的框架、工具和平臺如雨後春筍般不斷出現和完善

        除了老牌的Sencha Touch、jQuery Mobile、PhoneGap、LungoJS外，還出現了例如像EaselJS、Construct二、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工具和框架在經歷了摸索的階段後，正在逐步成熟和完善，有望進一步普及。

        三、開發者繼續保持很高的開發意願

        根據HTML5開發框架Kendo UI的調查顯示，73%的受訪者仍然對HTML5充滿信心，超過94%的受訪者正在或者將要使用HTML5來進行應用的開發，Appcelerator的相關調查也得出了類似的結論。同時國內的HTML5社區仍然保持很高的人氣和關注度，社區活動也很是活躍。

        四、應用發展狀況

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

        第二種應用的場景是純移動Web App，例如記帳應用DailyCost、天氣應用Sun、閱讀應用美閱等等，它們和Native App很是類似，在性能和體驗上都有很好的表現。

記帳應用DailyCost風格簡單大方

        還有一種方式是在Hybrid App裏使用HTML5技術，如今許多應用都經過內置WebView來展現內容，例以下面要提到的LinkedIniPad版。

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

        一、性能

        HTML5的性能已是老生常談的問題了。問題的因素有多個，包括硬件、瀏覽器以及實現方式。硬件會隨着移動設備的快速更新而獲得改進，甚至在硬件層面，設備有可能針對HTML5進行特殊的支持。瀏覽器的性能在不斷改進中，而應用的實現方式取決於開發者的編程模型和技能，這一部分是能夠隨着工具、框架的進步和開發水平提高而改進的。

        二、移動設備的碎片化、瀏覽器的分裂

        不一樣設備、不一樣瀏覽器對於HTML5的支持程度是不一致的，另外不一樣的手機分辨率也給WebApp的開發帶來了挑戰。

        業界對於第一個問題的解決方案是優雅降級，而第二個問題就須要採用響應式設計（Responsive Design）。響應式設計讓咱們應對設備碎片化有了更靈活的方式，並且它不只僅只包括CSS3 Media Queries技術的應用，還包括響應式圖片（ResponsiveImages）、響應式視頻等多種技術，咱們更應該將其視做一整套的現代網頁設計方式。

響應式設計是解決移動設備碎片化問題的基石

        三、缺乏統一實現標準

        某種程度上，當前阻礙HTML5迅速普及的最主要問題不是技術實現方式和方法少，也不是性能差，而是太分裂、缺乏統一的實現標準。

        例如，Sench Touch、jQuery Mobile、limeJS、Kendo UI、Impact，以及easeljs、GameMaker、Construct2，你能搞清楚它們的特色、都有哪些不一樣的適用場景以及各自的優劣嗎？

        而像Google和Apple爲Android、iOS平臺各自提供了一套標準的開發工具和框架，幫助開發者只須要專一在實現上，就可以快速高效的開發出最終產品。而HTML5太開放所帶來的結果就是沒有統一的實現方式和標準，這一方面致使開發者須要經歷選型的痛苦，另外一方面不能保證其實現的正確性和高效性。

        W3C更多隻關注標準，不過它們也在針對HTML5的表現和性能進行測試，而從標準到技術到應用有距離，是現實存在的問題，這個過程須要一段時間來完善和改進。

        四、用戶習慣

         用戶在移動設備上目前大多數時候習慣於經過單個App來知足需求，因此標準的Web App對用戶來講認知度不如Native App。可是用戶習慣是逐漸培養出來的，當Web App的性能、表現和易用性上逼近或者等同於Native App的時候，用戶會有一個逐步認知，逐步向Web App遷移的過程。

        針對HTML5移動平臺，開發的最佳實踐有哪些？

        一、開發者應當意識到，在移動端，HTML5應用有適合它的特別的表現方式，而不該專一和原生應用作的徹底一致。這才能發揮出HTML5的優點和避免陷入無盡的痛苦。事實上若是要開發與原生應用性能至關的HTML5應用，所投入的精力、測試和資源遠遠超過原生應用。

        這一方面比較有表明性要數Linkedin iPad版，它95%以上都採用HTML5開發，性能和界面都很是優秀，而爲了保證良好的性能體驗，設計時特地去掉了許多沒必要要的設計元素，例如全部的漸變背景和圓角，由於這會形成渲染性能下降。

LinkedIn iPad版是有表明性的HTML5應用之一

        二、有針對性的根據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創新功能

        三、開發者覆蓋全平臺的最佳實踐是OnePlatform+ HTML5，即關鍵平臺（能夠是Android，也能夠是iOS）採用Native App，而剩下的全部平臺採用HTML5的Web App來適配。考慮到成本和效率問題，這種方式會變得愈來愈廣泛。

        移動App產業化趨勢愈來愈明顯，那麼HTML5發展的趨勢和所帶來的機會會有哪些呢？

        一、桌面端IE逐步衰落，支持HTML5的現代瀏覽器逐步佔領市場已是顯而易見的事情。而移動平臺更爲樂觀，據估計2013年用戶對於智能終端更新換代的比例會在50%以上，設備的迅猛更新會讓支持HTML5的現代瀏覽器輕鬆獲取80%以上的市場份額。

        二、2012年HTML5已經正式發佈，標準趨於穩定，2013年標準會更成熟，更加便於普及和應用。HTML5規範將逐步落地，隨着WebGL、Device API的成熟，HTML5能實現的界面效果和功能會更加廣闊。當基於HTML5的移動App性能和表現上很是趨近於Native App，並且有成熟的開發標準時，會出現一個App大量向HTML5遷移的浪潮，致使的結果是用戶也大量向HTML5應用轉移。

        同時目前智能終端美國和中國的滲透率在50%以上，隨着它們的逐漸普及，會出現一波應用從桌面端向移動端遷移的過程，而在這個過程當中，HTML5將會成爲很大一部分應用的技術選擇。

        HTML5應用大量的出現會致使移動端有可能誕生HTML5應用的showcase，極有可能產生相似於韓國Anipang這樣的成功遊戲應用。

        三、基於HTML5的手機網頁遊戲、資訊新聞類應用將會蓬勃發展。

        如今，桌面端的HTML5遊戲已經出現了像Disney的魔境仙蹤遊戲《Find Your Way to OZ》、EA的《命令與征服》、Rocket Pack的《Warimals:Cats vs. Dogs》等優秀做品，那麼在移動平臺上呢？

        韓國Kakao Talk和日本Line平臺在移動遊戲方面已經取得了初步的成功，中國移動遊戲的發展趨勢將和韓國很是相似，會出現一個迅猛增加的態勢。而遊戲在桌面端的發展歷程是從單機桌面客戶端、聯網桌面客戶端再到網頁遊戲，由於網頁遊戲迎合了當今用戶時間碎片化和追求簡單易上手的需求，而移動平臺上隨時隨地的碎片化時間正好切合網頁遊戲的特質，因此HTML5手機網頁遊戲有可能出現爆發性增加的態勢，尤爲是在微信平臺上，目前能夠看到許多大公司和創業公司都在進行這方面的努力。

        另一類有表明性的資訊新聞類應用重在內容，而處理內容正是Web的專長，而更自由的分發形式、更便捷的搜索引擎檢索、更普遍的跨端需求是這類應用的最大需求。如今國外《金融時報》、《紐約時報》等傳統媒體都已經嘗試用HTML5的方式來分發移動應用。

        四、HTML5生態鏈上相關平臺和工具的缺少是潛在的機會，例如安全、測試、開發、系統等多個方面。

        HTML5移動應用產業鏈上的必需品包括兩類：平臺類產品，例如統計平臺、支付平臺、廣告平臺、遊戲引擎等；以及基本以開源和免費爲主的工具類產品。這一方面大公司、創業公司以及我的開發者都在開始嘗試。

        五、企業移動化這個方向對於HTML5來講也有很大潛力。對企業級應用來講，用戶體驗和用戶界面要求不像消費類應用那麼高，例如豐富多彩的產品界面、快速流暢的滑動體驗、變幻無窮的手勢操做，因此更適於發揮HTML5的長處而避免其劣勢。

        例如，Path、FlipBoard、iPhoto這樣界面華麗、動畫絢麗的應用其實在企業級來講並無太多的實際意義，也不會要求性能像切水果、Real Racing那樣流暢和支持多點觸摸。在桌面端，傳統的OA已經能夠很好的知足企業的需求，而在移動端，企業更關注的是服務的穩定性以及隨時隨地辦公的便捷性。

企業應用不須要像Real Racing這樣界面華麗、體現蘋果新特性