限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

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

评论

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

如何从 0 到 1 开发 PyFlink API 作业

Apache Flink

flink pyflink python 3.5+

获取chrome80谷歌浏览器存储的指定网站Cookie数据方法详解

老猿Python

Python chrome 爬虫 Cookie

音视频编解码--编码参数CRF

Fenngton

ffmpeg 视频编解码 视频压缩 码率控制 CRF

anyRTC 音视频 uni 插件集成步骤

anyRTC开发者

uni-app android 音视频 WebRTC sdk

云图说|数据可视化管理,搭载数据安全黑科技!华为数据安全中心,助你保障云上数据安全!

华为云开发者联盟

数据安全 华为云 云图说 DSC 数据安全中心 云上数据

浪潮云再次入围央采2021年云计算服务采购名单

云计算

ArrayList 与 LinkedList 底层结构

Kori Lin

Java

基于Kubernetes Operator的网易数帆生产级云原生中间件实践

网易数帆

架构 Kubernetes 云原生 operator 中间件

领域驱动设计(DDD)在百度爱番番的实践

百度Geek说

中台 微服务 领域驱动设计DDD

站在车顶才能维权?中汽协基于区块链放“大招”!

CECBC

特斯拉

UT之最后一测

好好学习,天天向上

2021高校IT专业大学生就业意向调查问卷

黑马腾云

区块链赋能的Web 3.0时代将是一番怎样的景象?

CECBC

区块链

海南新场景!数字人民币在三亚完成首单离岛免税购物

CECBC

海口免税

容器 & 服务: 扩容(二)

程序员架构进阶

Kubernetes 28天写作 弹性扩容 4月日更

【XXX高校】软件IT专业学生(恋爱观)调查问卷

码界西柚

调查报告 大学生 恋爱

被遗弃的 Vector 和 Stack

Kori Lin

Java

高并发系列:架构优化之细说负载均衡

Coder的技术之路

负载均衡 高并发 高并发优化 负载均衡架构

Android 设备音视频兼容性适配

网易云信

WebRTC

Linux 上 定时备份postgresql 数据库

Yang

数据库 postgresql

SCA工具:开源安全威胁一手掌控

华为云开发者联盟

开源 安全 测试 SCA 软件成分分析

Kubernetes入门——Kubernetes实现应用的高可用

百度开发者中心

Kubernetes k8s入门 #技术课程#

区块链技术赋能不动产登记,让群众办事更便利

CECBC

区块链

软件 IT 专业的高校学生有关在线课程的问卷调查

程序员历小冰

跨湖跨仓场景下如何实现海量数据分钟级分析

华为云开发者联盟

大数据 数据湖 数据分析 华为云FusionInsight MRS HetuEngine

5.1特辑|为何显示有票你却抢不到?技术揭秘12306如何保证车票不超卖

华为云开发者联盟

数据库 GaussDB(for Redis) 五一 12306 数据强一致性

从字节跳动到火山引擎(一) | Redis 云原生实践

redis 字节跳动 Kubernetes 云原生 火山引擎

击破行业痛点,区块链赋能智慧物流高速发展

CECBC

区块链

LeetCode题解:151. 翻转字符串里的单词,栈,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

基于 HLS 创建 Golang 视频流服务器

天黑黑

音视频 HLS 声网 Go 语言

华为云云原生数据库GaussDB加速创新,企业核心数据上云信赖之选

华为云开发者联盟

数据库 云原生 华为云 GaussDB(for openGauss) 全密态安全

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