当前位置: 代码迷 >> Web前端 >> HTML5、WebKit与挪动应用开发
  详细解决方案

HTML5、WebKit与挪动应用开发

热度:374   发布时间:2012-11-25 11:44:31.0
HTML5、WebKit与移动应用开发

一、????????前言

微软之所以能够在过去几十年间称霸IT业,主要是凭借一项无法超越的优势:Windows操作系统,目前快速发展的移动设备成为IT业关注的重点,有可能移动互联网应用将会是IT业下一个高速增长点(也可能是泡沫),犹如2001年的互联网一般。而在移动操作系统上,现在看来微软的Windows Mobile操作系统完全不值一提,就算是其最新的WP7也不再受人关注,现在大家的目光都集中在两家重量级公司GoogleApple出品的AndroidiOS移动操作系统上,其他的什么MeeGoRIMSymbian统统都只能让路,网上充斥的都是一些“我该买Iphone4还是HTC?”、“我该学Android开发还是iOS开发呢?”这些类二选一问题,可见AndroidiOS的风靡程度。
移动操作系统的风靡得益于这几年来移动互联网设备的迅猛发展,从智能手机到平板电脑,CPU从单核到双核以致于四核,目前移动互联网设备的特点,主要有以下特点
1、屏幕大,几乎就是整个机身
2、支持手指触摸以及多点触摸
3、没有输入键盘,取而代之的是屏幕虚拟键盘
4、支持高速无线连接(Wifi 54Mbit/s)
5、支持EDGE网络低速(220kbit/s)连接
6、支持“永远在线”的3G网络连接(384kbit/s-Mbit/s
7、支持位置定位(GPRS),现在几乎是必须的
8、大内存、高速的CPU设置独立的GPU
??????? 除了强大的硬件特性,之所以移动智能设备能够风靡全球,还在于它庞大的软件应用,2007apple发布了第一款iphone手机,起初apple是不欢迎第三方应用开发人员开发iphone下的应用软件的(apple安抚那些超级崇拜iphone的开发人员的办法是:允许他们开发基于Web的应用),直到2008年,apple提供了针对IphoneSDK,并正式开放了App Store应用市场,这种创新之举不仅给第三方开发者带来了巨大利益,同时Apple的智能设备事业也进入了高速、良性的发展的轨道,App Store可以说的上是智能设备和移动应用的里程碑,使得第三方软件的提供者的积极性空前高涨,Google在发布Android智能设备后的第一件事就是开放了Android MarketApple相抗衡。就是这样,目前AppleGoogle设备上的应用总和已经数以百万计了。
??????? 目前,在AppStoreAndroid Market上的应用都是基于两大公司提供给第三方应用开发人员的SDK进行开发的,Apple提供的是基于Objective-C语言的iOS SDK开发,Android提供的基于JAVA语言的Andorid SDK开发。两者都能够充分的发挥各自硬件的最大特性,从开发角度而言,Objective-C可能对很多开发人员都很陌生,很多开发人员都是从头开始学习的,个人认为Objective-C本身虽然是基于C的扩展,但是其面向对象的设计思想,学习起来还是比较容易上手的,而Android基于Java语言,可以让很多Java开发人员快速转入到Android SDK的开发,省去了不少学习成本,并且提高了开发效率。总的比较起来,我个人认为iOS SDK更加成熟,因为iOS SDKApple应用了多年的系统,有坚实的根基,而且基于C的运行效率比JAVA的运行效率要高很多,Objective-C不支持自动回收,大大的节省了系统资源,并且非常省电,而且iOS系统的多后台运行机制,让只有256MRAM的设备也能够运行的非常流畅,另外,Apple独此一家的硬件规格,让开发人员不再为设备的兼容性考虑太多问题。而Android基于Java虚拟机机制,对系统的要求比较高,而且众多厂家推出的不同的屏幕分辨率的硬件,让开发人员不得不去考虑怎么让UI适应不同的分辨率。

二、????????WEB开发

??????? 除了基于SDK开发的方式,移动智能设备还支持Web开发方式(iphone iOS上的App Store就是一个典型的WebApp),因为移动智能设备的最基础的特点就是移动互联网的应用,iOSAndroid都内置了基于WebKit内核的浏览器,iOS中浏览器是Safari MobileAndroid中的浏览器是移动版的Google浏览器,两种浏览器都支持各种标准的Web技术,比如HTMLCSSJavaScriptPHPRuby On RailsPython。这里不得不提的是WebKit内核,WebKit是一个开源的浏览器引擎,与之对应的有IETrident引擎,以及FireFoxGecko引擎,WebKit内核的浏览器在移动设备上应用非常广泛,比如AndoridiOSNOKIA S60、黑莓上的浏览器都是基于WebKit

三、????????WebKit

??????? WebKitApple的推动下,对HTML5CSS3标准支持的非常好,可以浏览http://developer.apple.com/safaridemos/ 体验一下WebKit下运行HTML5的效果,可以在Google浏览器或者Apple Safari浏览器下进行浏览,两种浏览器下的效果几乎是一致的。
??????? WebKit在运用到Mac Os上的Safari之后,Webkit很快被广泛地移植到其他系统平台:
1、Apple iOS
2、Android Google浏览器
3、Nokia S60 Web Browser for S60
4、Web OSPalm推出的第一款基于WebKit的操作系统
5、Linux Linux下的MidoriGoogle ChromeGNOMEEpiphanyKDEKonquerorArora都是现在Linux系统下主要的Webkit内核浏览器
6、Windows下的很多浏览器,safari for windowsgoogle chrome,搜狗双核浏览器
???? 作为浏览器的内核,Webkit作用就是输入一个HTML文档,然后输出一个WEB页面,WebKit由三部分组成,WebCore, JavaSript CoreWebKit,其中,WebCoreWebkit的核心部分,它实现了对文档的模型化,包括了CSS, DOM, Render等的实现, JavaSript Core是对JavaSript支持的实现。而Webkit部分包含了很多不同平台对Webkit封装的实现。
???? 另外,WebKit的一个优势是开始支持移动设备页面,WebKit通过一些特殊的metatag,由设备的浏览器支持,比如:
l? 自动适应设备的屏幕 
<meta name=”viewport” content=”width=device-width”/>
l? 设置缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0 
user-scalable=yes" /> 自动设置缩放的倍数以及是否允许缩放
WebKit在移动设置上还能够识别手势和触摸,这些都是HTML5目前还没有实现的功能,比如,WebKit能够识别7DOM触摸事件:
l? touchstart 单手指触摸屏幕.
l? touchmove 单手指划过
l? touchend 单手指离开
l? touchcancel 系统取消触摸
l? gesturestart 两个手指触摸
l? gesturechange 多个手指开始移动
l? gestureend 只剩下一个或更少的手指在屏幕上
支持方向改变的事件,比如当设备横屏和竖屏的事件,通过orientationchange事件中判断window.orientation的值来判断是横屏还是竖屏。
除此之外,WebKit还支持特殊标记的CSS样式表标记,比如:CSS 的转换和动画标记,还包含一个基于SQLite的客户端数据库。
?

四、????????HTML5

WebKit的另外一个最大的优势就是支持HTML5HTML5除了支持原来的DOM接口,另外增加了很多API,主要有以下几个方面的增强:
l? Canvas
Web之前有四种绘图方式:Adobe FlashSVGVML以及后来的Silverlight,而其中iOS是不支持Adobe FlashSVG的,更不要说Silverlight了,之所有这样,是因为Apple自己有了CanvasHtml5 Canvas几乎等同于iOS基层图形库Quartz 2D的全部功能,比如:图形绘制、路径绘制、二维变形、像素级绘图、动画效果等等。Canvas绘图是通过DOM获取HTML中的Canvas节点,并调用渲染上下文(Rendering Context)通过javascript进行绘制,目前有10种以上的开源的Html5图表js库。下图是图表jsHtml页面上的绘制效果:
l? 多媒体
Html5通过AudioVideo标签提供了在浏览器中不使用插件播放视频和音频的特性。
l? 本地存储
为了满足不同的存储需求,HTML5 提供了 DOM Storage  Web SQL DatabaseSQLite)两种存储机制。前者提供了易用的 key/value 对存储方式,而后者提供了基本的关系数据库存储功能离线工作。
l? 离线应用
 HTML5 中,提供了两种检测当前网络是否在线的方式,浏览器在在线状态时,把这些文件资源缓存到本地。当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用。HTML5 中,通过 cache manifest 文件指明需要缓存的资源,并支持自动和手动两种缓存更新方式。
l? 使用地理位置
Html5可以调用API从服务器取回位置信息,Google也提供了对应的API

五、????????Html5移动设备应用框架

有了WebKitHTML5的支持,很多Web开发的厂商开始转向基于移动设备的Web应用框架,比如,拥有最有名得开源js库的组织-ExtJs开始推出基于javascript+CSS3+HTML5的移动设备应用框架-Sencha(Sencha日语的意思是煎茶),Sencha 是由 ExtJSjQTouch 以及 Raphael 三个项目合并而成的一个开源项目,此举是ExtJS为了应对HTML5等新趋势,加强丰富图形和触摸屏功能的重要举措。
其中Sencha Touch的目的是让开发人员在iOSAndroid等触摸屏设备上开发出类似于SDK本地应用的Web应用程序出来,先来一个Sencha支持设备的全家福,从左到右分别是Android、黑莓、iphone4windows mobile
Sencha Touch有如下特性:
  • HTML5离线存储
  • HTML5地理定位
  • Sencha Touch icon设置
  • JSONP代理
  • YQL数据代理
  • 重力感应滚动
  • 滚动Touch事件
  • 遮罩弹出层
  • 为移动优化的表单元素
  • CSS3 Gradients
  • CSS3 Transitions
  • Multi-Card布局
  • Tab组件
  • 滚动列表视图
  • 其它……

具体大家可以用自己的移动设备去官网查看演示程序

http://dev.sencha.com/deploy/touch/examples/kitchensink/
Sencha Touch的界面是模拟的iphone iOS的界面和控件,比如按钮、拨盘、列表框,以及一些触摸的过渡效果,让Web程序看起来就像是本地应用一样,而且这些控件的样式都是集中在Sencha Touch框架的sencha-touch.css文件和sencha-touch.js文件中,开发者只需要在一个空白的html文件中引用这两个文件,直接可以写客户端独立application js放自己的实现逻辑,或者通过动态语言的由Web服务器返回Html结果。Sencha touch已经将一些常用的空间封装成js对象,界面只需要填充值就行了。
??????? Sencha Touch是纯正的WebApp,是WebApp就注定了硬件设备的一些特性,比如不支持加速计、蓝牙、地址薄、GPS、照相机。
??????? 为了充分利用硬件的特性,还有另外一种html5的移动应用框架,它通过javascript封装接口访问移动设备底层的API,比如GPS定位、重力感应、短信等,以web app的形式开发业务逻辑,并通过WebView control作为运行时环境,使其作为native app部署到不同移动OS上。通俗一点说就是,壳子是SDK的本地程序,但是其中仍然是基于Html5WebApp,这个壳子主要作用就是访问底层的硬件接口。这种框架通常提供了专门的开发环境和编译环境。
开发流程分为3步:
1、基于Html5+javascript+CSS3结合框架提供的一些接口构建程序;
2、通过框架包装成可以访问本地Api的本地程序;
3、将不同的编译结果发布到不同的平台上;

六、????????结束语

针对移动智能设备的应用开发,SDK方式和WebApp的方式都有其可取之处,也有其弊端,我总结如下几点:

SDK方式的优点:

1、可以充分发挥设备硬件和操作系统的特性

2、运行效率高,不受网络速度的限制

3、安全性高

SDK方式的缺点:

1、开发效率低,需要掌握专门的语言和IDE

2、通用性不高,不能跨平台

3、调试、发布不方便

WebApp方式的优点:

1、开发效率高,不需要专门的IDE

2、通用性、灵活性高,可以跨平台,UI界面一致

3、调试、发布方便,一次编写,到处运行

WebApp方式的缺点:

1、运行效率受网络速度的限制

2、不能发挥设备硬件和操作系统的特性

所以,排除必须要发布在App StoreAndroid Market的应用以外,根据实际应用场景,考虑选用不同的开发方式。也许随着HTML5的逐渐成熟,对于一般的Web数据应用,HTML5真的能够一统江湖。