從HTML5行動應用現況談發展趨勢的詳細介紹

#從HTML5行動應用現狀談發展趨勢

################################################################################1 ##################        時光如梭，自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推薦規範。

        W3C計畫將後繼的技術升級匯總到2016年底發布的HTML 5.1中，例如改進視訊字幕、響應式圖片、更好的表單支援、新一代的iFrame等。這種類似迭代開發的方式讓HTML5可以更快、更好的落地，而不會無限期的延遲。

        總結一下，HTML5標準的進度是規格已完成，正在逐步成熟和落地。

        2、行動瀏覽器支援狀況

        與桌上型電腦IE佔有率持續下跌、Chrome快速崛起的現況不同，行動平台的主流瀏覽器包括Safari、Android Browser、Opera Mobile、Chrome都較好的支援HTML5，同時它們的份額還在不斷擴大。主流行動瀏覽器的支援讓HTML5的平台更加普及，同時對HTML5的良好支援也讓這些瀏覽器獲得了更多用戶的選擇。

        行動裝置上HTML5存取系統硬體的能力仍在落地中，同時行動瀏覽器對於基本HTML5標準的支援不是大問題，但是性能和速度還有待提高。用戶行動裝置和行動平台硬體的快速更新會解決一部分問題，例如2011年到2013年我曾經使用過單核心528M頻率的G8、單核心1G的Nexus One、雙核心1.2G的Galaxy SII，現在則是4核1.6G的NoteII。

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

        # jQuery Mobile、PhoneGap、LungoJS外，也出現了例如像EaselJS、Construct2、GameMaker、limeJS、Impact、Crafty、Cocos2d-html5等遊戲開發引擎或工具，GroundworkCSS、Skeleton、Gumby、Wirefy、Base5等響應式設計框架，以及大量工具平台。需求是拉動技術進步的催化劑，大量工具的湧現證明了在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非常相似，在性能和體驗上都有很好的表現。

        還有一種方式是在Hybrid App裡使用HTML5技術，現在許多應用程式都透過內建WebView來展示內容，例如下面要提到的LinkedIniPad版。

        而目前HTML5在行動平台上落地的實際阻礙有哪些？

        1、表現

        HTML5的表現已經是老化的問題了。問題的因素有多個，包括硬體、瀏覽器以及實作方式。硬體會隨著行動裝置的快速更新而改進，甚至在硬體層面，裝置有可能針對HTML5進行特殊的支援。瀏覽器的效能不斷改進中，而應用的實作方式取決於開發者的程式設計模型和技能，這一部分是可以隨著工具、框架的進步和開發水平提升而改進的。

        2、行動裝置的片段化、瀏覽器的分割

        不同裝置、不同瀏覽器對HTML5的支援程度是不一致的，另外不同的手機解析度也為WebApp的開發帶來了挑戰。

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

        3、缺乏統一實現標準

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

        例如，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開發，性能和介面都非常優秀，而為了確保良好的性能體驗，設計時特意去除了許多不必要的設計元素，例如所有的漸層背景和圓角，因為這會造成渲染效能降低。

        2、有針對性的依據HTML5的特性對應用進行設計。 HTML5有它的適用場景，不是放諸四海皆準，雖然這個場景正在變得越來越廣闊和豐富。 Web App不會完全取代Native App，Native App也不會戰勝Web App。共生共贏，各擅勝場，它們有各自適合的場景和用途，會逐漸並存下去。所以我們要做的是不要用Native App的思維來設計Web App，而應該著力發揮HTML5的長處，做出特色。

        #以百度相簿iPad版為例來說明，除了確保良好的流暢性和互動外，我們還透過HTML5嘗試了許多有趣和酷炫的創新功能。其中包括：

        1）利用感應器來展示圖片的移動和漸變效果：當iPad水平傾斜的時候，封面圖片會向同樣角度的慢慢移動，透過視差展現出一種美輪美奐的效果。

        2）支援圖片手勢操作：使用過iPad的朋友都對相簿方便快速的手勢操作讚不絕口。而由於HTML5對於手勢的支援也已經比較完善，所以這次我們在百度相簿iPad版本裡嘗試添加了對絕大多數手勢的支援來貼近用戶習慣和方便用戶操作，例如展開相簿、關閉單張圖片、旋轉圖片等等。

        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已經可以很好的滿足企業的需求，而在行動端，企業更關注的是服務的穩定性以及隨時隨地辦公的便利性。

以上是從HTML5行動應用現況談發展趨勢的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！