HTML5 - 搭建移動Web應用

作者: gzterrytan  來源: 博客園  發布時間: 2011-03-10 16:56  閱讀: 5971 次  推薦: 0   原文鏈接   [收藏]  

  關于HTML5

  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. 交互模式固定,難以擺脫

  沒有完善的業務框架,還需要自己實現基礎業務框架(代碼更新、業務模塊重用等)     

jQuery Mobile 兼容性

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

  原生HTML5框架優勢:

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

  原生HTML5框架劣勢:

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

  參考資料

  http://www.caniuse.com

  http://www.w3.org

  《2010年中國手機上網用戶行為研究報告》

  《2010-2011年中國智能手機市場研究年度報告》

0
0
 
標簽:HTML5 Web
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()