从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这样界面华丽、体现苹果新特性