HTML五、WebKit與移動應用開發

1、        前言

微軟之因此可以在過去幾十年間稱霸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適應不一樣的分辨率。

2、        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。

3、        WebKit

        WebKit在Apple的推進下，對HTML5和CSS3標準支持的很是好，能夠瀏覽http://developer.apple.com/safaridemos/ 體驗一下WebKit下運行HTML5的效果，能夠在Google瀏覽器或者Apple Safari瀏覽器下進行瀏覽，兩種瀏覽器下的效果幾乎是一致的。

        WebKit在運用到Mac Os上的Safari以後，Webkit很快被普遍地移植到其餘系統平臺：

一、Apple iOS

二、Android Google瀏覽器

三、Nokia S60 的Web Browser for S60

四、Web OS，Palm推出的第一款基於WebKit的操做系統

五、Linux ，Linux下的Midori，Google Chrome，GNOME的Epiphany、KDE的Konqueror，Arora都是如今Linux系統下主要的Webkit內核瀏覽器

六、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的值來判斷是橫屏仍是豎屏。

CSS 的轉換和動畫標記，還包含一個基於SQLite的客戶端數據庫。除此以外，WebKit還支持特殊標記的CSS樣式表標記，好比：

4、        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。

5、        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步：

一、基於Html5+javascript+CSS3結合框架提供的一些接口構建程序；

二、經過框架包裝成能夠訪問本地Api的本地程序；

三、將不一樣的編譯結果發佈到不一樣的平臺上；

6、        結束語

針對移動智能設備的應用開發，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真的可以一統江湖。