用于在移动设备上运行 Chrome 应用的工具链目前为开发者预览版本。你可以给予 请通过 GitHub 问题跟踪器(我们的 Chrome 应用开发者论坛)向我们提供反馈, Stack Overflow 或我们的 G+ 开发者页面。
概览
您可以通过基于 Apache 的工具链在 Android 和 iOS 上运行 Chrome 应用 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 及更高版本。
所有平台的开发依赖项
必须使用
npm
的 Node.js 0.10.0 版(或更高版本):- Windows:使用可从以下位置下载的安装可执行文件安装 Node.js nodejs.org.
- 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 版(或更高版本)
<ph type="x-smartling-placeholder">
- </ph>
- 安装与 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
<ph type="x-smartling-placeholder">
- </ph>
- 将
apache-ant-x.x.x/bin
添加到 PATH 环境变量中。
- 将
定位到 iOS
请注意,iOS 开发只能在 OS X 上进行。此外,您还需要安装:
- Xcode 5(或更高版本),包含 Xcode 命令行工具
- ios-deploy(需要部署到 iOS 设备)
<ph type="x-smartling-placeholder">
- </ph>
npm install -g ios-deploy
- ios-sim(需要部署到 iOS 模拟器)
<ph type="x-smartling-placeholder">
- </ph>
npm install -g ios-sim
- 可选:注册为 iOS 开发者
<ph type="x-smartling-placeholder">
- </ph>
- 如果要在真实设备上进行测试以及将应用提交到应用商店,则必须执行此操作。
- 如果您只打算使用 iPhone/iPad 模拟器,则可以跳过注册步骤。
安装 cca
命令行工具
通过 npm 安装 cca
:
npm install -g cca
如需稍后使用新版本更新工具链,请执行以下操作:npm update -g cca
。
从命令行运行以下命令,确认所有内容均已正确安装:
cca checkenv
您将看到输出的 cca
版本号,以及 Android SDK 或 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
<ph type="x-smartling-placeholder">- </ph>
- 注意:这需要您设置模拟器。您可以运行
android avd
进行设置。 运行android
以下载其他模拟器映像。为了提高情报映像的运行速度 安装 Intel 的 HAXM。
- 注意:这需要您设置模拟器。您可以运行
- 如需在已连接的 Android 设备上运行您的应用,请执行以下操作:
cca run android
iOS
- 如需在 iOS 模拟器上运行您的应用,请执行以下操作:
cca emulate ios
- 如需在关联的 iOS 设备上运行您的应用,请执行以下操作:
cca run ios
<ph type="x-smartling-placeholder">- </ph>
- 注意:这要求您为自己的设备设置配置文件。
选项 B:使用 IDE 进行开发和构建
Android
- 在 Eclipse 中,选择
File
->Import
。 - 选择
Android
>Existing Android Code Into Workspace
。 - 从您刚刚使用
cca
创建的路径导入。- 您应该会导入两个项目,其中一个是
*-CordovaLib
。
- 您应该会导入两个项目,其中一个是
- 点击 Play 按钮运行您的应用。
<ph type="x-smartling-placeholder">
- </ph>
- 您需要创建一个运行配置(与所有 Java 应用一样)。您通常会获得 系统首次自动提示您进行此操作。
- 您还需要首次管理您的设备/模拟器。
iOS
通过在终端窗口中输入以下内容,在 Xcode 中打开项目:
cd YourApp open platforms/ios/*.xcodeproj
确保您建立的是正确的目标。
在左上角(“运行”和“停止”按钮旁边)有一个下拉菜单,用于选择目标项目和 设备。确保选择
YourApp
,而不是CordovaLib
。点击“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 上的应用会在加载时显示短暂的启动画面。一组默认的 Cordova 初始画面
屏幕包含在 platforms/ios/[AppName]/Resources/splash
中。
所需尺寸为:
- 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 商店,请执行以下操作:
更新两个 Android 版本 ID,然后运行
cca prepare
:- 使用
www/manifest.json
中的version
键设置android:versionName
(这会设置 桌面版封装应用的版本)。 android:versionCode
是使用www/manifest.mobile.js
中的versionCode
键设置的。
- 使用
修改(或创建)
platforms/android/ant.properties
并设置key.store
和key.alias
属性(如 Android 开发者文档中所述)。构建您的项目:
./platforms/android/cordova/build --release
在
platforms/android/ant-build/
中找到已签名的 .apk。将签名的应用上传到 Google Play 开发者控制台。
发布到 iOS App Store
- 在
www/manifest.mobile.js
中设置CFBundleVersion
键以更新应用版本,然后 运行cca prepare
。 打开
platforms/ios
目录下的 Xcode 项目文件:开放 platform/ios/*.xcodeproj
按照 Apple 的应用分发指南操作。
特别注意事项
如果您是初次使用 Chrome 应用,最大的问题就是会停用某些网络功能。 不过,其中一些工具目前在 Cordova 中可以使用。
在移动设备上,Chrome 应用可能无法开箱即用。携号转网至移动设备的常见问题:
- 小屏幕的布局问题,尤其是在纵向模式下。
- 建议的解决方法:使用 CSS 媒体查询针对较小的屏幕优化您的内容。
- 系统会忽略通过 chrome.app.window 设置的 Chrome 应用窗口大小,并改用
设备的原生尺寸
- 建议的解决方法:移除硬编码的窗口尺寸;设计采用不同尺寸的应用 。
- 这些小按钮和链接不便于用手指点按。
- 建议的解决方法:将触摸目标调整为至少 44 x 44 像素。
- 依赖于触摸屏上不存在的鼠标悬停意外行为。
- 建议的解决方法:除了悬停鼠标外,还应启用下拉菜单和提示等界面元素, 点按。
- 300 毫秒的点按延迟。
- 建议的解决方法:使用 FT Labs 提供的 FastClick JavaScript polyfill。
- 如需了解一些背景信息,请参阅这篇 HTML5Rocks 文章。
受支持的 Chrome API
我们为移动版 Chrome 应用提供了许多核心 Chrome API,包括:
- 身份 - 使用 OAuth2 登录用户
- 付款 - 在移动应用内销售虚拟商品
- pushMessaging - 从服务器向您的应用推送消息
- sockets - 使用 TCP 和 UDP 通过网络发送和接收数据
- 通知(仅限 Android)- 从移动应用发送内容丰富的通知
- storage - 在本地存储和检索键值对数据
- syncFileSystem - 存储和检索由 Google 云端硬盘支持的文件
- 闹钟 - 定期运行任务
- idle - 检测机器的空闲状态何时发生变化
- power - 覆盖系统的电源管理功能
不过,并非所有 Chrome JavaScript API 都能实现。而且,并不是 Chrome 桌面版的所有功能 适用于移动设备:
- 无
<webview>
标记 - 无 IndexedDB
- 无 getUserMedia()
- 无 NaCl
您可以从我们的 API 状态页面跟踪进度。
Chrome 应用开发者工具
Android 版 Chrome 应用开发者工具 (ADT) 是一款独立的 Android 应用,通过它您可以: 下载并运行 Chrome 应用,而不按上述方式设置开发工具链。使用 如果需要快速预览现有 Chrome 应用(已打包为 .crx 格式),请使用 Chrome ADT 。
Android 版 Chrome ADT 目前处于 Alpha 版测试前版本。要试用,请查看 有关安装和使用说明的 ChromeADT.apk 版本说明。