Web App 行動開發 (1) - Web App 開發介紹

12 年前

App 三大開發陣營

App 近年真的大放異彩，App Store 也是一個讓沒有直接銷售管道的軟體研發工程師，有個築夢的環境與機會。想要開發 App 的方法有很多種，我們先來介紹一下主要的 App 開發方式有哪些種類，主要分為三大陣營：

Native App

原生程式 App，使用原生程式語言開發，例如：Android 用 Java、iOS 用 Object-C。優點：速度快；缺點：無跨平台能力、必須學習專有語言。

Web App

利用 App 內嵌瀏覽器利用 Web 技術實作功能。優點：跨平台、使用 Web 標準技術；缺點：API 功能有限、速度不如原生程式。

Hybrid App

混合式 App 結合 Web App 跨平台能力與原生程式的速度優勢，可保留 Web App 部分跨平台的能力，將複雜與高運算的行為交由 Native 程式處理。優點：部分跨平台 / 速度尚可；缺點：實作架構複雜、整合技術有門檻。

行動作業系統兩大主流 iOS 與 Android 陣營

接下來介紹目前市佔率最較高的兩種行動裝置作業系統 iOS 與 Android，比較如下：

Google Android

原生開發語言 Java
開發成本低、設備便宜
Google Play 上架憑證一次付款終身享用
軟體售價低、競爭激烈
OS 版本混亂且碎片化 (如下圖)
裝置效能與螢幕解析度不一、測試工作繁瑣

Apple iOS

原生開發語言 Objective-C / C++
設備昂貴、開發成本高
iTunes Store 每年需繳年費（年繳保護費制）
市場穩定、軟體單價高
OS 系統穩定且資源品質高
設備單純、效能規格高

今天的主角 What’s Web App

以下是我對 Web App 的定義：

利用 App 內嵌 Browser 來開啟網頁，使用 Web 技術實作適合行動裝置操作的應用程式。

然而在開發 Web App 通常會用到以下幾種主要的技術：

HTML 5
CSS 3
JavaScript
JavaScript Bridge（一種與 Native 溝通的技術）

大部分的網頁開發者會選擇 Web App 是因為至少在程式語言上比較熟悉，但許多 Web Designer 並不常在傳統的 Web 開發上使用到 HTML 5 的相關技術，原因是我們很難限制使用者必須使用符合 HTML 5 實作的瀏覽器來觀看網站，因此 HTML 5 都是以輔助的角色存在我們的設計中。

但是 Web App 就不一樣了，瀏覽器是我們自己內嵌的，很容易控制執行效果。那麼現在的瀏覽器對 HTML 5 的支援情況究竟如何呢？可參考以下圖表 (來至 THE HTML5 TEST 網站)：

上表很明顯 Google Chrome 與 Safari 對於 HTML 5 的支援是足夠的，可以作為未來開發的參考。

為何要選擇 Web App 開發

通常會選擇 Web App 開發架構有以下幾種原因與優勢：

優異的跨平台能力 - 由於目前手機作業系統無法統一，也很難預測未來誰是大宗，以長遠的角度來看，能夠採用跨平台的技術是在好不過的。由時候也礙於研發能量有限，無法有足夠的資源滿足各種平台上的實作，也是其中的原因。

使用 Web 開發人員熟悉的技術 - 倘若你原本就是 Web Software Engineer，那麼直接利用現有的程式開發技巧來跨入 App，門檻較低。很多人已經預測未來的應用程式只會剩下 Web 這樣的形態存活，採用標準化的 Web 開發技術也是有利的策略。但依據我的經驗，若是用傳統 Web 的開發思維來開發 Web App，其實是不夠的。Web App 比較適合有 Web 開發經驗的老手，畢竟常使用到的技巧都是較新且較複雜的架構。至於 Flash....... 大家都應該明白它的下場，真慶幸當初沒有好好學 Flash！

開發環境單純 - 要開發 Web App 裝個瀏覽器即可達到最低需求，一般測試根本不需要上機測，等大致完工或需要呼叫硬體時再佈署到實機上測試即可。

但 Web App 其實還是有缺點的，例如：Android 執行速度不佳（除非高階機種）、能力不如 Native 強大（需要借助JavaScript Bridge 技術）、記憶體耗量高、CSS 渲染技術實作不一致。如果用在開發比較複雜的 App，整體的開發週期其實是很長的（當然看個人追求的品質），Web App 實際上要花費很多的心力才能做的跟 Native 一樣好用，但是：

軟體的最大價值在於複製！

雖然 Web App 開發成本高，但是只要一跨平台就值得了。所以如果你一開始沒有要計畫跨平台，那麼 Web App 可能會為你帶來痛苦。

JavaScript Bridge 技術

前面提了很多次 JavaScript Bridge 這個名詞，先來就介紹一下 Web App 的典型系統架構，如下：

其中紅色方框的就是 JavaScript 的角色，目前最有名的就是 PhoneGap (Codorva) 這一個 Library，JavaScript Bridge 實作的原理是透過 Browser (WebView) 的底層機制與 JavaScript Runtime 溝通，每個不同 OS 提供的 WebView JavaScript Bridge 實作方法都不盡相同。

藉由這樣的技術 Web 就可以與 Native 進行溝通，達到原本 Web 做不到的功能（像是裝置震動、陀螺儀、加速器、電話簿等等）。有人會想到其實瀏覽器外掛一樣可以達到效果，但是許多封閉的 OS 是不允許使用者安裝外掛程式的，因此我們才需要這樣的技術。善用 Web 實作基本功能與 UI，透過 Native 處理比較複雜的運算與功能，這樣的組合就成了 Hybrid App，保留跨平台能力擁有執行速度優勢，算是比較兩全其美的解法。

到這裡那麼各位客官對 Web App 是不是有比較深入的了解呢？有空會在分享行動開發的相關經驗與技術，敬請期待囉。感謝。