隨著移動設備快速崛起，App 市場發展迅猛。iOS 和 Android 平台 App 總量達 100 萬款，Windows Phone 應用市場突破 8 萬，成第三大平台。Flurry 2011 年報告顯示，人們花在 App 上的時間已超過瀏覽網頁。

未來 App 市場光明，但移動開發商面臨不同平台需開發不同 App、更新維護成本高的問題。於是更多人想到基於 HTML5 的 Web App。主流系統 iOS、Android、Windows Phone 瀏覽器對 HTML5 大部分特性支持更好，凸顯 HTML5 在未來移動端地位。接下來討論 HTML5 和 Web App。

Native App 優勢與劣勢

目前 App Store 下載的 ipa、Google Play 下載的 apk 皆屬 Native App。

優勢：

1. 優秀用戶體驗和華麗交互操作，可針對不同平台提供差異化體驗；
2. 不受網絡速度限制，節省帶寬成本；
3. 可訪問本地硬體設備和資源；
4. 盈利模式明朗。

劣勢：

1. 不同平台間移植麻煩；
2. 維持多版本成本高；
3. 需通過第三方審核；
4. 盈利需與第三方分成。

針對 Native App 不足，Web App 很好彌補：開發商只需懂 HTML5、CSS3、JS 和 Device API 即可完成多終端運行，保證跨平台一致性，開發成本更低，更新維護更易，用戶幾乎無安裝成本，更自由開放。但 Web App 自身在用戶體驗、UI 效果、調用本地設備資源等方面仍有問題。

雖兩種模式各有優缺，但隨移動設備及 HTML5 迅猛發展，微軟和喬布斯也意識到：只有 HTML5 是 Web 未來。Appcelerator 調查報告顯示 HTML5 Mobile Web 已上升為第 4 位。

HTML5 關鍵特性在 App 視角的應用

特性一：Canvas 繪圖

Canvas 類似 Flash 作用，為 JavaScript 提供繪圖區域。如 Harmony，基於 Canvas 繪圖工具，在 iPhone 和 Android 上可繪製精美鉛筆素描風格。
參考：HTML5 Rocks Canvas 教程

許多 HTML5 站點利用 Canvas 實現繪畫和在線圖像編輯，如 Sketchpad（在線畫板，擁有 Windows 畫筆所有功能）、CloudCanvas（免費在線圖像編輯軟體，實現 AI 和 PS 部分矢量與位圖編輯功能）。

特性二：Local Storage（本地存儲）

許多 App 基於本地離線緩存運行。Web Storage 解決了 Cookie 4KB 大小限制和各瀏覽器域名下 Cookie 數限制。分 local storage（5MB）和 session storage（無限制）。不僅啟動時加載緩存加快顯示速度，還可減少網絡流量、離線運行 App。
Google 早用 Google Gears 解決離線使用（如離線 Gmail），隨瀏覽器支持 HTML5 新標準，Gears 被拋棄。Google Reader 利用 HTML5 離線技術讓用戶離線閱訂閱文章。

特性三：Geolocation（地理定位）

W3C 新增 API 規范，通過瀏覽器獲取用戶地理位置。需較高瀏覽器版本（IE9+、FF3.5+、Safari5+、Chrome5+、Opera10.6+）。可用 navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError) 獲取信息，結合 Google Maps API 監控位置顯示在地圖上。移動端定位特性多體現在社交 LBS 應用：微信、手機 QQ、微博、Google Map 等。

特性四：音頻視頻

HTML5 定義 <video> 和 <audio> 標籤，音視頻自由嵌入頁面，多媒體形式更靈活。特別是 iPhone/iPad 不支持 Flash，HTML5 音視頻顯得尤為重要。嵌入代碼更簡潔：調用 Flash 需很長代碼，HTML5 只需一行。

特性五：對 CSS3 更好支持

CSS3 新特性（border-radius、box-shadow、transform、transitions、animation 等）在 HTML5 瀏覽器上表現最佳。用過 Path 的同學肯定對其交互表現贊歎不已。

看看國外 victor 用純 CSS3 實現同樣動畫效果：Demo

除上述特性外，還有 WebGL、SVG、Form、Web SQL Database、Web Worker、Web Socket、Drag&Drop 等重要特性。HTML5 規范仍在制定討論中，Web App 開發仍面臨響應速度、頁面渲染性能、不同機型及瀏覽器內核兼容性、硬件資源訪問等問題。業界出現 PhoneGap、Sencha Touch、Jquery Mobile 等開發框架，也有 HTML5+Native 殼模式（如網易博客 Android 客戶端）。各種新技術嘗試和主流瀏覽器、智能機系統對 HTML5 特性支持，讓 HTML5 在移動終端的未來發展更令人期待。

作者：Bobe
文章來源：騰訊 GDC