伴隨著移動設備的快速崛起，App市場的發展也日漸迅猛，目前iOS和Android平臺的App數量總和也達到100萬款之多，據AAWP報道，Windows Phone的應用市場數量已突破8萬，晉升成為第三大應用平臺。移動數據分析公司Flurry在2011年App趨勢報告中顯示，人們花費在App上的時間已經超過人們瀏覽網頁的時間。
未來App的市場呈現一片光明景象，而對于移動開發商來說，不同平臺的應用則需要開發不同的App來支持，無論在更新及維護上都需要一定的成本。于是更多人想到了基于HTML5的Web App，目前主流操作系統iOS、Android以及Windows Phone的瀏覽器都對于html5大部分特性的支持也更加突顯HTML5在未來移動設備端的地位。那么HTML5有何前景呢，接下來我們一起來討論 HTML5和Web App：
談到Web App，我們就不得不先想到Native App，目前我們在App Store上下載的ipa以及我們在Google play store或其他網站下載的apk都是屬于Native App，那么這種App有什么優勢和劣勢呢?
Native App的優勢：
1、優秀的用戶體驗和華麗的交互操作，能夠針對不同平臺提供不同用戶體驗;
2、可不受網絡速度限制，節省帶寬成本;
3、可訪問本地硬件設備和資源;
4、盈利模式明朗。
Native App的劣勢：
1、不同平臺之間的移植麻煩;
2、維持多個版本的成本比較高;
3、需要通過第三方審核;
4、盈利需要與第三方分成。
針對Native App的不足，Web App很好了彌補了這些劣勢，開發商只需了解HTML5、CSS3、js以及Device API即可完成應用在多終端設備和平臺的運行，很好的保證了應用跨平臺的一致性，相對于Native App開發成本更低，同時更新維護更容易，用戶幾乎沒有安裝成本，也更加自由和開放。但任何新技術總是有利有弊，Web App其自身也會遇到在用戶體驗、UI效果及調用本地設備和資源的相關問題。
雖然2種模式各有優缺，但隨著移動設備及html5的迅猛發展，讓微軟和喬布斯也意識到：只有HTML5才是web未來。從著名移動云平臺公司Appcelerator發布的調查報告可以看到HTML5 Mobile Web已經上升為第4位。
眾所周知，HTML5不僅僅給我們帶來了更多語義化的標簽，還有canvas繪圖、音頻視頻、本地存儲、離線應用、地理位置定位等新特性。
接下來我們從App的角度來看看HTML5帶來的這些特性：
特性一、Canvas繪圖
Canvas在網頁中類似于Flash的作用，是HTML5引入的一個新的標簽，但其本身并不具備畫圖的能力，只是為JavaScript提供一個繪制圖像的區域，可以使用JavaScript來繪制圖形、編輯圖象。如Harmony，基于Canvas的一個繪圖工具，使用其提供的獨特畫筆樣式，在 iPhone和Andriod手機上可以繪制一些精美的鉛筆素描風格。
可參考：http://www.html5rocks.com/en/tutorials/canvas/integrating/
很多HTML5站點也利用Canvas實現繪畫功能和在線圖像編輯功能，如Sketchpad，一個在線畫板，擁有類似Windows 畫筆的所有功能;CloudCanvas，基于HTML5的免費在線圖像編輯軟件，可以實現AI和PS的一些矢量與位圖的編輯功能。
特性二、Local Storage(本地存儲)
我們知道很多App下載安裝后，都是基于本地離線緩存運行，而無需請求網站。Web Storage很好的解決了之前Cookie的大小不能超過4K的尷尬和不同瀏覽器針對每個域名下Cookie數的限制。Web Storage可分為local storage和session storage，local storage提供了5MB的存儲空間，而sessiong storage甚至沒有限制。不僅在啟動App的時候可以加載緩存數據來加快啟動和顯示速度，還可以減少網絡流量，離線運行App。
Google之前用Google Gears這個瀏覽器插件來解決網頁應用的離線使用，如離線使用Gamil，隨著瀏覽器對HTML5新標準的支持，Gears也逐漸被拋棄。目前 Google Reader利用HTML5離線技術，可以讓用戶離線閱讀訂閱的最新瀏覽過的文章。
特性三、Geolocation(地理定位)
Geolocation API是W3C新添加的一個API規范，可以用通過瀏覽器來獲取用戶的地理位置。對瀏覽器版本要求相對較高，目前能支持的瀏覽器有IE9.0+、 FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+。可以通過 geolocation 下的 getCurrentPosition 方法來獲取用戶的信息
navigator.geolocation.getCurrentPosition( getPositionSuccess ， getPositionError );
同時還可以綜合GoogleMaps API來監控用戶的位置讓其在地圖上顯示用戶的準確位置。具體的使用大家可以google下，相應的介紹文檔較多，在此不再類述。
目前移動設備上的定位特性更多的體現在社交類型的LBS應用中，如微信，手機QQ、微博、Google Map等。
特性四、音頻視頻
HTML5定義了兩個新的標簽video和audio，音視頻自由的嵌入頁面，讓多媒體的形式也更為靈活。特別是在iPhone和iPad對flash的不支持，
HTML5的音視頻顯得尤為重要。同時HTML5嵌入代碼更簡潔，如網站上的視頻，調用flash需要很長一段代碼：
那么使用HTML5代碼只需一行：
特性五、對CSS3的更好支持
CSS3雖然不是HTML5的特性，但對于CSS3的新特性如：border-radius、border-image、box-shadow、 transform、transitions、animation、user-interface等在HTML5瀏覽器上表現最佳。
用過Path的同學肯定會對里面的交互表現贊嘆不已，
來看看國外victor用純CSS3實現的同樣動畫效果吧。http://namepk.sinaapp.com/blog/path/
除了上面列舉的HTML5特性外，還有很多重要的特性如WebGL、SVG、Form、Web SQL Database、Web Worker、Web Socket、Drag&Drop等，在此不再一一描述，
目前HTML5的規范還在制定和討論中，在運用Web App開發過程中仍然會遇到對事件的響應速度頁面渲染等性能問題、不同機型及web瀏覽器內核的兼容性問題、對于移動設備硬件資源的訪問等眾多問題，業界也出現了很多如PhoneGap、Sencha Touch、Jquery Mobile等移動設備開發框架，同時也有以HTML5+Native加殼方式的App如網易博客Android客戶端，各種新技術的嘗試和主流瀏覽器及各大智能機操作系統對HTML5特性的支持，HTML5未來在移動終端的發展無疑讓大家更加期待。
作者：Bobe
文章來源：騰訊GDC