Walking through the Steps of Creating a Cordova/Phone Gap App from a Chrome Packaged App

After learning this morning of a project for wrapping Chrome packaged apps inside of a Cordova/PhoneGap app, I figured I'd take a walk through the process for a Chrome packaged app I created a few weeks ago.

The steps below were performed on OSX. You can build for Android (4.0+) or iOS, but I did this for iOS first.

First, follow the instructions from here to get the needed files:

git clone git://github.com/MobileChromeApps/mobile-chrome-apps.git
cd mobile-chrome-apps
./mca init

This takes several minutes to run - here's what my output looked like (after I updated to the latest version of node - 0.10.22):

Brad-Lyons-iMac:mobile-chrome-apps bradflyon$ ./mca init
## Checking that tools are installed
Android SDK not detected on your PATH.
Xcode detected.
## Updating mobile-chrome-apps
Running: git pull --rebase
## Updating git submodules
Running: git submodule update --init --recursive
## Building cordova-js
generated cordova.ios.js @ 3.0.0-dev-46-ge2942e1 in 9ms
generated cordova.android.js @ 3.0.0-dev-46-ge2942e1 in 9ms
Brad-Lyons-iMac:mobile-chrome-apps bradflyon$ 

I've actually got the Android SDK on this system via an install of Android Studio, but obviously this script couldn't find it. Since I'm focused on iOS first, it's not an issue here.

The next steps involve creating the XCode/Android projects from my existing Chrome Packaged App. I followed the directions from here.

Creating the iOS/Android projects currently creates a copy of the Chrome app's files, so that from henceforth you would need to keep things synchronized manually. This is not really a long-term workflow option, but they (obviously) "plan to support symlinks eventually". You've got a similar challenge when developing for multiple mobile operating systems with Cordova/PhoneGap, anyway. Andrew Trice has a post last year describing one solution to that for PhoneGap, and there may be improvements since then, too. In this case, there may be some caution at play here as well, given the relative newness of the chrome-app-to-phonegap project.

Creating the projects requires running the file mca, which is in the mobile-chrome-apps directory, and so you need to make sure this is in your path. Note that they suggest not to install the new app in the mobile-chrome-apps directory.

mca create com.companyname.YourApp --source=path/to/ChromeApp

When I first ran the mca command, it hit an error because my app has a slash "\" in its name. This showed up as the mca command was trying to copy the XCode project "__TESTING__" to a filename based on the "name" property it found in my Chrome app's manifest.json file. I opened the "__TESTING__" project directly in XCode anyway to see what happened. It built and ran, but I had not noticed the documented gotcha highlighted below, so I assumed I'd rename the app and try the mca again.

Gotcha on iOS (as noted here)

• In XCode, make sure you are building the right target, otherwise you will just see a default Cordova page and not your app.
  • In the top left (beside Run&Stop buttons) there is a dropdown to select target project and device. Ensure that YourApp is selected and not CordovaLib.

I then changed the "name" property in the manifest.json file and tried again and it worked right away in the iOS simulator. And once again, I am impressed with the snappiness of the iOS simulator. Too bad the actual devices aren't as fast.

And there ya go - a Chrome packaged app running on the iPad/iPhone simulator, implemented in a fairly painless fashion.