使用 Apache Cordova 在行動裝置上執行 Chrome 應用程式

在行動裝置上執行 Chrome 應用程式的工具鍊目前處於開發人員早期預覽階段。歡迎您透過 GitHub 問題追蹤器、Chrome 應用程式開發人員論壇、Stack Overflow 或 G+ 開發人員頁面提供意見。

在電腦和行動裝置上執行的 Chrome 應用程式

總覽

您可以透過以 Apache Cordova 為基礎的工具鍊，在 Android 和 iOS 上執行 Chrome 應用程式。Apache Cordova 是一種開放原始碼行動應用程式開發架構，可使用 HTML、CSS 和 JavaScript 建構具備原生功能的行動應用程式。

Apache Cordova 使用原生應用程式殼層來包裝您應用程式的網頁程式碼，讓您可以透過 Google Play 和/或 Apple App Store 發布混合式網頁應用程式。如要在現有的 Chrome 應用程式中使用 Apache Cordova，請使用 cca (c ordova c hrome a pp) 指令列工具。

其他資源

讓我們開始吧！

步驟 1：安裝開發工具

Chrome 行動應用程式行動版工具鍊可指定 iOS 6 以上版本和 Android 4.x 以上版本。

所有平台的開發依附元件

  • 必須使用 npm 的 Node.js 0.10.0 以上版本：

    • Windows：使用可從 nodejs.org 下載的安裝執行檔安裝 Node.js。
    • OS X 或 Linux：安裝執行檔也可從 nodejs.org 取得。如果您不想取得 root 存取權，透過 nvm 安裝可能會更方便。範例：
    curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.10

鎖定 Android

開發 Android 應用程式時，您也需要安裝以下項目：

  • Java JDK 7 (或以上版本)
  • Android SDK 4.4.2 以上版本
    • 安裝 Android ADT Bundle 隨附的 Android SDK 和 Android 開發人員工具。
    • 將 sdk/tools 和 sdk/platform-tools 新增至 PATH 環境變數。
    • OS X：Android SDK 隨附的 Eclipse 版本需要 JRE 6。如果開啟 Eclipse.app 時沒有提示您安裝 JRE 6，請透過 Mac App Store 取得。
    • Linux：Android SDK 需要 32 位元支援程式庫。在 Ubuntu 上，請透過 apt-get install ia32-libs 取得這些項目。
  • Apache Ant

指定 iOS

請注意，iOS 開發作業僅適用於 OS X。此外，您還需要安裝：

  • Xcode 5 (或更高版本)，其中包含 Xcode 指令列工具
  • ios-deploy (用於部署至 iOS 裝置)
    • npm install -g ios-deploy
  • ios-sim (必須部署至 iOS 模擬器)
    • npm install -g ios-sim
  • 選用：註冊為 iOS 開發人員
    • 這是在實體裝置上進行測試及提交到應用程式商店的必要條件。
    • 如果您只打算使用 iPhone/iPad 模擬器，可以略過註冊程序。

安裝 cca 指令列工具

透過 npm 安裝 cca：

npm install -g cca

如要稍後使用新版本更新工具鍊：npm update -g cca。

請在指令列中執行以下指令，確認所有項目都已正確安裝：

cca checkenv

您會看到 cca 輸出的版本號碼，以及 Android 或 iOS SDK 安裝作業的確認訊息。

步驟 2：建立專案

如要在名為 YourApp 的目錄中建立預設的行動版 Chrome 應用程式專案，請執行以下操作：

cca create YourApp

如果您已建構 Chrome 應用程式，並想要將其移植到行動平台，可以使用 --link-to 標記建立symlink：

cca create YourApp --link-to=path/to/manifest.json

如果您想複製現有的 Chrome 應用程式檔案，可以使用 --copy-from 標記：

cca create YourApp --copy-from=path/to/manifest.json

還沒有自己的 Chrome 應用程式嗎？試試支援行動裝置的 Chrome 應用程式範例中的任一種。

步驟 3：開發

您可以透過下列兩種方式建構及執行應用程式：

  • 方法 A：透過指令列使用 cca 工具，或
  • 做法 B：使用 Eclipse 或 Xcode 等 IDE。使用 IDE 完全是可選的做法 (但通常很實用)，可協助您啟動、設定及偵錯混合型行動應用程式。

選項 A：使用指令列進行開發及建構

在 cca 產生的專案資料夾的根目錄中：

Android

  • 如要在 Android Emulator 上執行應用程式，請按照下列步驟操作：cca emulate android
    • 注意：您必須先設定模擬器。您可以執行 android avd 來設定這項功能。執行 android，下載其他模擬器映像檔。如要加快 Intel 映像檔的執行速度，請安裝 Intel HAXM。
  • 如要在已連結的 Android 裝置上執行應用程式：cca run android

iOS

  • 如要在 iOS 模擬器上執行應用程式，請按照下列步驟操作：cca emulate ios
  • 如要在已連結的 iOS 裝置上執行應用程式，請按照下列步驟操作：cca run ios

選項 B：使用 IDE 開發及建構

Android

  1. 在 Eclipse 中，依序選取 File -> Import。
  2. 依序選擇「Android」>「Existing Android Code Into Workspace」。
  3. 從剛才使用 cca 建立的路徑匯入。
    • 您應該會看到兩個要匯入的專案，其中一個是 *-CordovaLib。
  4. 按一下「Play」按鈕即可執行應用程式。
    • 您需要建立執行設定 (就像所有 Java 應用程式一樣)。系統通常會在您首次使用時自動顯示提示。
    • 你首次管理裝置/模擬器時，也需要進行管理。

iOS

  1. 在終端機視窗中輸入以下內容，即可在 Xcode 中開啟專案：

    cd YourApp
open platforms/ios/*.xcodeproj

  2. 請務必建構合適的目標。

    在左上方 (「執行」和「停止」按鈕旁) 有一個下拉式選單，可用來選取目標專案和裝置。確認已選取 YourApp，而不是 CordovaLib。

  3. 按一下「Play」按鈕。

變更應用程式原始碼

HTML、CSS 和 JavaScript 檔案會位於 cca 專案資料夾的 www 目錄中。

重要事項：變更 www/ 後，您必須先執行 cca prepare，再部署應用程式。如果您透過指令列執行 cca build、cca run 或 cca emulate，系統會自動完成準備步驟。如果您使用 Eclipse/XCode 進行開發，則必須手動執行 cca prepare。

偵錯

您可以使用調試 Cordova 應用程式的方式，在行動裝置上對 Chrome 應用程式進行偵錯。

步驟 4：後續步驟

您現在已擁有可運作的行動版 Chrome 應用程式，因此可以透過多種方式改善行動裝置上的使用體驗。

行動版資訊清單

部分 Chrome 應用程式設定僅適用於行動平台。我們已建立 www/manifest.mobile.json 檔案來包含這些值，插件說明文件和本指南中會參照這些特定值。

您應該據此調整這裡的值。

圖示

行動應用程式的圖示解析度需要比電腦版 Chrome 應用程式更多。

如果是 Android，則需要以下尺寸：

  • 36px、48px、78px、96px

對於 iOS 應用程式，所需的大小會因您支援 iOS 6 或 iOS 7 而有所不同。所需圖示數量下限如下：

  • iOS 6：57 像素、72 像素、114 像素、144 像素
  • iOS 7：72 像素、120 像素、152 像素

在 manifest.json 檔案中，完整的圖示清單會像這樣：

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

每次執行 cca prepare 時，系統都會將圖示複製到各個平台的適當位置。

啟動畫面

iOS 應用程式在載入過程中會顯示簡短的啟動畫面。platforms/ios/[AppName]/Resources/splash 包含一組預設的 Cordova 啟動畫面。

所需尺寸如下：

  • 320 像素 x 480 像素 + 2 倍
  • 768 x 1024 像素 + 2x (iPad 直向)
  • 1024 x 768 像素 + 2x (iPad 橫向)
  • 640 像素 x 1146 像素

cca 目前不會修改螢幕畫面圖片。

步驟 5：發布

在專案的 platforms 目錄中，您有兩個完整的原生專案：一個是 Android 專案，另一個是 iOS 專案。您可以建構這些專案的發布版本，並發布至 Google Play 或 iOS App Store。

發布至 Play 商店

如要將 Android 應用程式發布至 Play 商店，請按照下列步驟操作：

  1. 更新兩個 Android 版本 ID，然後執行 cca prepare：

    • android:versionName 是使用 www/manifest.json 中的 version 鍵設定 (這也會設定電腦版封裝應用程式的版本)。
    • android:versionCode 是使用 www/manifest.mobile.js 中的 versionCode 鍵設定。

  2. 編輯 (或建立) platforms/android/ant.properties，並設定 key.store 和 key.alias 屬性 (如Android 開發人員說明文件所述)。

  3. 建構專案：

    ./platforms/android/cordova/build --release

  4. 在 platforms/android/ant-build/ 中找出已簽署的 .apk。

  5. 將已簽署的應用程式上傳至 Google Play 開發人員控制台。

發布至 iOS App Store

  1. 在 www/manifest.mobile.js 中設定 CFBundleVersion 鍵以更新應用程式版本，然後執行 cca prepare。

  2. 開啟 platforms/ios 目錄下方的 Xcode 專案檔案：

    開啟 platforms/ios/*.xcodeproj

  3. 請按照 Apple 的應用程式發布指南操作。

特殊注意事項

如果您是 Chrome 應用程式新手，最主要的差異點就是某些網頁功能會停用。不過，其中有幾項功能目前可在 Cordova 使用。

Chrome 應用程式可能無法在行動裝置上正常運作。移植到行動裝置時常見的問題：

  • 小螢幕的版面配置問題，尤其是在直向模式下。
    • 建議修正方式：使用 CSS 媒體查詢，針對小螢幕最佳化內容。
  • 系統會忽略透過 chrome.app.window 設定的 Chrome 應用程式視窗大小，改用裝置的原生尺寸。
    • 建議修正方式：移除硬式編碼的視窗尺寸；設計應用程式時，請考量不同大小。
  • 使用者很難用手指輕觸小按鈕和連結。
    • 建議修正方式：調整觸控目標，使其大小至少為 44 x 44 點。
  • 在觸控螢幕上，依賴滑鼠游標的行為會出現非預期的情形。
    • 建議修正方式：除了懸停之外，請在輕觸時啟用 UI 元素，例如下拉式選單和工具提示。
  • 輕觸延遲時間為 300 毫秒。

支援的 Chrome API

我們已將許多核心 Chrome API 開放給行動版 Chrome 應用程式使用，包括：

  • identity：使用 OAuth2 登入使用者
  • 付款：在行動應用程式中販售虛擬商品
  • pushMessaging：從伺服器推送訊息至應用程式
  • Socket：使用 TCP 和 UDP 透過網路傳送及接收資料
  • notifications (僅限 Android 裝置)：透過行動應用程式傳送複合式通知
  • storage - 在本機儲存及擷取鍵/值資料
  • syncFileSystem：儲存及擷取 Google 雲端硬碟備份的檔案
  • 鬧鐘：定期執行工作
  • idle - 偵測機器的閒置狀態變更
  • 電源：覆寫系統的電源管理功能

不過，並非所有 Chrome JavaScript API 都會實作。而且並非所有 Chrome 電腦版功能都能在行動裝置上使用：

  • 沒有 <webview> 標記
  • 沒有 IndexedDB
  • 沒有 getUserMedia()
  • 不使用 NaCl

您可以在 API 狀態頁面中追蹤進度。

Chrome 應用程式開發人員工具

Android 版 Chrome 應用程式開發人員工具 (ADT) 是獨立的 Android 應用程式，可讓您下載及執行 Chrome 應用程式，而無須如上所述設定開發工具鍊。如要在 Android 裝置上快速預覽現有的 Chrome 應用程式 (已封裝為 .crx)，請使用 Chrome ADT。

Android 版 Chrome ADT 目前為 Alpha 版前測版本。如要試用，請參閱 ChromeADT.apk 版本資訊，瞭解安裝和使用說明。