Android WebApp 開發教學 (2) - HTML5 Web Storage


Introduction - 前言

今天來介紹使用 Android WebView 元件結合 HTML5 API 來開發 WebApp,首先讓我們來看看 WebApp 有哪些優點?

  1. 使用 HTML5 開發,理論上跨平台
  2. 對於網頁開發之人員,可使用以往熟悉的方法開發 App

奇怪,Web 開發不是標準規範嗎?為什麼說理論上跨平台呢?因為其實各種瀏覽器對於 HTML5 的實作與支援程度並不同。加上有時候為了彌補 HTML5 功能不足,使用了 JavaScript Bridge 技術來呼叫 Native 程式進行溝通,這些作法在跨平台的特性上都是扣分的。但是如果配合有效的底層設計,藉此實作較為泛用的介面,確實可以降低一些跨平台的問題(像是 PhoneGap 的作法)。

當然 WebApp 有優點也有缺點,由於 WebApp 是在瀏覽器中執行,這樣的架構下最大的致命傷就是速度慢。但我們似乎能相信未來的手機運算速度會越來越快,現在 WebApp 的速度慢問題應該或許可能不一定是個重要的問題.......除了剛剛提到的小問題之外,還有一個缺點就是 HTML5 API 威力有限,在實際運用上做不到的事情還挺多的,如果真要用這樣的架構來開發功能比較強大的 App,還是逃不了撰寫原生程式來滿足需求。

我們先來看看下面典型的 WebApp 架構圖,WebApp 主要由程式內嵌的瀏覽器來執行,而 WebView 還可以有一些薄弱的能力與瀏覽器中的 JavaScript Runtime 進行交涉,藉此發展出 JavaScript Bridge 的機制:

在上面的架構圖中發現,其實要學的東西也不少呢。大致上如果你想要開發 WebApp,以下有幾點是具備的技能:

  • DOM (Document Object Model) 操作
  • JavaScript
  • HTML5 API
  • CSS3
  • 善用 Library (例如:jQuery, jQuery Mobile, Sencha Touch 2, PhoneGap, Processing.js 等等)

接下來讓我們用 HTML5 API 來實作 Android WebApp。

HTML5 Web Storage API 使用教學

關於 Android WebApp 開發環境建立在此不多著墨,請參考「Android WebApp 開發教學 - HTML5 WebView 行動應用」這一篇文章。記得要在 Activity Class 中設定 WebView 要開啟 WebStorage 的功能,如下程式碼:

這次要介紹的 HTML5 Web Storage API 可分為 Local Storage 與 Session Storage,兩者之間的差異在於 Session Storage 當瀏覽器關閉時就會被清除,而 Local Storage 則會持續保留。以下我們利用 Local Storage 來實作「聯絡簿 App」之新增與查詢功能,主要會用到以下兩個 HTML5 JavaScript 函式:

此外一提,Web Storage 是採用 Key/Value 的方式操作,用來儲存的 Value 僅能夠為字串格式,這時借用 JSON 便可以加強 Web Storage 之能力(JSON為一種輕量級的資料格式)。但如果您的資料儲存需求更為複雜,那就需要用到 SQL Database 或者 IndexedDB 這些更適合處理資料的 HTML5 API 了。

以下我們使用 Android 2.2 + WebView 元件 + jQuery + HTML5 Web Storage API 實作了簡易「聯絡簿 App」,以下是 index.html 的程式碼:

為了將畫面與邏輯分離,上述的 index.html 僅實作的顯示使用者介面,與業務邏輯相關的程式碼我們把它寫在 contacts_html5.js 檔案中。以下是 contacts_html5.js 的內容:

程式執行後我們可以按下「刷新聯絡簿」來讀取 Local Storage 中的 JSON 轉換後顯示在 <table> 中,也可以輸入姓名與電話欄位後安下「新增」來加入新的人員名單,此外將 App 關閉後再次進入,仍然能夠由 Local Storage 讀取之前儲存的資料。下圖為 WebApp 程式在 Android 模擬器的執行結果:

由於是使用 HTML5 來實作資料的儲存,這個網頁也能夠由支援 HTML5 的瀏覽器開啟而獲得一樣的功能。以下是使用 Google Chrome 開啟的結果,開啟後按下「F12」啟動開發者工具,我們可以在 Resources 標籤中的 Local Storage 看到經由 HTML5 儲存的資料:

實作這樣的「聯絡簿」功能實在有些無聊,更何況手機本來就有聯絡簿了,何必自己搞一個呢?說的也是,如果是結合手機聯絡簿進行管理不是更好嗎?但要讀手機聯絡簿 HTML5 API 似乎沒這招,難道用 WebView 實作的 WebApp 就得這樣放棄了嗎?別忘了我們還有 JavaScript Bridge 的技術可以用,下一篇文章就來給各位介如何在 WebApp 加入 PhoneGap 來突破 HTML5 的限制。

Reference - 參考資料

系列文章

Facebook 留言

廣告

樂樂童鞋