Getting Started with Chrome Cordova Apps (Chrome Mobile Apps)

by Stephen Fluin 2014.04.28

Back in 2011 I predicted the combination of the Chrome Web Store with the Android Google Play store. While my prediction has not yet come true, we are closer today than ever before.

A couple months ago, Google began releasing a tool called cca (originally short for Chrome Cordova Apps, but I suspect they will try to shift the name to "Chrome Mobile Apps" for branding purposes). This tool allows you to take an application that you have developped for Chrome (Called a Chrome App because it has specific restrictions and implementation details), and run them on Android and iOS.

This means that by building a single application, you can run it now on Windows, Mac, Linux, Android, and iOS. This comes with downsides, the lack of the Action Bar and other native UI/UX patterns, but with a strong design sense, these challenges can be overcome to build high quality cross-platform applications.

Pros

  1. Single Codebase
  2. Supported by Google (implying an ever-increasing level of support)
  3. Unified Payment Mechanisms (between Androido and Chrome)
  4. HTML5 -> HTML / CSS / JS stack development

Cons

  1. Limited by lack of native UI / UX
  2. Dependency on Chrome APIs
  3. CSP Complications - Chrome Apps run without the ability to inject remote javascript or images, this can cause some issues if you are used to building pure HTML5 applications.
  4. Poor HTML5 rendering engine on iOS.

 

Getting Started

To get started, download node.js. Node.js comes with the Node Package Manager (npm).

With node and npm installed, you will need to download the cca toolset with npm install -g cca

Now that you have cca installed, you will need to connect it to your Android and Java paths. cca will have instructions inline.

Build your Chrome App

cca will help you get started with cca create <app name>. After running this command, you will get a folder that contains a lot of platform and cordova code, and a special folder called www. The www folder is where all of the code for your app will live.

Open the www folder, throw some code into the index.html file, and then within Chrome go to "Load Unpacked Extension" and find  the www folder. Your app should run in the browser. You can then go back to your command line at the root folder for your app, and tell cca to cca run android

 

 


permalink