mobilechromeapps / mobile-chrome-apps

Chrome apps on Android and iOS

Create Chrome Apps for Mobile Using Apache Cordova

The Chrome Apps for Mobile Toolchain is no longer being actively developed. We intend to keep it functional, but do not intend on adding any new features.

Overview

Chrome Apps for Mobile is a project based on Apache Cordova to run your Chrome Apps on both Android and iOS. The project provides a native application wrapper around your Chrome App, allowing you to distribute it via the Google Play Store and the Apple App Store. Cordova plugins give your App access to a wide range of APIs, including many of the core Chrome APIs. The newest version of Chrome Apps for Mobile includes Chrome APIs for identity, Google Cloud Messaging (GCM) and rich notifications.

For an overview and demo of hybrid development, Chrome Apps for Mobile, and our Chrome App Developer Tool for Mobile, check out our Google I/O Bytes video.

Tools

The cca Command Line Tool

cca provides all the functionality you need to develop and package Chrome Apps for Mobile from the command line. Use it with Chrome App Developer Tool (below) to rapidly iterate on your code: live deploy allows you to instantly see your Chrome App running on a connected mobile device. When you are ready to publish your Chrome App for Mobile to the Apple App Store and Google Play Store, use cca to bundle up your Chrome App into the proper mobile packages.

Chrome App Developer Tool for Mobile (CADT)

CADT is an app for your mobile development device that makes it quick and easy to see your code in action. It provides the Cordova framework of Chrome Apps for Mobile so you can test your code by simply pushing your Chrome App assets to your mobile device (made easy with our tools), which is must faster than packaging up the entire mobile app. This is called live deploy.

With CADT running on your mobile device, live deploy can be initiated from your development computer with either Chrome Dev Editor or the cca command line tool, allowing you to instantly preview the Chrome App you're editing, running right on Android or iOS. When you make a change to the code in your editor, you're a quick push away from seeing it straight on your device.

Chrome Dev Editor (CDE)

CDE is an IDE built specifically for Chrome Apps. Use it with CADT for live deploy.

Try it out

Try out Chrome Apps for Mobile by following these steps:

• Step 1: Install your development tools

• Step 2: Create a project

• Step 3: Develop

• Step 4: Next Steps (Icons, etc)

• Step 5: Publish

It's also a good idea to go through our codelab, where you will learn to use chrome.gcm and chrome.notifications to build a simple chat app.

Things to Know

• The Chrome Apps for Mobile project is built on top of Apache Cordova, the open source mobile development framework for building mobile apps with native capabilities using HTML, CSS and JavaScript.

• cca projects are Cordova projects.

• By default, Chrome Apps built with cca use Crosswalk, (advantages and tradeoffs).

• Most Cordova plugins that provide chrome.* APIs work with regular Cordova projects.

• There is a List of Chrome App APIs that are supported on mobile.

• For even more, see the FAQ.

Let's get started

Continue to Step 1: Install your development tools »

mobile-chrome-apps's Issues

chrome.socket.read invalid behavior

I am issuing chrome.socket.read(socketId, 32, callback)

When the remote connection writes less than 32 bytes (say, for instance, it writes 4 bytes), callback is called with resultCode:32, and data a 32 byte ArrayBuffer where the last (32-4) bytes are null bytes.

The behavior should be resultCode:4, and data a 4 byte ArrayBuffer (which is the observed behavior in desktop Chrome)

Supported HTML5 API's

From simple testing, it seems that this simply uses a standard Android WebView for everything HTML and not the Chrome you would expect with 'Mobile Chrome Apps'. Even though in the documentation the only things listed as not supported are getUserMedia and IndexedDB, in reality there are a tonne of things missing.

WebAudio, WebGL, chrome performance related enhancements, and most important of all, all WebView-based bugs that exist that are either device-dependent or AOSS WebView-dependent.

Obviously it would be great if an actually version of Chrome could be run though I think that might be wishful thinking at this point in time. Rather I'd recommend updating the documentation saying that this is not actually Chrome and just uses the underlying system's WebView implementation.

Allow moving mca_update into a tools/ directory.

I would like to move mca_update into a tools directory with the rest of my scripts but doing so produces an error:

No platforms directory found. Please run script from the root of your project.

Whitespace in Chrome App name

If there is a space in app name you don't replace it with '' and that is causing script to generate My Spaced Name.java file with same incorrect class name.

Version mis-match in generated hello template.

The config.xml file lists the version as 0.0.1 and the manifest.json file lists the version as 0.1.1. They should probably be the same.

chrome.socket blocks and is not evented (android 4.4.2)

So calling .connect on a TCP socket ends up blocking the javascript event loop until it eventually returns with -1000 (strange return code)

Then looking at the code some more, I am seeing that there are really just a few threads; a reading thread and a writing thread, and they just block on the head of the queue. It doesn't do any fancier select/poll mechanism.

Has anybody thought about transitioning ChromeSocket.java to use evented i/o? The current implementation just won't perform anywhere near what desktop chrome will...

chrome.alarms triggers bootstrap even when app is not a Chrome app

This affects the App Harness.

Proposed fix: a post-prepare hook that moves cordova_plugins.js elsewhere, and replaces it with one that loads only what the App Harness actually needs. Then child apps should have their cordova_plugins.js redirected to that master one.

This isn't really an MCA problem, but this is a good place to keep the issue visible.

Slow or ... ?

It is very nice to see this working : )

I tried to add a basic angularjs example to the provided demo , testing on Samsung Note 2 and there is a noticeable lag in the binding .

The code

What I am missing ?

mca create sometimes creates broken ios projects

This happens sometimes when ios and android are created together. It appears to not happen if an ios only project is created (mca create ... --ios)

The resulting project might have plugin files missing or an unusable target (cant deploy to ipad).

Provide default Gruntfile

A lot of the tasks, building, running simulator, installing API will be very similar between projects and can be automated.

It would be nice if the default template could install a Gruntfile and needed scripts to do these default tasks.

Deploy to Kindle and Windows Phone devices?

Is there going to be any interest in support for deploying to Kindle devices and perhaps Windows Phone devices?

`cca checkenv` doesn't verify JDK

The command passes even when my java is set to a JRE.

XMLHttpRequest with responseType blob set fails on android 4.1.2

Using the example on https://developer.chrome.com/apps/app_codelab8_webresources.html for loading images in a chrome app fails on android.
The code is:

var loadImage = function(uri, callback) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    callback(window.webkitURL.createObjectURL(xhr.response), uri);
  }
  xhr.open('GET', uri, true);
  xhr.send();
}

The onload function is never called. Removing the line xhr.responseType = 'blob';leads to a call for the onload method but fails then on object url creation because the response is no blob.

mca.js replaced by mca

mca.js has been moved to mca. Just need to update the documentation.

iOS - window.open() opens in Chrome, but Chrome not showing back button

Setting target="_blank" opens the browser for a Chrome app, but doesn't work for a mobile Chrome app.

App icon not configured correct in Android project.

If you run the Android build the app icon is displayed as the default icon. It should use the icon that is used by the chrome build.

Copy-from rich-notification sample app in Windows infinite loop

I was able to confirm a couple of times, looking further now for more details.

Running Windows 8.1. I copied the rich-notifications sample app that was supported with mobile-chrome.

Running "cca create YourApp --link-to..." gave me access denied. So instead of linking I tried the copy-from: "cca create YourApp --copy-from..." This one seemed to work.

I let that go for a couple of minutes and came back to a nested folder that was thousands of folders deep: www/TestApp/www/TestApp/www etc. Had to cancel operation, it was still going. Nearly impossible to delete the output folder with Windows tools, had to rm -r -f with Cygwin. Seems to work just fine in Linux.

Windows 8.1
Node v0.10.24
cca 0.0.3
ANT 1.9.3

Show JS exceptions in a popup on Android/iOS.

Currently you have to dig through the log files to find javascript exceptions. It would be nice, if when doing a Debug build we could get a popup on screen of the exception. It's sometimes hard to even know that an exception happened and this would make it a lot easier.

The protocol is not supported. chrome-extension://undefined/chromeapp.html

I build the hello world application in Eclipse, started up an emulator (Nexus S, Google API 10) and Run As Android Application. The app icon appears in the emulator's app list, it starts and immediately displays a dialog with the error "The protocol is not supported. chrome-extension://undefined/chromeapp.html".

What am I missing?

[chrome.notifications] createNotification fails with "progress" type notification

Not sure if I should bother reporting this as a bug, since you probably already know this. And I'm not sure if I've even ever seen an android/iOS "progress" notification

Integrated "Open in Chrome" for iOS devices

We should make it easy to open Google Apps (Chrome, GMail, etc), from within Chrome Apps.

For example, links should open in Chrome (if it's installed) using Open in Chrome

App icon not configured correctly in iOS project.

Or the chrome project the provided icon is used. For the iOS project, we appear to get the default icon?

Provide script to update version numbers.

If you make a new version of your app you have to update the version number in the mainifest.json, xcode project and android project.

It would be nice to say 'mca_rev 0.1.2' to update all of the various revision numbers to the provided value.

CSS HTML/Body Height should be 100% by default.

Hey guys, I've noticed that the HTML/BODY CSS Height was not consistent between the mobile chrome apps webview and chrome.

Here's the source of the simple app file:

<html>
<style>
  body {
    border: 2px solid pink;
  }
</style>
<body>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem ....</p>
</body>
</html>

This screenshot is the file loaded by Google Chrome for Android:

This one is the same file loaded inside a mobile chrome app:

The trick/tip is to set this CSS:

<style>
  html {
    height: 100%;
  }
  body {
    border: 2px solid pink;
    height: 100%;
  }
</style>

I don't think this is good though.
What are your thoughts on that?

Missing runtime getPackageDirectoryEntry method

I'm happy to see Caret start up with the test app on Android, but it looks like it can't load its templates or config files without chrome.runtime.getPackageDirectoryEntry(). I don't really want to go back to loading via URLs, so it'd be nice to have this added to the API shims.

Dart polymer app does not load on Android, does load on iOS.

The dart polymer application loads on iOS without any issues. When loading on Android only a blank page shows up. If remote devtools console is opened and location.reload() is called on chrome-extension://undefined/index.html. Loading takes a little bit of time on Android. Created an example application
https://github.com/financeCoding/PolymerDartDemo

UDP chrome.socket.read not ever returning data

I am creating a UDP socket, connecting to a remote host successfully, writing data using chrome.socket.write successfully, but all subsequent reads result in {resultCode: 0}

Investigating, i see that this happens when the failure callback is triggered:

https://github.com/MobileChromeApps/chrome-cordova/blob/master/plugins/chrome.socket/socket.js#L66

Looking at the code in ChromeSocket.java, I suspect there is some IOException being triggered, because I can't find any other code paths that would trigger the error callback

https://github.com/MobileChromeApps/chrome-cordova/blob/master/plugins/chrome.socket/src/android/ChromeSocket.java#L873

But my analysis of the code seems wrong, because I don't see any code path where a UDP socket read even triggers anything but PluginResult.Status.OK

How do I view Log.{i,w,e} messages? Some way to view them using adb shell? dmesg? /var/log/messages?

I'm running on android Moto g 4.4.2

www seems like a strange choice.

Putting the src into www seems odd since this isn't going to be deployed as a website. Would be nice to use src instead of www as the src directory.

target multiple connected android devices?

Is there a way to specify an android device when multiple are connected? Via adb there's the -s flag, is something similar passed in via cca? Using the cordova cmd flag --target= seems to only work with avd created devices, not physically attached ones.

dart js-interop app does not load on Android or iOS.

@agrieve The app will work if location.reload() is called on android. iOS nothing loads. Example application can be found at https://github.com/financeCoding/MobileChromeTest2

iOS7 status bar is transparent, messing with UI layout

On iOS7, the status bar is transparent, and your content renders under it, so you end up getting the status bar text overlapping content.

I ended up adding the org.apache.cordova.statusbar plug in to handle this and then special casing it for my iOS version.

mca-update.js hardcodes path to mobile-chrome-apps directory.

The generated mca-update script has a hardcoded path to my moble-chrome-apps checkout. This will work fine on my local machine, but when I push the code to my linux box the script will fail.

chrome.fileSystem.chooseEntry fail on android

I'm calling

chrome.fileSystem.chooseEntry({type:"openFile"},function(e){})

cordova.js line 933

  androidExec.processMessages(msg);

here, msg is "22 F09 File27056475 n1000"

results in onUriResolveError

resolveLocalFileSystemURI is deprecated. Please call resolveLocalFileSystemURL instead. resolveLocalFileSystemURI.js:67
processMessage failed: Message: F09 File27056479 n1000 cordova.js:1034
processMessage failed: Error: TypeError: Cannot read property 'error' of undefined cordova.js:1035
processMessage failed: Stack: TypeError: Cannot read property 'error' of undefined
    at onUriResolveError (file:///android_asset/www/plugins/org.chromium.fileSystem/fileSystem.js:110:20)
    at fail (file:///android_asset/www/plugins/org.apache.cordova.file/www/resolveLocalFileSystemURI.js:38:26)
    at Object.cordova.callbackFromNative (file:///android_asset/www/cordova.js:294:48)
    at processMessage (file:///android_asset/www/cordova.js:1029:21)
    at Function.androidExec.processMessages (file:///android_asset/www/cordova.js:1063:13)
    at pollOnce (file:///android_asset/www/cordova.js:933:17)
    at pollOnceFromOnlineEvent (file:///android_asset/www/cordova.js:928:5) 

Also type:'openDirectory' does not seem to be implemented.

I'm running from on my android device, Moto G, android 4.4.2

delayed-stream not found

Had to manually node install -g delayed-stream in order to get cca create _myApp_ --copy-from to work. Not sure if this is something missing in cca's dependencies?

App generation should fill in more information.

If you create a new app, and it uses the default template, the generator script should prompt (and add command line flags) for more information.

The description, email and author name could all be requested and auto-populated into the config.xml and manifest.json files.

identity api is missing from `dev` branch

The API status page APIStatus.md suggests that identity is supported. I dont see it loaded in the javascript vm namespace.

Error when using chrome.identity plugin

When I enable chrome.identity plug-in in file cordova_plugins.js:
{
"file": "plugins/org.chromium.chrome.identity/identity.js",
"id": "org.chromium.chrome.identity.Identity",
"clobbers": [
"chrome.identity",
"chrome.experimental.identity"
]
}

I get the following error at application start-up:

09-19 00:32:23.606: E/Web Console(11783): Uncaught ReferenceError: corsXMLHttpRequest is not defined at chrome-extension://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/plugins/org.chromium.polyfill.xhr_features/androidXHR.js:43
09-19 00:32:23.606: D/webcore(11783): >>>>>>>>>>>>>>>>>>>>>>>>>>>viewSizeChanged
09-19 00:32:25.156: D/TilesManager(11783): new EGLContext from framework: 670c4708
09-19 00:32:25.156: D/GLWebViewState(11783): Reinit shader
09-19 00:32:25.196: D/GLWebViewState(11783): Reinit transferQueue
09-19 00:32:27.976: I/Web Console(11783): deviceready has not fired after 5 seconds. at chrome-extension://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/cordova.js:1093
09-19 00:32:27.976: I/Web Console(11783): Channel not fired: onCordovaReady at chrome-extension://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/cordova.js:1086
09-19 00:32:27.986: I/Web Console(11783): Channel not fired: onCordovaConnectionReady at chrome-extension://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/cordova.js:1086

Without enabling this plug-in app starts just fine until I press a button for identity log-in.

How do I fix this problem?

Provide a default reset stylesheet

Currently, if you create a new project, there can be large differences between how an element looks in iOS and in Chrome. A default stylesheet should be provided which resets all of the various elements and provides styling for consistency between the three platforms.

JIRA issues worth fixing

• test
• test 2
• test 3

App name for OAuth permissions is strange.

When I ran my program in the Android simulator and tried to get OAuth credentials it came up as:

Testing_Chrome_Cordova

I'd expect it to use my provided App name as the OAuth program name.

Document procedure to make syncFileSystem created in a Chrome app work with the mca apps.

Current, if you do the simplest thing, your Chrome app ends up writting into a directory with a long string of random characters as the name. The Android/iOS apps on the other hand, use a nice directory name (chrome-sync current, and I believe being made configurable.)

It would be nice if there was some documentation saying, if you want your syncFileSystem to work between chrome/android/ios you need to setup your syncFileSystem code like so.

./mca.js doesn't work under mingw bash

Repro:
Open "git bash" window
run "./mca.js"

Get an error. This is because it doesn't like the crazy #! line at the start. Runs fine if you run it with "node mca.js" explicitly.

Passing null as the second parameter of getFile crashes inside syncFileSystem on Android.

This worked correctly in the Chrome version but crashed when running under Android.

this.fs_.root.getFile('todos.txt', null, function(f) {})

I/Web Console( 1628): processMessage failed: Stack: TypeError: Cannot read property 'create' of null
I/Web Console( 1628):     at chrome-extension://ohgfbmefaoadakchflddcopcmphnlcba/plugins/org.chromium.chrome.syncFileSystem/syncFileSystem.js:136:24

Call to socket.recvFrom with bufferSize=null behaves differently in Chromium and in cca on Android

Calling

    chrome.socket.recvFrom(s.socketId, null, function(u) {
    …

on cca runs the callback even when no packet has been received with u = {resultCode: 0};. The same code on Chromium waits for some data before returning and then the u object is completely filled with fields.

Calling it with leaving out the optional bufferSize behaves the same on both platforms

     chrome.socket.recvFrom(s.socketId, function(u) {

The example code (to be executed by pasting it to the developer console) together with my results on cca and Chromium is at https://gist.github.com/jirkadanek/8751879 .

This matters because the chrome apps api package for Dart wraps the recvFrom in a way that if bufferSize is unspecified it will end up null (instead of omitting that parameter completely which is what a human would do). The wrapper assumes the behavior of desktop Chromium and when faced with what cca does it subsequently encounters some null pointers and fails with throwing an exception.

iOS SPDY Support

As we already have okhtttp for Android...

Any plans to integrate https://github.com/twitter/CocoaSPDY for iOS...

Setup the Play framework by default.

The current instructions list how to install the Play framework into your MCA app by going into eclipse and doing it through the UI.

This can be done automatically by the create script. If we detect that android is installed, we can use that to get the sdk directory. We can then check in the extras folder for the play framework. If not found, error out, tell user to install play SDK. (Or, launch Android to help them install it?)

If the framework is found the:

$ cd platforms/android
$ mkdir third_party
$ cp -R <path to sdk>/extras/google/google_play_services/libproject/google-play-services_lib third_party
$ android update project --target android-17 --path . --library third_party/google-play-services_lib

npm install -g cca Error!

on npm install -g cca
i get this error:

npm http GET http://registry.npmjs.org/cca
npm http 304 http://registry.npmjs.org/cca
npm http GET http://registry.npmjs.org/cryptojs
npm http GET http://registry.npmjs.org/optimist
npm http GET http://registry.npmjs.org/elementtree/0.1.5
npm http GET http://registry.npmjs.org/cordova
npm http GET http://registry.npmjs.org/node.extend
npm http GET http://registry.npmjs.org/shelljs
npm http 304 http://registry.npmjs.org/optimist
npm http 304 http://registry.npmjs.org/elementtree/0.1.5
npm http 304 http://registry.npmjs.org/cryptojs
npm http 304 http://registry.npmjs.org/node.extend
npm http 304 http://registry.npmjs.org/shelljs
npm ERR! error installing [email protected]

npm ERR! Error: No compatible version found: shelljs@'>=0.2.6- <0.3.0-'
npm ERR! Valid install targets:
npm ERR! ["0.0.1","0.0.2","0.0.3","0.0.4","0.0.5","0.0.6","0.0.7","0.0.8","0.0.9","0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.2.0","0.0.1-alpha1","0.0.2-pre1","0.0.4-pre1","0.0.5-pre1","0.0.5-pre2","0.0.5-pre3","0.0.5-pre4","0.0.6-pre1","0.0.6-pre2"]
npm ERR! at installTargetsError (/usr/share/npm/lib/cache.js:488:10)
npm ERR! at next_ (/usr/share/npm/lib/cache.js:438:17)
npm ERR! at next (/usr/share/npm/lib/cache.js:415:44)
npm ERR! at /usr/share/npm/lib/cache.js:408:5
npm ERR! at saved (/usr/share/npm/lib/utils/npm-registry-client/get.js:147:7)
npm ERR! at Object.oncomplete (/usr/lib/nodejs/graceful-fs.js:230:7)
npm ERR! You may report this log at:
npm ERR! http://bugs.debian.org/npm
npm ERR! or use
npm ERR! reportbug --attach /home/adstuck-002/npm-debug.log npm
npm ERR!
npm ERR! System Linux 3.8.0-31-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install" "-g" "cca"
npm ERR! cwd /home/adstuck-002
npm ERR! node -v v0.6.19
npm ERR! npm -v 1.1.4
npm ERR! message No compatible version found: shelljs@'>=0.2.6- <0.3.0-'
npm ERR! message Valid install targets:
npm ERR! message ["0.0.1","0.0.2","0.0.3","0.0.4","0.0.5","0.0.6","0.0.7","0.0.8","0.0.9","0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.2.0","0.0.1-alpha1","0.0.2-pre1","0.0.4-pre1","0.0.5-pre1","0.0.5-pre2","0.0.5-pre3","0.0.5-pre4","0.0.6-pre1","0.0.6-pre2"]
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/adstuck-002/npm-debug.log
npm not ok

`mca prepare` should pick up changes in permissions and required plugins.

Currently the plugins added to a project are chosen when you create a project with mca and existing manifest.json file. mca prepare should pick up changes in manifest.json file and add additional plugins that don't exist for when the project was created.
@agrieve

mobile-chrome-app-samples run

i tried to run samples from https://github.com/MobileChromeApps/mobile-chrome-app-samples
samples are running on my android device but i am getting white blank screen.
i am able to load page successfully only in hello world sample.

what are api supported?
any sample from the link i may able to run successfully and not just white page on device?

thanks!

my device:
nexus4 running on 4.4.2. stock.

Receiving Illegal Constructor when accessing Blob on Android.

Using the Blob object works correctly in chrome but fails in Android. I'm using it as:

var blob = new Blob([JSON.stringify(content)],
                              {type: 'application/json'});

and receive:

TypeError: Illegal constructor

Is this due to the age of the Android WebView?