以 HTML5 開發 Mobile Web App

大家一起來用 HTML5 開發 Mobile Web App 吧!

前言

依照目前 iPhone/Android 迅速提升市佔率的情勢來看,未來如果想要在先進的智慧型手機上撰寫應用程式,要不是選擇使用 Objective-C + CocoaTouch Framework 撰寫 iPhone/iPad 應用程式,就是選擇 Java + Android Framework 撰寫 Android 應用程式,如果想要同時支援兩種平台,勢必要維護兩套程式碼,對於剛起步的小服務而言也算是個小有負擔的維運成本。

所幸在 iPhone 及 Android 上的瀏覽器對於 HTML5 及 CSS3 的支援愈來愈好,使得原本一定要用原生的應用程式開發框架才能做出來的效果,現在很多都能利用 HTML5 或是 CSS3 的技術來完成。所以,使用 HTML5, CSS3 來撰寫 Web-based 的應用程式,若要同時支援 iPhone 及 Android,幾乎只需要維護一份程式碼(少部份要因應 clients 作修改),而且未來若有其它行動裝置擁有支援 HTML5 的瀏覽器,那同樣的 WebApp 直接就多了一個支援平台。

現況

目前大量以 HTML5 開發 Mobile WebApp 的就屬 Google 的系列服務了。在 Google 官方的部落格也早就寫了一些利用 HTML5 撰寫 Mobile WebApp 的文章,現在使用 iPhone 或 Android 透過瀏覽器連接至 GMail、Google Voice、Buzz等服務就可以看看 Google 的成果。

Gmail Mobile
GMail Mobile
Gmail Mobile
Google Buzz

Google 的系列服務使用了不少 HTML5 中的 cache、storage 及 database 規格來做到離線存取程式的效果。因為比起桌面應用程式,行動裝置的網路連線更不穩定,而且有時在移動中並無網路可以使用,透過這些技術才能讓使用者即使在無網路環境下繼續使用你的 webapp。

HTML5 中還定義了不少2D圖形處理、多媒體(Video/Audio)的技術規格,要在上面製作各種充滿視覺效果的應用程式也不是完全不可能,使用 HTML5 寫 Mobile Web App 雖然不像原生程式那樣能對行動裝置做完整的掌控,但要製作豐富的應用程式是絕對值得投入心力下去的。

開發前的準備

首先你要瞭解的是,雖然是使用 HTML5 來寫 WebApp,你還是得瞭解 HTTP、Web 的運作模式,並且瞭解如何利用 HTML/CSS/JavaScript 開發 Web 的前端畫面、互動程式。在這些基本功夫都上手之後,你需要的就是以下的資源:

  • HTML5 的規格書。當然你要瞭解 HTML5 制定了什麼規格,才知道手上有多少武器可以運用。
  • 參考資料,好的參考資料能帶你上天堂,增加學習的效率:
  • 既然是 WebApp,勢必(大多數的情況下)需要一個 Web Server,現在免費的 Web/App Server Hosting 也有不少(如:Google App Engine等),都是構成 WebApp 不可或缺的要素。

筆者將針對「以 HTML5 開發 Mobile Web App」為主軸撰寫一系列文章,希望可以幫助各位瞭解更多開發 Mobile Web App 的可能性及技巧,期待能催生出更多有趣的 Mobile Web App。

  • LiangKuo

    上官老師新文章~~搶頭香!

  • 想請問格主對於PhoneGap的看法?

  • @Jimmy,
    本質上不太一樣,PhoneGap 最後產出的還是 Native 的 App。
    用 HTML5 寫的 mobile webapp,將來在 Chrome OS 中一樣大有可為啊 😛

  • 這篇文章已經發表一年多,不過市面上似乎還是以各行動電話的app為主,是因為沒有良好的付費機制嗎?

  • Pingback: 以 HTML5 開發 Mobile Web App | Pearltrees()

  • Pingback: 遊戲引擎討論 | Cloud底()