Introduction – 前言
在前一篇文章（Android WebApp 開發教學 – HTML5 Web Storage）中，我們已經介紹過如何在 Android WebView 元件中執行由 HTML5 撰寫的 WebApp 程式。手機上能夠實作的應用層面相當豐富，僅靠著 HTML5 所提供的功能來製作 WebApp 是不足的。假如我們想要對手機硬體進行溝通，譬如震動 (Vibrate)、加速器 (Accelerometer)、取定位資訊 (Geolocation) 等等與手機相關的功能，這時候就要藉由 JavaScript Bridge 的技術來完成。JavaScript Bridge 技術主要原理是在 WebView 中與 JavaScript RunTime 建立一個溝通的橋樑，使得 WebView 能夠透過 JavaScript 呼叫 Native 的函式，這時候我們就可以用原生的程式撰寫 Web 做不到的功能，藉此擴充 WebView 之能力。
今天要介紹的 PhoneGap Library 就是 JavaScript Bridge 的一項實作，PhoneGap 的前身其實是 Apache Cordova Project，或許各位可以發現之後 PhoneGap 版本所使用的 Library 命名也由 PhoneGap 改為 Codorva。那為什麼我們要使用 PhoneGap 呢？前面有提到原生程式碼（Native Code）對跨平台特性的影響，這可能會是我們選用 PhoneGap 的主要原因，由於假設我們僅使用 PhoneGap 現有的 API 來設計系統，那麼很高興地 PhoneGap 已經在許多常用的手機平台實作了盡可能相容的功能。為什麼不是完全相容呢？因為每種手機平台的功能都不太一樣，所以總會有些差異囉。目前 PhoneGap 支援了七種手機作業系統，我們可以參考以下官方提供的資料：
Android WebView 安裝 PhoneGap
首先我們現在官方網站下載 PhoneGap，目前的版本為 1.7 並且使用 Apache License。下載後解壓縮，API Document 相關的文件放在/doc/index.html 檔案中，另外在 /lib 目錄中就可以看到 PhoneGap 相關函式與各種平台需要安裝的檔案。如下圖：
首先我們先在 Eclipse 中建立一個 Android Project（可以參考之前的教學文章），如下圖：
- 第一步：加入 Cordova Library
專案右鍵 -> New -> Folder
Folder name: 輸入 libs 按下 [Finish]
複製 \lib\android\cordova-1.7.0.jar 到 libs 目錄中，對 cordova-1.7.0.jar 按右鍵 -> Build Path -> Add to Build Path
- 第二步：加入 PhoneGap XML 檔案
複製 \lib\android\xml 資料夾到 res 目錄中（包含 xml 目錄喔）
- 第三步：設定 PhoneGap 會用到的 User Permission
開啟 AndroidManifest.xml 在 manifest TAG 中加入以下 XML
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.RECORD_VIDEO"/> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />
在 activity TAG 中加入以下 Attribute
android:configChanges="orientation|keyboardHidden"
完成後如下圖所示：
- 第四步：修改 Activity Class
修改繼承 Class 為 org.apache.cordova.DroidGap 並且刪除以下程式碼：
setContentView(R.layout.main);
由於 DropGap 已經會自動幫我們建立 WebView，因此我們僅需要加入以下程式碼告訴 PhoneGap 要開啟哪一支 HTML 檔案即可。
super.loadUrl("file:///android_asset/www/index.html");
如下圖：
完整的 Activity Class 內容如下：
package com.toright.android.webapp;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class PhoneGap_WebAppActivity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
第五步：測試 PhoneGap Example
複製 \lib\android\example\assets\www 資料夾到 assets 目錄中，如下：
- 第六步：執行 Android Project
專案右鍵 -> Run As -> Android Application
下圖可以看到 Example 執行畫面
你也可以將 App 佈署到手機上測試震動功能，是不是很方便呢？
Conclusion - 結論
HTML5 加上 PhoneGap 確實能夠兼顧 WebApp 之擴充性與跨平台，除了直接使用 PhoneGap 提供的 API 之外，PhoneGap 也提供了 Plugin 的方式讓我們擴充自己想要實作的功能。
使用 JavaScript Bridge 技術固然方便，但反過來說我們也需要明白，一但使用了原生程式碼 (Native Code) 來實作系統，就會降低系統可攜性，同時也失去了 WebApp 跨平台之能力，當然使用 PhoneGap 會好上一些些。此外 JavaScript Bridge 至今依然存在安全性的問題（譬如 XSS 攻擊），在我們設計與使用 JavaScript Bridge 之類的技術上就必須更加注意系統安全問題。
3 comments for “Android WebApp 開發教學 (3) - HTML5 + PhoneGap = 如虎添翼”