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

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

概览

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

Apache Cordova 会使用原生应用 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 及更高版本。

所有平台的开发依赖项

• 必须使用 Node.js 0.10.0（或更高版本）和 npm：

  • 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 标志创建指向该应用的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：使用 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. 确保您构建的是正确的目标。

   在左上角（“运行”和“停止”按钮旁边）有一个用于选择目标项目和设备的下拉菜单。确保选择 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：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 像素 + 2x
• 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 应用，最大的问题就是会停用某些 Web 功能。 不过，其中有几个目前在 Cordova 中可用。

Chrome 应用在移动设备上可能无法开箱即用。移植到移动设备时会遇到一些常见问题：

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

支持的 Chrome API

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

• 身份 - 使用 OAuth2 登录用户
• 付款 - 在移动应用内销售虚拟商品
• pushMessaging - 从服务器向应用推送消息
• 套接字 - 使用 TCP 和 UDP 通过网络发送和接收数据
• 通知（仅限 Android）- 从移动应用发送内容丰富的通知
• 存储 - 在本地存储和检索键值对数据
• 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（Android 版）目前处于 Alpha 版之前的阶段。如需试用，请参阅 ChromeADT.apk 版本说明，了解安装和使用说明。