HTML5、Web 引擎与跨平台移动 App 开发

阅读数:13477 2014 年 8 月 12 日 01:34

移动端跨平台应用开发是个有趣的话题。纵观该领域目前各个开发商提供的多种方案,大致可以分为三大类:

  1. 基于 HTML5 的方案。该方案以 PhoneGap / Cordova 为代表。其基本思路是针对 HTML5 标准目前功能上的不足,补充定义了一套比较实用的 API(比如硬件访问 / 系统交互等),然后基于平台上自带的 Web 引擎(比如 iOS 的 UIWebview 等),通过扩展机制实现了这些 API,在此基础上再提供一套应用打包部署系统。 Intel 的 XDK 也属于此类方案。

  2. 将 Native API 映射封装成统一语言的 API 的方案。该方案以 Titanium Xamarin 为代表,其中 Titanium 提供 JavaScript API,Xamarin 提供 C# API。这样的好处是可以较容易达到和 Native API 类似的能力,编程模型 / 方式也和原生应用相似。

  3. 有行业针对性的 HTML5 API 方案。比如 Ludei 的 CocoonJS 就是一个比较有意思的方案,它设计了一套专门针对 2D/3D 游戏开发的 API(支持 iOS 和 Android)。可以认为它是 HTML5 图形操作的子集(Canvas +WebGL),再加上一些扩展的 API 比如硬件访问能力 / 广告 / 应用内购买 / 社交网络整合等,以实现一个完整的游戏引擎。

本文重点介绍基于 HTML5 的方案相比其他方案的优缺点,如何实现更好的效果,以及目前的一些进展。

HTML5 方案的特点

原生 API 映射的方案,如 Titanium、Xamarin,其优点在于功能和性能与原生系统比较接近。但是,由于不同系统原生 API 设计上还是会有不少差异,API 的映射还是需要不少的权衡取舍。同时,由于这些 API 是这些厂商自定义的,谈不上什么标准,相应的开发资源(程序库 / 技术支持 / 社区等等)也相对有限。

而另一方面,标准化、开发资源的丰富则是 HTML5 方案最大的优点,同时第三方的 HTML5 框架工具比如 PhoneGap/Cordova 也极大促进了 HTML5 应用的发展,它们提供了方便的跨平台应用打包 / 发布服务、实用的 API、灵活的扩展机制、以及积累下来的丰富的第三方 API 实现。而上游的 W3C 一旦开始支持一些新的 API,PhoneGap/Cordova 也可以很快沿用这些标准的 API 将相关能力开放出去。

HTML5 方案的主要不足则在于功能和性能方面,这主要是因为 HTML5 应用的能力严重依赖于系统自带的 Web 引擎:iOS 的 UIWebview、Android 的 Webview 等,此类组件的 HTML5 能力相比 Safari for iOS、Chrome for Android 都要差一截。另外在 Android 平台上,由于系统碎片化比较严重,不同 Android 版本的 Webview 的 HTML5 能力也有较大差异,导致相应的 HTML5 应用一致性难以保证。

好消息是,现在已经出现一些第三方的 Web 引擎以提供比系统默认的 Webview 更好的功能和性能,而 PhoneGap/Cordova 也正在改进架构以便引入这些更好的第三方 Web 引擎。另外对于 Tizen、Firefox OS 这样本身就是 HTML5 Runtime 加上扩展 API 的系统而言,HTML5 应用是一等公民,在功能拓展方面相比 iOS、Android 上会增强不少。

而第三种方案,CocoonJS 的优点是专注于 2D/3D 游戏开发,画图性能很好,比如同时画 1000 个精灵也能达到 60FPS,这是绝大多数的浏览器 / 通用的 HTML5 引擎目前还做不到的。这个方案的缺点在于,由于它的画图操作简化了很多路经,它无法做到和 HTML5 DOM 元素的互操作,而且它的 HTML5 能力也只是一个子集,功能比较受限。目前 CocoonJS 针对 Android 也引入了另外一种模式 Webview+ 作为补充,Webview+ 基于 Chromium 的内核加上 Cordova API 的支持以实现更通用的 HTML5 能力。

总的来说,HTML5 应用的能力很大程度上依赖于 Web 引擎的能力。因此,无论是移动操作系统开发商还是开发工具的开发商,都持续在 Web 引擎的方向投入了更多的努力。

Web 引擎

Web 引擎目前大致可分为三种方式:

  1. 浏览器,比如 Safari/Chrome/UC Browser 等 ;
  2. 系统自带的 Webview 组件,比如上面提到的 iOS UIWebview 和 Android Webview
  3. 专门的 Web Engine,比如 Intel 的开源项目 Crosswalk 、Ludei 的 Webview+

浏览器方式很容易理解,一个 HTML5 应用就是一个 Web 页面,用户通过浏览器打开一个 URL,然后进入浏览器的全屏模式 /App 模式进行操作,或者是通过点击一个事先创建好的快捷方式打开应用。这种方式的性能取决于浏览器本身对 HTML5 的支持情况,一般来说要优于 Webview 组件的方式,但是问题在于不同的浏览器有差异,而且通过浏览器运行 HTML5 较难做到类似原生应用的体验(应用切换 / 权限管理 / 系统资源访问 / 整合等)以及丰富的 API 支持。

Webview 组件方式的一般用法是以 Hybrid 的方式发布 HTML5 应用,即上述提到的 PhoneGap/Cordova 方案所采用的方式。其问题已经在上面提到过,主要是 Webview 组件本身对 HTML5 的支持能力不足。

专门的 Web 引擎可以有较好的 HTML5 功能和性能支持,同时有较好一致性,类似原生应用的系统整合也可以做得较好。这种方式的缺点则在于开发者需要将 Web 引擎与应用程序一起打包,生成的应用大小会更大,因此有的 Web 引擎(如 Crosswalk)也提供了一种“共享模式”,让多个应用可以共享一个 Web 引擎,仅当应用第一次启动并且发现系统还没有相应 Web 引擎时才提示用户下载安装。

目前的发展趋势是:通过 PhoneGap/Cordova 方式得到丰富的 API 支持,通过专门开发的 Web 引擎去提升 HTML5 的能力。

Crosswalk 和 Ludei 的 Webview+ 在概念上比较类似。Webview+ 是闭源的,目前还不好评估;Crosswalk 由我所在的团队开发,是开源的(BSD 许可协议),基于 Chromium 内核,着重于对 HTML5 功能和性能的支持,发布周期为六周一次,支持 Cordova API。

目前 Crosswalk 正式支持的移动操作系统包括 Android 和 Tizen,在 Android 4.0 及以上的系统中使用 Crosswalk 的 Web 应用程序体验和原生应用没有区别。该引擎现在已经成为众多知名 HTML5 平台和应用的推荐引擎,包括 Google Mobile Chrome App Intel XDK Famo.us Construct2 等等,未来的 Cordova 4.0 也计划集成该 Web 引擎。不过比较遗憾的是,由于 iOS 的限制(iOS 不允许应用使用使用除 iOS UIWebView 之外第三方的 JIT-- 即时编译引擎),目前 Crosswalk 也没有办法提供直接的支持,但这也许会随着 HTML5 更广泛的进入移动市场而发生改变。

总结

现在的 HTML5 App(加上 API 扩展)已经可以胜任很多事了,比如教育类应用,休闲游戏等等。不过对于那些实时性要求比较高的、计算量大的(比如涉及大量的元素绘制,或并行计算等)、复杂的 3D 游戏,多人在线游戏 / 应用等还有不少差距。另外,工具方面,如何能够更高效的调试 / 开发 / 性能内存调优 HTML5 应用也是另外一个需要提高的地方。不过,这些方面也在不断的演进。相信不久的将来,HTML5 终会成为主流移动开发平台。

作者介绍

余枝强目前是英特尔开源技术中心的软件技术经理。 主要负责 HTML5 引擎 – Crosswalk 在安卓平台的开发,以及一些其他和 Web 有关的新兴技术的研发工作(如 HTML5 并行技术, 3D Camera 等)。他坚信 Web 是未来, 也非常希望和大家一起努力,让这个未来能够更快更好的到来。


感谢杨赛对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ )或者腾讯微博( @InfoQ )关注我们,并与我们的编辑和其他读者朋友交流。

收藏

评论

微博

用户头像
发表评论

注册/登录 InfoQ 发表评论