Skip to content
Jason Livesay edited this page May 7, 2015 · 27 revisions

Overview

This is a Crosswalk Cordova shell with the main plugins pre-installed. It can run app code (almost) directly out of a github repo. It is useful if you want to do dev/testing using a native Android device only rather than running the emulator on your laptop or rebuilding and downloading/installing your app everytime.

If you don't want/need to customize or experiment with this you can just search for my app on the Google Play store under XWalk Cordova Github Runner.

Note: If you fork this, remember to change the Admob Ids.

Android device as development machine?

Several months ago I realized I could use a new development machine since my laptop's keyboard and touchpad were slightly broken, and my laptop was kind of trying to melt itself.

I decided instead of spending several hundred on a new laptop, I would get a 7-inch Galaxy Tab 4 for around $150. I had some trouble rooting it, so I ended up also later buying a used Asus Memopad for $89 plus tax and shipping.

To make a long story short, I can actually code on these devices and I don't know if I will ever buy another laptop. The Memopad is rooted and has Debian on it via Linux Deploy, and when I need to I can also log in to my Linode using Server Auditor or JuiceSSH.

I went through quite a variety of bluetooth keyboards before realizing that the on-screen keyboard is much quieter and more convenient once you get used to it.

Cordova

I wanted to try building apps and I have a web background so Cordova was the natural choice. If you are following the same path the starting point is to look at the cordova module on npmjs.com and read about it.

Basic idea

The basic idea is to create an app which has all of the most common plugins pre-installed, and then when you enter a user and repo, it dynamically loads your script. So to just test out apps or ideas you only need the one actual app installed.

Cordova (Chromium) Rendering Bugs

I will get into how I finally got this to work the way I wanted in a moment, but first let me explain an issue I ran into. I had my original Cordova app set up wih several of the most popular plugins installed. I tested it with a few APIs (see runvnc/getpic and runvnc/getloc. I even uploaded it to Google Play (search for ghrun) and thought I was mostly done.

Then I went to try out the next thing I had planned which was a simple 3d game. I decided to use a canvas-based 3d renderer since my graphics were going to be very retro and basic (wireframe maybe). So I created my repo, cat'ed the phoria 3d library and my test code with a spinning cube, and tried to run it with ghrun.

And my cube appeared spinning away, but I noticed it was not spinning smoothly. In fact, with nothing but a cube and plane in the scene, I was only getting about 5 frames per second! I tested the same code in browsers and it worked fine.

Eventually I found this bug listing: https://code.google.com/p/chromium/issues/detail?id=315111

That is the best explanation (I think) for why the performance of the canvas was so horrible in my Cordova app: its based on that Chromium build which apparently has a broken rendering system that just cannot animate smoothly at all.

Crosswalk Cordova

Crosswalk is similar to Cordova but built with a browser that supports HTML 5 like WebRTC and WebGL (and luckily also has a non-broken rendering system/canvas). See https://crosswalk-project.org/documentation/cordova.html

I was a bit confused about which download I needed. The first time I accidentally downloaded the x86 one and couldn't figure out why my APKs wouldn't load. Eventually I was successful using the one labelled Cordova Android (ARM). See https://crosswalk-project.org/documentation/downloads.html

One thing that is also different from the WebView in regular Cordova is that this one has strict MIME checking and supports the header X-Content-Type-Options: nosniff which means loading my script by addding a script tag to head doesn't work with the github.com origin. See https://code.google.com/p/chromium/issues/detail?id=180007

rawgit.com

Lots of people want their github content to be served with a proper MIME type and so there happens to be at least one solution: http://rawgit.com. Rawgit is run by a great guy as a free service.

Rawgit does do caching though which means if we try to use it while developing with a URL referencing the master branch we will be blocked for a few minutes from accessing our updated script until the cache expires.

Fortunately rawgit can work with specific commit hashes.

Git Refs

So the next question is, how can I get the sha for the latest commit on master? Github has a simple API call for that which looks like this: GET /repos/:owner/:repo/git/refs/heads/skunkworkz/featureA.

The result is some JSON that contains an object.sha which I can use in my rawgit.com URL.

Actual code

The meat of this, which is the basic trick of getting the head ref (the req() function is just an HTTP GET) and adding the script tag to load the app, is pretty simple and gets executed when the user presses the Add/Run button:

      onGo: function() {
        var proj = document.getElementById('run').value;

        var url = 'https://api.github.com/repos/' +
                  proj +'/git/refs/heads/master';
        req(url, function(res) { 
          res = JSON.parse(res);
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://cdn.rawgit.com/'+proj+'/'+res.object.sha+'/main.js';
          document.getElementsByTagName('head')[0].appendChild(script);
        });
      }

See https://github.com/runvnc/cwgh/blob/master/assets/www/js/index.js

Crosswalk Cordova compatible plugins

These are the plugins I installed using plugman. https://github.com/crosswalk-project/crosswalk-website/wiki/Plugins-list-@-3.5.0-supported-by-crosswalk-cordova-android

It is interesting to note the convergence of HTML5 and core mobile features. Not everything is covered by HTML5 though or works quite as smoothly so building an app does have advantages in terms of features from plugins and ease of installation/launch.

Build and Installl

The last step before downloading the APK is to build it. Just run the cordova/build command from the project directory. The Server Auditor app I use for sshing into my Linode has a built in SFTP which simplifies downloading the APK.

Use

Once you have your shell app installed you can just push the main.js code to any github repo and then press the Add/Run again (or Reload first) in order to test your updates or someone else's app. I have a script that makes the push one short command.

You may have some variation on this workflow or on the idea in general that you could try out in your own fork or whatever.