用于在移动设备上运行 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
- 在 Eclipse 中,选择
File
->Import
。 - 依次选择
Android
>Existing Android Code Into Workspace
。 - 从您刚刚使用
cca
创建的路径导入。- 您应该有两个需要导入的项目,其中一个是
*-CordovaLib
。
- 您应该有两个需要导入的项目,其中一个是
- 点击“Play”按钮以运行您的应用。
- 您需要创建一个运行配置(与所有 Java 应用一样)。您通常会在第一次收到系统自动发出的提示。
- 首次操作时,您还需要管理设备/模拟器。
iOS
在终端窗口中输入以下内容,在 Xcode 中打开项目:
cd YourApp open platforms/ios/*.xcodeproj
请务必构建正确的目标。
左上角有一个用于选择目标项目和设备的下拉菜单(位于“Run”和“Stop”按钮旁边)。确保选择
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 上的应用会在加载过程中显示一个简短的启动画面。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 商店,请执行以下操作:
更新这两个 Android 版本 ID,然后运行
cca prepare
:android:versionName
是使用www/manifest.json
中的version
键设置的(这也会设置桌面封装应用的版本)。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 应用,最大的问题就是会停用部分 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 版本说明,了解安装和使用说明。