开工福利|免费学 2200+ 精品线上课,企业成员人人可得! 了解详情
写点什么

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

评论

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

《深入理解Kafka:核心设计与实践原理》PDF

程序员李木子

解决 Parallels Desktop 虚拟机不能连网的问题 含Parallels19一键激活版安装包

Rose

虚拟机 Parallels Desktop

如何应对Android面试官->文件IO、手写APK加固框架核心实现(下)

老A说

Java’ an'droid

听GPT 讲Rust源代码--compiler(40)

fliter

eudic欧路词典下载 mac翻译软件 v4.5.9 增强激活版 支持m1 m2

南屿

Mac 翻译软件 欧路词典 Eudic Eudic欧路词典破解版 英汉翻译

微信Mac版怎么下载安装?含Mac版微信防撤回、多开助手

南屿

微信助手 微信分身

JProfiler 14 mac永久稳定版 含jprofiler14激活许可 兼容M1/M2

南屿

Java JProfiler Mac永久激活版 JProfiler 14

OpenAI又放大招!大幅暴降,修复GPT-4变懒!

鹤涵

resolume arena破解版 附安装教程 Mac电脑VJ调试软件 兼容M1

南屿

Mac软件 苹果电脑 Resolume Arena 7破解版 VJ调试 Resolume Arena 安装教程

premiere pro 2023的字幕功能使用教程 含PR2023中文下载安装包

南屿

PR adobe PR2023中文版 Premiere Pro字幕

C# 面向对象编程进阶:构造函数详解与访问修饰符应用

小万哥

C# 程序人生 编程语言 软件工程 后端开发

左耳听风 - 管理方式「读书打卡 day 18」

Java 工程师蔡姬

读书笔记 程序员 个人成长 职业发展 管理方式

Turbo Boost Switcher Pro永久激活版 cpu温度检测调节工具 mac软件下载

Rose

苹果电脑 CPU性能 Turbo Boost Switcher Pro cpu频率调节

专业的iOS解锁工具AnyMP4 iPhone Unlocker mac直装免激活版

南屿

Mac软件 iPhone解锁器 iOS解锁 AnyMP4 iPhone

《Kafka权威指南》PDF

程序员李木子

Luminar Neo下载破解——智能AI图像编辑处理工具

Rose

Luminar Neo 图像处理软件

movistpro在mac怎么破解?Movist Pro for mac中文直装破解版下载

Rose

mac视频播放器 Movist Pro 中文版 Movist Pro 破解

轻量级UML建模工具 Astah Professional mac注册激活版 附详细安装教程

南屿

UML建模 Astah Professional破解版 astah professional怎么用

Red Giant Universe 2024破解版 AE红巨星特效插件包for mac 兼容M1/M2

南屿

红巨人特效插件 视频特效插件 Red Giant2024

苹果电脑专业测试跑分工具:Geekbench 6 mac破解版 支持m1/m2

Rose

系统跑分 Geekbench 6

Cheetah3D 8:对 Apple Silicon 的原生支持 Metal API 的本机支持

南屿

动画 渲染 3d建模 Cheetah3D注册机 Cheetah3D 8新功能

好用的截图工具Snagit功能介绍及Snagit中文下载安装

Rose

截图 Snagit下载 Snagit 2023 Snagit截图软件

如何应对Android面试官-> NestedScrollView 嵌套滑动机制详解,手写 NestedScrollView 核心实现

老A说

android UI Java’ View

听GPT 讲Rust源代码--compiler(35)

fliter

秒合约丨合约丨现货交易系统开发丨现成源码搭建

l8l259l3365

听GPT 讲Rust源代码--compiler(37)

fliter

听GPT 讲Rust源代码--compiler(39)

fliter

作者推荐 | 【深入浅出MySQL】「底层原理」探秘缓冲池的核心奥秘,揭示终极洞察

洛神灬殇

MySQL 底层原理 缓冲池 Buffer Pool 2024年第二十三篇文章

听GPT 讲Rust源代码--compiler(38)

fliter

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