如何活用HTML5 - 教你搭建移動Web應用

HTML5具有語義學本地存儲設備訪問連接性多媒體平面和三維效果性能和集成CSS3八大技術特徵。讓Web應用進入無插件時代,在功能和性能上逼近桌面應用。促使應用Web化,實現跨平臺。

  HTML5規範草案將於2012年發佈候選推薦版,2022年發佈計劃推薦版。規範的實現似乎還在遙遠的未來,其實不然!當前很多瀏覽器已經部分支持HTML5,caniuse.com提供了詳盡的瀏覽器支持情況。HTML5規範本身並不多,很多相關規範都被獨立出來,由瀏覽器各自實現。

      

移動Web應用方向

  手機上網已經成爲最重要的上網方式之一,手機網民已達3億。移動互聯網時代已經開啓,發展勢頭迅猛,成爲互聯網行業的新戰場。

    

  Android和iOS手機的興起,加速了HTML5在移動設備的普及。與桌面瀏覽器不同的是,移動操作系統和瀏覽器隨着手機的換代而不斷升級。移動瀏覽器的不斷升級,給HTML5在移動Web方向的發展提供源源不斷的動力。也隨着設備性能的不斷提高,移動Web應用的能力也漸漸逼近客戶端應用。

    

  移動Web應用對比客戶端應用的優勢:

  1. 更多開發人員有豐富的Web開發經驗和工具積累,也形成了成熟的開發社區
  2. 迭代更敏捷,實現持續更新
  3. 跨平臺,開發成本比客戶端的較低

Web應用宿主選擇

  Web都有宿主,宿主是運行程序所需要的環境。Web常見的宿主有IE、FF、Chrome這些瀏覽器。Javascript也運行在服務器端宿主,如node.js。在移動設備,移動Web可以運行在移動瀏覽器上,也可以運行在PhoneGap或Titanium等框架宿主上。當然我們也可以根據跨平臺需要編寫自己框架宿主。

              

  框架宿主優勢:

  1. 已形成成熟的社區,便於解決問題
  2. 如PhoneGap等,比瀏覽器擁有更高權限。可以訪問聯繫人、文件、攝像頭、錄音等設備
  3. 可以通過模擬器進行測試,減少跨瀏覽器測試成本

  框架宿主劣勢

  1. 以客戶端形式發佈,版本更新難度大,動態發佈需要額外代碼支持
  2. 系統有可能只支持單進程
  3. 產品之間無法跳轉,不容易銜接

           

                        PhoneGap兼容性


  移動瀏覽器是系統附帶的,不需要發佈,隨着系統升級而更新。在沒有權限要求和高端目標設備的情況下,瀏覽器宿主作爲移動Web應用宿主更爲適合。

  Android瀏覽器   Mobile Safari

  瀏覽器宿主優勢:

  1. 無需發佈,瀏覽器一般還支持桌面快捷方式
  2. 產品更新維護方便,可以實現持續更新
  3. 移植性高(相對框架宿主的一些自定義接口)

  瀏覽器宿主劣勢:

  1. 瀏覽器兼容不高,對HTML5支持有差異
  2. 性能差異大,必須考慮設備間處理能力的差異
  3. 測試成本大(特別是Android系統設備),無法覆蓋所有機型

移動Javascript框架

  在HTML5的支持下,交互集成取代Javascript瀏覽器兼容性成了移動Javascript框架的發展方向。其中jQuery Mobile和Sencha Touch最受追捧。

他們主要解決:

  1. 交互(包括UI設計、控件交互、頁面切換等)集成
  2. Touch手勢

                  

  交互集成框架優勢:

  1. 交互都符合設備交互特點和設計規範(Android和iOS)
  2. 開發門檻低,適合快速開發
  3. 開發社區已經有豐富的跨平臺經驗和較全面的測試結果

  交互集成框架劣勢:

  1. 文件體積較大,效率往往不如原生HTML5
  2. 交互模式固定,難以擺脫
  3. 沒有完善的業務框架,還需要自己實現基礎業務框架(代碼更新、業務模塊重用等)

      

                            jQuery Mobile 兼容性

    除了交互集成框架,我們還可以考慮使用原生HTML5開發自己的移動Javascript框架。自己開發更有針對性和目的性,適合業務擴展和性能優化,可以彌補集成框架的缺陷。

  原生HTML5框架優勢:

  1. 最適合長期業務擴展
  2. 開發靈活度更高
  3. 可針對目標設備的性能優化

  原生HTML5框架劣勢:

  1. 暫時只能兼容高端設備(Android2.0+、iOS3.2+性能較佳)
  2. 跨平臺測試成本比較高
  3. 框架開發門檻比較高,需要一段時間發展

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章