HTML5、WebKit与移动应用开发

一、        前言

微软之所以能够在过去几十年间称霸IT业，主要是凭借一项无法超越的优势：Windows操作系统，目前快速发展的移动设备成为IT业关注的重点，有可能移动互联网应用将会是IT业下一个高速增长点（也可能是泡沫），犹如2001年的互联网一般。而在移动操作系统上，现在看来微软的Windows Mobile操作系统完全不值一提，就算是其最新的WP7也不再受人关注，现在大家的目光都集中在两家重量级公司Google和Apple出品的Android和iOS移动操作系统上，其他的什么MeeGo、RIM、Symbian统统都只能让路，网上充斥的都是一些“我该买Iphone4还是HTC?”、“我该学Android开发还是iOS开发呢？”这些类二选一问题，可见Android和iOS的风靡程度。

移动操作系统的风靡得益于这几年来移动互联网设备的迅猛发展，从智能手机到平板电脑，CPU从单核到双核以致于四核，目前移动互联网设备的特点，主要有以下特点

1、屏幕大，几乎就是整个机身

2、支持手指触摸以及多点触摸

3、没有输入键盘，取而代之的是屏幕虚拟键盘

4、支持高速无线连接(Wifi 54Mbit/s)

5、支持EDGE网络低速（220kbit/s）连接

6、支持“永远在线”的3G网络连接（384kbit/s-数Mbit/s）

7、支持位置定位(GPRS),现在几乎是必须的

8、大内存、高速的CPU设置独立的GPU

        除了强大的硬件特性，之所以移动智能设备能够风靡全球，还在于它庞大的软件应用，2007年apple发布了第一款iphone手机，起初apple是不欢迎第三方应用开发人员开发iphone下的应用软件的(apple安抚那些超级崇拜iphone的开发人员的办法是：允许他们开发基于Web的应用)，直到2008年，apple提供了针对Iphone的SDK,并正式开放了App Store应用市场，这种创新之举不仅给第三方开发者带来了巨大利益，同时Apple的智能设备事业也进入了高速、良性的发展的轨道，App Store可以说的上是智能设备和移动应用的里程碑，使得第三方软件的提供者的积极性空前高涨，Google在发布Android智能设备后的第一件事就是开放了Android Market与Apple相抗衡。就是这样，目前Apple和Google设备上的应用总和已经数以百万计了。

        目前，在AppStore和Android Market上的应用都是基于两大公司提供给第三方应用开发人员的SDK进行开发的，Apple提供的是基于Objective-C语言的iOS SDK开发，Android提供的基于JAVA语言的Andorid SDK开发。两者都能够充分的发挥各自硬件的最大特性，从开发角度而言，Objective-C可能对很多开发人员都很陌生，很多开发人员都是从头开始学习的，个人认为Objective-C本身虽然是基于C的扩展，但是其面向对象的设计思想，学习起来还是比较容易上手的，而Android基于Java语言，可以让很多Java开发人员快速转入到Android SDK的开发，省去了不少学习成本，并且提高了开发效率。总的比较起来，我个人认为iOS SDK更加成熟，因为iOS SDK是Apple应用了多年的系统，有坚实的根基，而且基于C的运行效率比JAVA的运行效率要高很多，Objective-C不支持自动回收，大大的节省了系统资源，并且非常省电，而且iOS系统的多后台运行机制，让只有256M的RAM的设备也能够运行的非常流畅，另外，Apple独此一家的硬件规格，让开发人员不再为设备的兼容性考虑太多问题。而Android基于Java虚拟机机制，对系统的要求比较高，而且众多厂家推出的不同的屏幕分辨率的硬件，让开发人员不得不去考虑怎么让UI适应不同的分辨率。

二、        WEB开发

        除了基于SDK开发的方式，移动智能设备还支持Web开发方式（iphone iOS上的App Store就是一个典型的WebApp），因为移动智能设备的最基础的特点就是移动互联网的应用，iOS和Android都内置了基于WebKit内核的浏览器，iOS中浏览器是Safari Mobile，Android中的浏览器是移动版的Google浏览器，两种浏览器都支持各种标准的Web技术，比如HTML、CSS、JavaScript、PHP、Ruby On Rails和Python。这里不得不提的是WebKit内核，WebKit是一个开源的浏览器引擎，与之对应的有IE的Trident引擎，以及FireFox的Gecko引擎，WebKit内核的浏览器在移动设备上应用非常广泛，比如Andorid、iOS、NOKIA S60、黑莓上的浏览器都是基于WebKit。

三、        WebKit

        WebKit在Apple的推动下，对HTML5和CSS3标准支持的非常好，可以浏览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 OS，Palm推出的第一款基于WebKit的操作系统

5、Linux ，Linux下的Midori，Google Chrome，GNOME的Epiphany、KDE的Konqueror，Arora都是现在Linux系统下主要的Webkit内核浏览器

6、Windows下的很多浏览器，safari for windows，google chrome，搜狗双核浏览器

     作为浏览器的内核，Webkit作用就是输入一个HTML文档，然后输出一个WEB页面，WebKit由三部分组成，WebCore, JavaSript Core和WebKit，其中，WebCore是Webkit的核心部分，它实现了对文档的模型化，包括了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能够识别7种DOM触摸事件:

l  touchstart 单手指触摸屏幕.

l  touchmove 单手指划过

l  touchend 单手指离开

l  touchcancel 系统取消触摸

l  gesturestart 两个手指触摸

l  gesturechange 多个手指开始移动

l  gestureend 只剩下一个或更少的手指在屏幕上

支持方向改变的事件，比如当设备横屏和竖屏的事件，通过orientationchange事件中判断window.orientation的值来判断是横屏还是竖屏。

除此之外，WebKit还支持特殊标记的CSS样式表标记，比如：CSS 的转换和动画标记，还包含一个基于SQLite的客户端数据库。

四、        HTML5

WebKit的另外一个最大的优势就是支持HTML5，HTML5除了支持原来的DOM接口，另外增加了很多API，主要有以下几个方面的增强：

l  Canvas

Web之前有四种绘图方式：Adobe Flash，SVG和VML以及后来的Silverlight，而其中iOS是不支持Adobe Flash和SVG的，更不要说Silverlight了，之所有这样，是因为Apple自己有了Canvas。Html5 Canvas几乎等同于iOS基层图形库Quartz 2D的全部功能，比如：图形绘制、路径绘制、二维变形、像素级绘图、动画效果等等。Canvas绘图是通过DOM获取HTML中的Canvas节点，并调用渲染上下文（Rendering Context）通过javascript进行绘制，目前有10种以上的开源的Html5图表js库。下图是图表js在Html页面上的绘制效果：

l  多媒体

Html5通过Audio和Video标签提供了在浏览器中不使用插件播放视频和音频的特性。

l  本地存储

为了满足不同的存储需求，HTML5 提供了 DOM Storage 和 Web SQL Database（SQLite）两种存储机制。前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能离线工作。

l  离线应用

在 HTML5 中，提供了两种检测当前网络是否在线的方式，浏览器在在线状态时，把这些文件资源缓存到本地。当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 中，通过 cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。

l  使用地理位置

Html5可以调用API从服务器取回位置信息,Google也提供了对应的API。

五、        Html5移动设备应用框架

有了WebKit和HTML5的支持，很多Web开发的厂商开始转向基于移动设备的Web应用框架，比如，拥有最有名得开源js库的组织-ExtJs开始推出基于javascript+CSS3+HTML5的移动设备应用框架-Sencha(Sencha日语的意思是煎茶),Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个开源项目，此举是ExtJS为了应对HTML5等新趋势，加强丰富图形和触摸屏功能的重要举措。

其中Sencha Touch的目的是让开发人员在iOS或Android等触摸屏设备上开发出类似于SDK本地应用的Web应用程序出来，先来一个Sencha支持设备的全家福，从左到右分别是Android、黑莓、iphone4和windows 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的本地程序，但是其中仍然是基于Html5的WebApp，这个壳子主要作用就是访问底层的硬件接口。这种框架通常提供了专门的开发环境和编译环境。

开发流程分为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 Store或Android Market的应用以外，根据实际应用场景，考虑选用不同的开发方式。也许随着HTML5的逐渐成熟，对于一般的Web数据应用，HTML5真的能够一统江湖。

来源：oschina

链接：https://my.oschina.net/u/102880/blog/60117