When Ripple Doesn’t Call the ‘deviceready’ Handler in Your PhoneGap/Cordova Project Set the Platform Version Manually

Alright, seriously, PhoneGap is supposed to be easy, ‘yadda yadda yadda’.

Agreed, after my first PhoneGap experience, creating a little Google OAuth integration is fairly easy. Then you want to store the token to the local file system, so you obviously need to make sure Cordova is available, by adding an event handler for the ‘deviceready’-event. The interesting parts are the bindEvents and onDeviceReady functions.

Somewhere, your index.html calls app.initialize() in a script-tag, eventually at the end of the html, right before your body closing tag. getToken() is a function defined further down in my code.

Code is fairly easy, in your JS-file, that you use for your index.html, you have

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener("deviceready", this.onDeviceReady);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        getToken();
        this.receivedEvent('deviceready');

    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);

    }
};

 

Now I wanted to test this in Chrome with the Ripple plugin. The JS debugger always stopped at the document.addEventListener() method, but never called the handler.

What did do the trick though makes me go mad  with Ripple.

I already was calling ripple with this URL:

http://localhost?enableripple=cordova-2.7.0-Nexus4

telling it thus what cordova version I’m using, etc.

But Ripple doesn’t know version 2.7.0, which makes it default to 1.0.0 in the UI, but your URL stays the same and you don’t even notice.

To fix that, you have to set the Platform Version in the Platforms section on the left hand side of the emulator interface:

Set Cordova Version

And then, surprise surprise, the event handler is magically called.

You will also notice that your URL now points to:

http://localhost?enableripple=cordova-2.0.0-Nexus4

I don’t even want to mention the amount of hours I’ve spent googling this, trying all kinds of solutions, seeing other people go mad on Stack Overflow and what not. And I only figured this out by pure chance and coincidence, as I was just completely running out of ideas, after trying all sorts of different code, different Cordova versions, etc. etc. etc.