从HTML5移动应用现状谈发展趋势

作者注：此文章原为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）

        移动设备上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这样界面华丽、体现苹果新特性