使用 Apache Cordova 在移动设备上运行 Chrome 应用

重要提示：Chrome 将不再支持所有平台上的 Chrome 应用。Chrome 浏览器和 Chrome 应用商店将继续支持扩展程序。阅读公告，并详细了解如何迁移您的应用。

用于在移动设备上运行 Chrome 应用的工具链目前为早期开发者预览版。欢迎通过 GitHub 问题跟踪器、Chrome 应用开发者论坛、Stack Overflow 或 G+ 开发者页面向我们提供反馈。

概览

您可以通过基于 Apache Corordova 的工具链运行 Android 和 iOS 设备上的 Chrome 应用。Apache Corordova 是一种开源移动开发框架，可让您使用 HTML、CSS 和 JavaScript 构建具有原生功能的移动应用。

Apache Cordova 使用原生 App Shell 封装您应用的 Web 代码，并允许您通过 Google Play 和/或 Apple App Store 分发混合 Web 应用。如需将 Apache Cordova 与现有 Chrome 应用搭配使用，请使用 cca (c ordova c hrome a pp) 命令行工具。

其他资源

• 使用 Cordova 进行开发时，您应牢记一些特殊注意事项；我们已在“注意事项”部分中列出了它们。
• 如需查看移动设备支持哪些 Chrome API，请访问 API 状态页面。
• 如需在不使用工具链的 Android 设备上预览 Chrome 应用，请使用 Chrome 应用开发者工具 (ADT)。

让我们开始吧。

第 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
  • 将 apache-ant-x.x.x/bin 添加到 PATH 环境变量。

定位到 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 模拟器上运行应用，请执行以下操作：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. 请务必构建正确的目标。

   左上角有一个用于选择目标项目和设备的下拉菜单（位于“Run”和“Stop”按钮旁边）。确保选择 YourApp，而不是 CordovaLib。

3. 点击“Play”按钮。

更改应用源代码

您的 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，需要提供以下尺寸：

• 36 像素、48 像素、78 像素、96 像素

对于 iOS 应用，所需的大小取决于您是支持 iOS 6 还是 iOS 7。 图标数量下限为：

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

在您的 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 像素 + 2x
• 768 像素 x 1024 像素 + 2 倍像素（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 项目文件：

   打开 platform/ios/*.xcodeproj

3. 按照 Apple 的应用分发指南操作。

特别注意事项

如果您是初次使用 Chrome 应用，最大的问题就是会停用部分 Web 功能。 不过，其中一些工具目前在 Cordova 中可以使用。

Chrome 应用可能无法在移动设备上开箱即用。以下是携号转网到移动设备的一些常见问题：

• 小屏幕存在的布局问题，尤其是在纵向模式下。
  • 建议的解决方法：使用 CSS 媒体查询针对较小的屏幕优化内容。
• 通过 chrome.app.window 设置的 Chrome 应用窗口大小将被忽略，而改用设备的原生尺寸。
  • 建议的解决方法：移除硬编码的窗口尺寸；设计应用时考虑到不同的尺寸。
• 小按钮和链接很难用手指点按。
  • 建议的解决方法：将触摸目标调整为至少 44 x 44 点。
• 依赖触摸屏上不存在的鼠标悬停时显示的意外行为。
  • 建议的解决方法：除了悬停鼠标之外，还应激活界面元素，例如下拉菜单和点按提示。
• 点按延迟 300 毫秒。
  • 建议的解决方法：使用 FT Labs 的 FastClick JavaScript polyfill。
  • 如需了解一些背景信息，请参阅这篇 HTML5Rocks 文章。

受支持的 Chrome API

我们已向移动版 Chrome 应用提供了许多核心 Chrome API，包括：

• identity - 使用 OAuth2 登录用户
• 付款 - 在移动应用内销售虚拟商品
• pushMessaging - 将消息从服务器推送到应用
• sockets - 使用 TCP 和 UDP 通过网络发送和接收数据
• notifications（仅限 Android）- 从移动应用发送内容丰富的通知
• storage - 在本地存储和检索键值对数据
• syncFileSystem - 存储和检索由 Google 云端硬盘提供支持的文件
• 闹钟 - 定期运行任务
• idle - 检测机器的空闲状态何时发生变化
• power - 替换系统的电源管理功能

不过，并非所有 Chrome JavaScript API 都会实现。并非 Chrome 桌面版的所有功能都适用于移动设备：

• 无<webview>标签
• 无 IndexedDB
• 无 getUserMedia()
• 不含 NaCl

您可以通过我们的 API 状态页面跟踪进度。

Chrome 应用开发者工具

Android 版 Chrome 应用开发者工具 (ADT) 是一款独立的 Android 应用，可让您下载并运行 Chrome 应用，而无需按上述方式设置开发工具链。如果您想在 Android 设备上快速预览现有 Chrome 应用（已打包为 .crx 格式），请使用 Chrome ADT。

Chrome ADT for Android 目前为 Alpha 版之前的 Alpha 版。如需试用，请查看 ChromeADT.apk 版本说明，了解安装和使用说明。