免费下载案例集|20+数字化领先企业人才培养实践经验 了解详情
写点什么

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

  • 2014-08-12
  • 本文字数:2895 字

    阅读完需:约 9 分钟

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

  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 )关注我们,并与我们的编辑和其他读者朋友交流。

2014-08-12 01:3414835

评论

发布
暂无评论
发现更多内容

对不起,我爱你

小天同学

小说 爱情 情感

游戏夜读 | 最常见的两种类型

game1night

Java世界的“烂”包管理

申扬科技

maven Git Submodule

Week3 命题作业

星河寒水

极客大学架构师训练营

依赖倒置-好莱坞原则

yupi

[安利] 可能会让你爱上书写的工具组合!

猴哥一一 cium

Typora markdown markdown编辑器 玩转写作平台

能走出来的,都不叫困境

zkback

第三周作业

LEAF

架构师训练营 Week 03 关于反应式Web框架Flower

Wancho

2020年6月19日 服务器性能剖析

瑞克与莫迪

Free space——区块链加密社交平台新秀之作

Geek_116789

移动终端智能卡与安全计算环境研究

石君

安全芯片 移动终端 终端安全

系统设计(4)-请设计一个线程安全的HashMap

程序员老王

系统设计

ARTS - Week Five

shepherd

Java algorithm

【写作群星榜】6.12~6.19 写作平台优秀作者 & 文章排名

InfoQ写作社区官方

写作平台 排行榜 热门活动

Facebook 起诉水军公司:删不过来,我还告不过来吗?

神经星星

facebook 亚马逊云 AWS Lightsail 水军 虚假评论

Zoom 妥协!对免费用户开放端到端加密服务

神经星星

音视频 Zoom 端到端加密 隐私保护 数据保护

如何让企业的IT数据运维更有“烟火气”?

博睿数据

数据挖掘 学习 数据中台 运维 大屏可视化

运营系统架构文档

师哥

antdesign table 设置默认选中行且不可编辑

张张张小烦

区块链的未来,公链回归

CECBC

区块链技术 联盟链 公链 底层技术

三流程序员大晚上不睡觉,竟然在做这件事

Janenesome

写作平台 碎碎念

还在埋头干活?给程序员的几个忠告

四猿外

Java 深度思考 程序员 随笔杂谈

flutter开发

InfoQ_1c4a1f813eb1

常年“佛系”Crysis勒索病毒突然变种 变身黑客工具合辑

360安全卫士

架构师训练营-week01 学习总结

GunShotPanda

把主机放在家里

D

centos Homework

行业观察丨区块链如何与工业互联网深度融合

CECBC

区块链技术 工业互联网 分布式存储

GitHub 热榜:一款堪称作业终结者的开源神器!

JackTian

GitHub 开源 工具类网站 学生党 Text-to-handwriting

培训机构出来的程序员常被鄙视,招谁惹谁了

程序员生活志

程序员 程序人生

“技术是用的,不是喊的”区块链标准为电商引入“诚信管家”

CECBC

区块链技术 溯源 电商 防篡改 诚信管家

HTML5、Web引擎与跨平台移动App开发_HTML5_余枝强_InfoQ精选文章