随着智能手机的普及,移动端应用几乎成为每个互联网产品的标配。在快速迭代的互联网战场中高效开发、低成本上线产品,是每个应用开发团队追求的目标。此时,选择合适的应用类型和开发模式便至关重要。移动应用可以粗分为三种:原生应用(native app
), 网页应用(web app
,或HTML5 app
),以及它们的混血儿——混合模式移动应用(hybrid app
)。
今天就来和大家简单聊聊近年来蓬勃发展的hybrid app
。
一、什么是Hybrid Mobile App
Hybrid app
从外观上来看是一个native app
,实则只有一个UIWebView
,里面访问的是一个web app
,如新闻类和视频类的应用普遍采取该策略:native
的框架加上web
的内容。不同于native app
需要针对不同的平台使用不同的开发语言(如使用Objective-C
、Swift
开发iOS
应用,使用Java
等开发Android
应用,使用C#
开发Windows Phone
应用),hybrid app
允许开发者仅使用一套网页语言代码(HTML5+CSS+JavaScript
),即可开发能够在不同平台上部署的类原生应用 。由于hybrid app
结合了native app
良好用户交互体验和web app
跨平台开发的优势,能够显著节省移动应用开发的时间和成本,hybrid app
得到越来越多公司的青睐。
Source: Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options
按照网页语言和程序语言的混合,
hybrid app
通常可以分为三种类型:
多View混合型:
native view
和web view
独立展示,交替出现。 其应用主体通常是native app
,web
技术作为补充。即在需要的时候,将web view
作为独立的view
运行,在web view
内完成相关的展示操作。开发难度与native app
相当。举个栗子:timeline
使用的是web view
。单
View
混合型: 在同一个view
内,native view
和web view
为层叠关系,同时出现。开发成本较高,难度较大,但是体验较好。举个栗子:百度搜索同时实现充分的灵活性和较好的用户体验。
Web
主体型: 应用主体是web view
,穿插native
功能,主要以网页语言编写。整体开发难度低,基本可以实现跨平台;而用户体验好坏,主要取决于底层中间件的交互与跨平台能力。举个栗子:项目管理工具Basecamp
使用web view
呈现内容,调用系统原生API
实现界面导航等功能来提高用户体验。
Hybrid app
也并非是完美的解决方案。由于其使用HTML5
,某些依赖于复杂的原生功能或者繁重的过渡动画的应用会出现卡顿;同时,为了模拟native app
的UI
和感官,需要投入额外的时间和精力;尽管可以跨平台,但是并不能完全支持所有的设备和操作系统;最后,如果应用的体验不够原生化,如一个简单的网站,则还有被Apple App Store
拒绝的风险。
二、 什么时候选择Hybrid App
在
hybrid app
备受追捧的今天,我们也许会随大流优先考虑开发hybrid app
。但是,每个产品各具特色,还没有哪一种解决方案可以完美地应万变。hybrid app
的中庸让它大放异彩,也限制了它的应用场景 。在决定采用一种开发模式之前,有许多因素需要考虑,诸如:
- 你希望针对哪个平台做开发?
- 你希望通过应用商店发布应用么?
- 你希望利用手机特有的性能么?
- 你的团队技术能力如何?
- 你的项目周期和预算是多少?
如果要设计
Angry Birds
一类对图形要求很高的游戏,那么在暂不考虑技术团队能力的情况下,native app
是最优选择;如果要设计如Yelp
一类内容导向的应用,那么hybrid app
会是很好的选择;如果项目时间紧张,没有足够的人手和资金,对图形和系统原生特性没有要求,那么web app
将是性价比最高的解决方案。表一对比了
native app
,hybrid app
和web app
在不同方面的表现,可以帮助你根据实际情况选择最佳的解决方案。
InfoQ
上高嘉峻的一篇文章分享了几个hybrid app
开发的误区,也是开发过程中应该尽量避免的:
为了HTML5而hybrid app:
HTML5
是HTML4.0.1
和XHTML1.0
的升级版,有更强大的表现功能,并加入了local storage
等技术,为web
页面提供了更大的想象空间和更多的可能性。但是,作为发展中的技术,HTML5
收到浏览器兼容性和手机硬件水平的影响,能提供的功能和native app
扔有一定的差距。开发应用时,首先是要满足用户需求,而不是追赶技术革新的大潮。所以开发应用时,应从应用本身功能和团队开发资源综合考量,决定是否采用hybrid app
开发模式。忽略关键因素:
Web
是基于PC
的一种开发模式,而mobile app
运行于移动端。通常,web
开发者使用PC
浏览器模拟app
中的web view
进行调试,而不是直接使用手机上的web view
。 二者能支配的CPU
资源,最大占有内存,运行网络环境,和鼠标/触控操作,浏览器对CSS/JS
的解析和对事件的处理有着巨大的差别。而这些差别常常是web
页面能否正常运行于app
中的关键因素。富交互导致体验差: 这主要体现在两个方面:(1)
web
与手机平台默认交互习惯不一致:iOS
和Android
各有一套交互习惯,包括视觉风格,界面切换,操作习惯等。比如手机端系统风格是左右滑屏来进入或者退出界面,而旧界面保持状态;web
则是默认无论加载还是后退,都会刷新旧界面,造成体验上的损失。如果模拟native
的交互方式,那么会提高开发成本,却也难以达到native
的流畅性。(2)与native
相比同样的功能在性能上存在差距:Web
界面上JS
对HTML Node
的操作需要消耗大量的CPU资源。首先,手机的CPU
性能普遍低于PC
端;其次,不同手机之间的硬件水平也参差不齐,比如在iPhone6s
上可以流畅运行的界面,在iPhone5
、MX5
上可能就无法达到同样的流畅度。跨平台:
Hybrid app
的优势之一是继承web
跨平台的特性。然而,在智能手机软硬件版本众多的今天,兼容性是个不容忽视的问题。不同的安卓操作系统其浏览器内核对JS
和CSS
的解析、事件处理会有不同;iOS
不同版本之间也存在较大差异。所以,在跨平台开发时,兼容性也是需要重点考虑的问题。交互一致性: 这里的一致性并非指同一应用在不同平台上的一致性体验,而是指在同一平台上,
hybrid app
和native
平台的一致性。比如“返回”操作,在iOS
平台上页面顶部留有一个44像素高的导航栏,左侧的返回按钮用于返回操作,可以通过绝对地址的方式链接到任何其它界面;而Android
通常使用设备提供的返回键,返回上一个界面,如果自行配置平台返回按钮,那么它会和设备提供的返回键指向不同的位置。
<2>区分三者
-
nativeapp
是一个原生程序,一般运行在机器操作系统上,有很强的交互,一般静态资源都是在本地的。浏览使用方便,体验度高。在实现上要么使用Objecttive-c
和cocoaTouch Framework
撰写iOS
程序,要么选择java+Android Framework
撰写android
应用程序。 -
hybridapp
是一个半原生程序,伪造了一个浏览器的apk/ipa
原生程序,把地址写死了,然后里面运行了一个webapp
。里面是WebView UI
。但是还是运行在机器的操作系统上,交互较弱,资源一般在本地或者网络都可以。浏览体验度次之。 -
webapp
是生存在浏览器里的应用,所以只能运行在浏览器里,宿主是浏览器,不再是操作系统。资源一般都在网络上。说的根本点就是一个触屏版的网站
什么叫做原生App?
原生
App
是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过网络商店或者卖场来获取例如The App Store
与Android Apps on Google Play
随便说几个原生App
的例子,比如iOS
的Camera+
以及Android
的KeePassDroid
什么叫做移动Web App?
一般说来,移动
Web App
都是都是需要用到网络的,它们利用设备上的浏览器(比如iPhone
的Safari
)来运行,而且它们不需要在设备上下载后安装。
什么是混合app?
Hybrid App
是指介于web-app
、native-app
这两者之间的app
,它虽然看上去是一个Native App
,但只有一个UI WebView
,里面访问的是一个Web App
,比如街旁网最开始的应用就是包了个客户端的壳,其实里面是HTML5
的网页,后来才推出真正的原生应用。再彻底一点的,如掌上百度和淘宝客户端Android
版,走的也是Hybrid App
的路线,不过掌上百度里面封装的不是WebView
,而是自己的浏览内核,所以体验上更像客户端,更高效。
-
综合一下就是:“
Hybrid App
同时使用网页语言与程序语言开发,通过应用商店区分移动操作系统分发,用户需要安装使用的移动应用”。总体特性更接近Native App
但是和Web App
区别较大。只是因为同时使用了网页语言编码,所以开发成本和难度比Native App
要小很多。因此说,Hybrid App
兼具了Native App
的所有优势,也兼具了Web App
使用HTML5
跨平台开发低成本的优势。 -
Web App
是指基于Web的系统和应用,运行在高端手机的网络和浏览器上,用网页技术开发实现特定功能的应用,对手机性能要求比较高。 -
Native App
(原生开发):目前较为成熟,各大公司均采用此方式。但是其人工成本较高,同一个项目,至少需要Android
端、iOS
端、Web
端三个开发团队。 -
Hybrid App
(混合开发),基于第三方跨平台移动应用引擎框架进行开发。使用HTML5
和JS
作为开发,调用引擎封装的底层功能如照相机、传感器、通讯录等。
拿酒来形象化这三种模式的话:
Web App
就像白酒那样浑厚甘醇,度数高,但不适合任何人的口味,制造成本低,
Native App
就是葡萄酒,分红白类型,对葡萄品质要求高,口味大众化,比较成熟,
Hybrid App
就是鸡尾酒,混合了多种酒的优势,非常适合跨平台,是以后的一个App开发趋势。
<3>区分native APP ,web APP,hybrid APP
1、Native App
Native App
是一种基于智能手机本地操作系统如iOS
、Android
、WP
并使用原生程式编写运行的第三方应用程序,也叫本地app
。一般使用的开发语言为JAVA
、C++
、Objective-C
。想创建
Native App
,开发者必须编写源代码,使用由操作系统开发商提供的工具,对源代码进行编译。代码编译之后以2进制或者字节码的形式运行在操作系统上,直接调用操作系统的Device API
。虽然不同操作系统上进行的开发过程常常很相似,但是每一种移动操作系统都随带各自的独特工具。平台之间的这些区别导致了
Native
开发方法的最重大缺点之一:为一种移动平台编写的代码无法在另一种平台上使用。Native App
的优缺点总结如下:
优点
- 提供最佳的用户体验,最优质的用户界面,最华丽的交互
- 针对不同平台提供不同体验
- 下载到本地,可节省带宽成本
- 可访问本地资源
- 直接访问系统级API
- 操作速度更快
- 用户留存率高
缺点
- 移植到不同平台上比较麻烦
- 需要维护多个版本
- 发布新版本需要通过store或market的确认
- 盈利需要与第三方分成
- 开发的成本比较大,需要针对不同平台开发相应的版本
- 更新体验较差、同时也比较麻烦(每一次发布新的版本,都需要做版本打包,且需要用户手动更新,或一个让用户反感的提示)。
2、Web App
Web App
是运行于网络和标准浏览器上,以HTML+JS+CSS
等WEB
技术开发实现特定功能的应用。通过浏览器来调用Device API
,但是只有数量有限的这些API
向浏览器里面运行的Web App
公开。基于当下开始普及流行的HTML5
,Web App
可以实现很多原本Native App
才可以实现的功能,,比如LBS
的功能、本地数据存储、音视频播放的功能,甚至还有调用照相机和结合GPU
的硬件加速功能。由于它不依赖于操作系统,因此开发了一款
Web App
后,基本能应用于各种系统平台。并且还有版本升级容易的优势(毕竟服务器是受自己控制的)。但是这种方案的缺点也很明显——无法使用系统级API
,只能做为一个临时的入口,用户很难留存。Web App
的优缺点总结如下:
优点
- 开发成本低;
- 更新快;
- 更新无需通知用户,不需要手动升级;
- 能够跨多个平台和终端;
- 维护比较简单。
缺点
- 临时性的入口;
- 无法获取系统级别的通知,提醒,动效等等;
- 用户留存率低;
- 需要依赖网络,体验较差。
3、Hybrid App
Hybrid App
是一种用Native
技术来搭建App
的外壳,壳里的内容由Web
技术来提供的移动应用,兼具“Native App
良好交互体验的优势”和“Web App
跨平台开发的优势”。
根据实现的不同,可以细分为两种实现方案:
(1)在
Native App
中使用WebView
加载远端Web资源这种方案的
Web
资源放置在服务器上,开发者不必经历提交和批准过程——有些App
商店要求这个过程,就可以对App
进行小幅更新。遗憾的是,这个方法摈弃了任何离线可用性,因为设备与网络没有连接时,无法访问设备。
(2)将一组
HTML
、JavaScript
、CSS
和媒体文件,封装到App
代码中,存储在设备本地,使用Cordova/PhoneGap
等框架通过WebView加载本地资源进行页面渲染
把Web
代码封装到App
里面在一定程度上缓解从远端加载静态资源导致UI展示延迟的问题,可以提高性能和可访问性,并且还可以通过桥接Native
和Web
来调用一些Device
的API
。
但是其劣势也很明显,一是不允许远程更新;二是安装包变大;三是如果想调用相关平台的API
,需要针对平台单独进行开发,如果在应用中用到了大量的Device API
,那么开发的效率将大大降低。
Hybrid App
同时使用网页语言与程序语言开发,但其总体特性更接近Native App
。只是因为同时使用了web
语言编码,所以开发成本和难度比Native App
要小很多。因此,Hybrid App
兼具了Native App
的优势,也兼具了Web App
使用HTML5
跨平台开发低成本的优势。