HTML5 - 搭建移動Web應用
關于HTML5
HTML5具有語義學、
本地存儲、
設備訪問、
連接性、
多媒體、
平面和三維效果、
性能和集成和
CSS3八大技術特征。讓Web應用進入無插件時代,在功能和性能上逼近桌面應用。促使應用Web化,實現跨平臺。
HTML5規范草案將于2012年發布候選推薦版,2022年發布計劃推薦版。規范的實現似乎還在遙遠的未來,其實不然!當前很多瀏覽器已經部分支持HTML5,caniuse.com提供了詳盡的瀏覽器支持情況。HTML5規范本身并不多,很多相關規范都被獨立出來,由瀏覽器各自實現。
移動Web應用方向
手機上網已經成為最重要的上網方式之一,手機網民已達3億。移動互聯網時代已經開啟,發展勢頭迅猛,成為互聯網行業的新戰場。
Android和iOS手機的興起,加速了HTML5在移動設備的普及。與桌面瀏覽器不同的是,移動操作系統和瀏覽器隨著手機的換代而不斷升級。移動瀏覽器的不斷升級,給HTML5在移動Web方向的發展提供源源不斷的動力。也隨著設備性能的不斷提高,移動Web應用的能力也漸漸逼近客戶端應用。
移動Web應用對比客戶端應用的優勢:
- 更多開發人員有豐富的Web開發經驗和工具積累,也形成了成熟的開發社區
- 迭代更敏捷,實現持續更新
- 跨平臺,開發成本比客戶端的較低
Web應用宿主選擇
Web都有宿主,宿主是運行程序所需要的環境。Web常見的宿主有IE、FF、Chrome這些瀏覽器。Javascript也運行在服務器端宿主,如node.js。在移動設備,移動Web可以運行在移動瀏覽器上,也可以運行在PhoneGap或Titanium等框架宿主上。當然我們也可以根據跨平臺需要編寫自己框架宿主。
框架宿主優勢:
- 已形成成熟的社區,便于解決問題
- 如PhoneGap等,比瀏覽器擁有更高權限。可以訪問聯系人、文件、攝像頭、錄音等設備
- 可以通過模擬器進行測試,減少跨瀏覽器測試成本
框架宿主劣勢:
- 以客戶端形式發布,版本更新難度大,動態發布需要額外代碼支持
- 系統有可能只支持單進程
- 產品之間無法跳轉,不容易銜接
PhoneGap兼容性
移動瀏覽器是系統附帶的,不需要發布,隨著系統升級而更新。在沒有權限要求和高端目標設備的情況下,瀏覽器宿主作為移動Web應用宿主更為適合。
Android瀏覽器
Mobile Safari
瀏覽器宿主優勢:
- 無需發布,瀏覽器一般還支持桌面快捷方式
- 產品更新維護方便,可以實現持續更新
- 移植性高(相對框架宿主的一些自定義接口)
瀏覽器宿主劣勢:
- 瀏覽器兼容不高,對HTML5支持有差異
- 性能差異大,必須考慮設備間處理能力的差異
- 測試成本大(特別是Android系統設備),無法覆蓋所有機型
移動Javascript框架
在HTML5的支持下,交互集成取代Javascript瀏覽器兼容性成了移動Javascript框架的發展方向。其中jQuery Mobile和Sencha Touch最受追捧。
他們主要解決:
- 交互(包括UI設計、控件交互、頁面切換等)集成
- Touch手勢
交互集成框架優勢:
- 交互都符合設備交互特點和設計規范(Android和iOS)
- 開發門檻低,適合快速開發
- 開發社區已經有豐富的跨平臺經驗和較全面的測試結果
交互集成框架劣勢:
- 文件體積較大,效率往往不如原生HTML5
- 交互模式固定,難以擺脫
沒有完善的業務框架,還需要自己實現基礎業務框架(代碼更新、業務模塊重用等)
jQuery Mobile 兼容性
除了交互集成框架,我們還可以考慮使用原生HTML5開發自己的移動Javascript框架。自己開發更有針對性和目的性,適合業務擴展和性能優化,可以彌補集成框架的缺陷。
原生HTML5框架優勢:
- 最適合長期業務擴展
- 開發靈活度更高
- 可針對目標設備的性能優化
原生HTML5框架劣勢:
- 暫時只能兼容高端設備(Android2.0+、iOS3.2+性能較佳)
- 跨平臺測試成本比較高
- 框架開發門檻比較高,需要一段時間發展
參考資料