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

在行動裝置上執行 Chrome 應用程式的工具鍊目前是早期的開發人員預覽版。歡迎您使用 GitHub Issue Tracker、我們的 Chrome 應用程式開發人員論壇、Stack Overflow 或 G+ 開發人員頁面，提供您的寶貴意見。

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

總覽

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

Apache Cordova 使用原生應用程式殼層封裝應用程式的網頁程式碼，並可讓您透過 Google Play 和/或 Apple App Store 發布混合型網頁應用程式。如要將 Apache Cordova 與現有的 Chrome 應用程式搭配使用，請使用 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 套件隨附的 Android SDK 和 Android 開發人員工具。
    • 將 sdk/tools 和 sdk/platform-tools 新增至環境變數。
    • 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 標記建立其符號連結：

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：使用 IDE，例如 Eclipse 或 Xcode。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. 按一下「播放」按鈕執行應用程式。
    • 您必須建立執行設定 (如同所有 Java 應用程式)。系統「通常」會自動向您發出這項提示。
    • 首次使用時也必須管理裝置/模擬器。

iOS

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

    cd YourApp
open platforms/ios/*.xcodeproj

  2. 確認您建立的目標正確無誤。

    左上角的「Run」和「Stop」按鈕旁邊有下拉式選單，可用來選取目標專案和裝置。確認已選取 YourApp，而非 CordovaLib。

  3. 按一下 [播放] 按鈕。

變更應用程式原始碼

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

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

偵錯

在行動裝置上對 Chrome 應用程式進行偵錯的方法，與對 Cordova 應用程式進行偵錯相同。

步驟 4：後續步驟

現在，您有了可正常運作的 Chrome 行動應用程式，有許多方式可以改善行動裝置的使用體驗。

行動裝置資訊清單

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

您應據此調整這裡的值。

圖示

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

如果是 Android，必要的大小如下：

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

如果是 iOS 應用程式，規定的大小會因是否支援 iOS 6 與 iOS 7 而異。 圖示數量下限為：

  • iOS 6：57px、72px、114px、144px
  • 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 金鑰設定 (也會設定電腦封裝應用程式的版本)。
    • 系統會使用 www/manifest.mobile.js 中的 versionCode 鍵設定 android: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 專案檔案：

    開放平台/ios/*.xcodeproj

  3. 遵循 Apple 的《應用程式發布指南》。

特殊注意事項

如果您剛開始使用 Chrome 應用程式，最大的問題在於有些網路功能已停用。 不過，Cordova 目前可以處理其中一部分。

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

  • 小螢幕的版面配置問題，尤其是在直向模式下。
  • 系統會忽略透過 chrome.app.window 設定的 Chrome 應用程式視窗大小，改用裝置的原生尺寸。
    • 建議修正方式：移除以硬式編碼方式寫入的視窗尺寸；考量不同大小的應用程式設計。
  • 並不容易使用手指輕觸小型按鈕和連結。
    • 建議修正方式：將觸控目標調整為至少 44 x 44 點。
  • 依賴於觸控螢幕不存在的滑鼠懸停時意外行為。
    • 建議修正方式：除了懸停遊標之外，還會啟用下拉式選單和輕觸工具提示等 UI 元素。
  • 觸控延遲時間 300 毫秒。
    • 建議修正方式：使用 FT Labs 的 JavaScript polyfill。
    • 如需相關背景資訊，請參閱這篇 HTML5Rocks 文章。

支援的 Chrome API

Chrome 應用程式行動版提供多種核心 Chrome API，包括：

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

不過，並非所有 Chrome JavaScript API 都會導入。而且部分 Chrome 電腦版功能無法在行動裝置上使用：

  • 沒有 <webview> 標記
  • 無索引資料庫
  • 沒有 getUserMedia()
  • 無 NaCl

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

Chrome 應用程式開發人員工具

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

Android 版 Chrome ADT 目前為 Alpha 測試版。如要試用這項功能，請參閱 ChromeADT.apk 版本資訊，瞭解安裝與使用操作說明。