CODEWITHSUNDEEP
cordovaconnectionmeteor
Boaz Hoch
Boaz Hoch

Reputation: 1229

meteor with phonegap/cordova

I am working on a meteor mobile app ( im using android ). im using MetoerRider approach, essentially the phonegap app startup and as soon as the app is done starting it does an ajax call to the meteor app ("http://myapp.meteor.com")

and i get the DOM of the meteor app as he response.

$.ajax({
      url: __MeteorRiderConfig__.meteorUrl,

      cache: false,

      // TODO: split to method on MeteorRider
      error: function( jqXHR, textStatus, errorThrown ) {

        console.error("MeteorRider failure");

        console.error(jqXHR, textStatus, errorThrown);

      },
      // TODO: split to method on MeteorRider

      success: function( data, textStatus, jqXHR ) {

        console.log("MeteorRider success");

        console.log(textStatus);

        console.log(data);
        // update URLs

        data = data.replace(/(href|src|manifest)\=\"\//gm, '$1="' + meteorUrl + '/');

          console.log(meteorUrl);

        console.log(data);


// get the original file location, not including any params
phonegapLocation = window.location.href.split('.html')[0] + '.html';

// it's stored in a param "page"
currentMeteorPath = window.location.search.replace("?", "")
if(currentMeteorPath.length > 0) {
  meteorUrl += currentMeteorPath.split('page=')[1]
}
console.log("replacing state with "+meteorUrl)
window.history.replaceState({}, "", meteorUrl);  


        // replace the document with the new document/data

        document.open();

        document.write(data);

        document.close();
        // trigger the "loaded" events (it'd be nice to do this AFTER JS has loaded

        $(document).trigger('DOMContentLoaded');

        $(document).trigger('load');

        $(document).trigger('complete');

      }
    });
  }

the problem is that my phonegap app is only working when wifi is on, as soon as i close the wifi it stops working, if i startup my phonegap app when wifi is off i still get the meteor DOM into my phonegap app but i cant do any functions (login/create group etc).

so i started debugging my app (using the phonegap debug in build.phonegap.com), and here is the log that i get when wifi is on:

if(navigator.onLine){
console.log("true")
}
else{
console.log("false")
}

logs -> "true"

var networkState = navigator.connection.type;

        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';

    console.log('Connection type: ' + states[networkState]);
    }

logs -> 'WiFi connection'

Meteor.status()

logs -> connected: true retryCount: 0 status: "connected"

when using mobile network:

if(navigator.onLine){
    console.log("true")
    }
    else{
    console.log("false")
    }

logs -> "true"

var networkState = navigator.connection.type;

        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';

    console.log('Connection type: ' + states[networkState]);
    }

logs -> 'Cell 3G connection'

Meteor.status()

logs -> connected: false retryCount: 1 status: "connecting"

trying to do Meteor.reconnect() not helping and its not working. when doing Meteor.disconnect() when wifi is on, the app disconnect but then when trying to do Meteor.reconnect() its not working either.

when switching (when the app is working ) either to wifi on / wifi off. i lose all connection and cant even debug.

EDIT: added offline event

phonegapapp = {
    // are we on a phonegap app?
    phonegap: true,
    // are we testing PhoneGap or not?
    test: false,
    // 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, false);

    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'phonegapapp.receivedEvent(...);'
    onDeviceReady: function () {
        document.addEventListener("offline", this.onOffline, false);
        phonegapapp.receivedEvent('deviceready');
        phonegapapp.receivedEvent('offline');
        if (this.test) {
            $('phonegapapp-test').show();
        } else {
            phonegapapp.meteorRider();
        }
    },
    // Update DOM on a Received Event
    receivedEvent: function (id) {
        console.log('Received Event: ' + id);
    },
    onOffline: function () {
        device.exitApp();
    },

    // Setup MeteorRider
    meteorRider: function () {
        MeteorRider.init();
    }
};

Update: tested on two android phones ( v 4.1.2 and v 4.3.3), on another meteor app ( without iron-router, test.meteor.com ). both phones logged - Meteor.status() "connected" when using mobile network. but when switching wifi on / off, both lost any network connection.

so i narrow it to two possible problems: 1.my meteor app is doing something wrong. 2.iron-router

after another check on another meteor app ( app that uses iron-router) meteor.status() logs "connected". i belive the reason for the failure is in my app, altought i dont see any errors in my meteor app.

New Update: ok so this is getting really weird, i have started a new meteor app simply doing "meteor create test" added iron-router and some more packages like underscore jquery accounts and such. and then i have deployed it to meteor - meteor deploy boaz.meteor,com prompt a password, opned my phonegap app to see if its working logged Meteor.status(); and got "false" and "connecting"

New Update: tried creating an app without any changes or without adding any packages or removing any package. dosent work either, Meteor.status(); logs "false" and "connecting"

Upvotes: 4

Views: 1096

Answers (1)

Sridhar Boganathan
Sridhar Boganathan

Reputation: 399

Please register the offline event. if the device is gone offline, the call back of this event will be triggered. In the call back function, close(terminate/stop/exit) the application.

Code for triggering offline event: 

document.addEventListener("offline", onOffline, false);

function onOffline() {
    // Handle the offline event
}

Exit the app for iphone: navigator.device.exitApp();

Exit the app for android: device.exitApp();

So that, the app will be closed when connection goes off and it can be opened again. Please let me know

Upvotes: 1

Related Questions