AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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:3415313

评论

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

坚定投入核心软件!腾讯云数据库TDSQL荣获深圳市科技进步奖一等奖

极客天地

互联网行业,什么人看起来“必成大器”?

秃头小帅oi

3CX的介绍

cts喜友科技

通信 通讯 云通讯 通信通讯

NumPy 数组排序、过滤与随机数生成详解

不在线第一只蜗牛

Python 数组 排序 Numpy

如何提高python程序代码的健壮性

我再BUG界嘎嘎乱杀

Python 编程 后端 软件开发

斯嘉丽·约翰逊指控 OpenAI 非法使用其声音;微软推出AI 工具「回顾」(Recall)丨RTE 开发者日报 Vol.208

声网

微店商品API接口:电商数据集成的新利器

Noah

一文看懂分布式链路追踪

乘云数字DataBuff

应用性能监控 分布式链路追踪

视频标注已上线,支持视频分类、多目标检测|ModelWhale 版本更新

ModelWhale

计算机视觉

第52期|GPTSecurity周报

云起无垠

AIGC LLMs

企业需要SD-WAN的十大理由

Ogcloud

SD-WAN 企业组网 SD-WAN组网 SD-WAN服务商 SDWAN

如何开展性能测试?性能测试的流程是什么样子?

测试人

软件测试 性能测试 自动化测试 测试开发

AI 新质生产力创新先锋 焱融科技入选中国生成式AI企业TOP50

焱融科技

人工智能 高性能存储 软件定义存储 新质生产力

数据驱动选品:阿里巴巴商品详情API在电商选品中的应用

tbapi

阿里巴巴 阿里巴巴API接口 阿里巴巴商品详情数据接口

关于接口协议,你必须要知道这些!

霍格沃兹测试开发学社

构建稳健、高效与安全的企业级API网关

RestCloud

API API网关 ipaas

PHP反射API与接口的动态分析

技术冰糖葫芦

API boy API 文档 API 性能测试

华为云CodeArts 12大安全防护机制,端到端全面保障软件供应链安全!

云计算 软件开发 华为云

软件测试丨什么是性能测试?

测试人

软件测试

pyhttptest 实操指南:测试RESTful API的有效方法

Liam

测试 后端 测试工具 REST API pyhttptest

Flink 任务调度策略:Lazy from Sources 深入解析

木南曌

实时计算

学Python的别告诉我你还不造celery是干嘛的

我再BUG界嘎嘎乱杀

Python 编程 后端 软件开发 celery

如何提升金融业务效率的同时保障身份认证安全和用户体验(一)

芯盾时代

金融 手机银行 iam 统一身份认证 银行业

LLM实战:当网页爬虫集成gpt3.5

不在线第一只蜗牛

GPT LLM

Flink 任务调度策略:Eager 模式详解

木南曌

flink 实时计算

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