Important:
Chrome will be removing support for Chrome Apps on Windows, Mac, and
Linux. Chrome OS will continue to support Chrome Apps. Additionally,
Chrome and the Web Store will continue to support extensions on all
platforms.
Read the announcement and learn more about
migrating your app.

Overview

You can run your Chrome Apps on Android and iOS via a toolchain based on Apache Cordova, an open source mobile development framework for building mobile apps with native capabilities using HTML, CSS and JavaScript.

Apache Cordova wraps your application's web code with a native application shell and allows you to distribute your hybrid web app via Google Play and/or the Apple App Store. To use Apache Cordova with an existing Chrome App, you use the cca (c ordova c hrome a pp) command-line tool.

Additional resources

There are a few special considerations that you should keep in mind when developing with Cordova; we've listed them in the considerations section.

To view which Chrome APIs are supported on mobile, visit the API Status page.

Step 3: Develop

Option B: By using an IDE, like Eclipse or Xcode. The use of an IDE is entirely optional (but often useful) to assist with launching, configuring, and debugging your hybrid mobile application.

Option A: Develop and build using the command line

From the root of your cca-generated project folder:

Android

To run your app on the Android Emulator: cca emulate android

Note: This requires that you've set up an emulator. You can run android avd to set this up. Download additional emulator images by running android. To make the intel images run faster, install Intel's HAXM.

Option B: Develop and build using an IDE

Android

You should expect to have two projects to import, one of which is *-CordovaLib.

Click the Play button to run your app.

You will need to create a Run Configuration (as with all Java applications). You usually get prompted for this the first time automatically.

You will need to manage your devices/emulators the first time as well.

iOS

Open the project in Xcode by typing the following in a terminal window:

cd YourApp
open platforms/ios/*.xcodeproj

Make sure you are building the right target.

In the top left (beside Run and Stop buttons), there is a dropdown to select target project and device. Ensure that YourApp is selected and not CordovaLib.

Click the Play button.

Making changes to your app source code

Your HTML, CSS, and JavaScript files live within the www directory of your cca project folder.

Important: After making changes to www/, you must run cca prepare before deploying your application. If you are running cca build, cca run, or cca emulate from the command line, the prepare step is done automatically. If you are developing using Eclipse/XCode, you must run cca prepare manually.

Debugging

Step 4: Next Steps

Now that you have a working mobile Chrome App, there are lots of ways to improve the experience on mobile devices.

Mobile Manifest

There are certain Chrome App settings that only apply to mobile platforms. We have created a www/manifest.mobile.json file to contain these, and the specific values are referenced throughout the plugin documentation and this guide.

You should adjust the values here accordingly.

Icons

Mobile apps need a few more icon resolutions than desktop Chrome Apps.

For Android, these sizes are needed:

36px, 48px, 78px, 96px

For iOS apps, the required sizes differ depending on whether you support
iOS 6 vs
iOS 7. The minimum number of icons required are:

The icons will be copied to the appropriate places for each platform every time you run cca prepare.

Splash Screens

Apps on iOS show a brief splash screen as the app is loading. A set of default Cordova splash screens are included in platforms/ios/[AppName]/Resources/splash.

The sizes needed are:

320px x 480px + 2x

768px x 1024px + 2x (iPad portrait)

1024px x 768px + 2x (iPad landscape)

640px x 1146px

Splash screen images are not currently modified by cca.

Step 5: Publish

In your project's platforms directory, you have two complete native projects: one for Android, and one for iOS. You can build release versions of these projects and publish them to Google Play or to the iOS App Store.

Publish to the Play Store

To publish your Android application to the Play Store:

Update the two Android version ids, then run cca prepare:

android:versionName is set using the version key in www/manifest.json (this sets the version of your desktop packaged app, too).

android:versionCode is set using the versionCode key in www/manifest.mobile.js.

Chrome Apps Developer Tool

The Chrome Apps Developer Tool (ADT) for Android is a standalone Android app that allows you to download and run a Chrome App without setting up the development toolchain as described above. Use the Chrome ADT when you want to quickly preview an existing Chrome App (already packaged as a .crx) on your Android device.

The Chrome ADT for Android is currently in a pre-alpha release. To try it out, view the ChromeADT.apk release notes for installation and usage instructions.