Inceptor361 Inceptor361 - 5 months ago 62
AngularJS Question

Ionic: Check Internet Connection using Cordova

I am working on Ionic Framework, and facing issues using the Apache Cordova Network API to detect internet connection in Android App.
I have referred this tutorial and also created a demo project, which works fine.

I have followed the below steps. [from the tutorial]


  1. ionic start testApp sidemenu

  2. ionic platform add android

  3. Open
    testApp/www/js/app.js

  4. Copy paste this code

    if(window.Connection) {

    if(navigator.connection.type == Connection.NONE) {
    alert('There is no internet connection available');
    }else{
    alert(navigator.connection.type);
    }
    }else{
    alert('Cannot find Window.Connection');
    }

  5. Install Cordova Plugin
    cordova plugin add org.apache.cordova.network-information

  6. Build
    ionic build android

  7. Run
    ionic run android



This works fine

Issue


  1. Copy Paste
    www
    from
    mainproject
    to
    testApp
    and do steps 6 and 7



I get a alert
Cannot find Window.Connection


After copy pasting the
app.js
looks like this

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
// check internet connection
//alert(window.Connection);
alert('Hi')
try {
alert('Naviagtor says'+navigator.connection.type);
}
catch(err) {
alert( 'Error '+ err.message)
//here i get 'Error cannot read property type of undefined'
}

if(window.Connection) {
if(navigator.connection.type == Connection.NONE) {
alert('There is no internet connection available');
}else{
alert(navigator.connection.type);
}
}else{
alert('Cannot find Window.Connection');
}

});
})


The moment I copy paste my
app.js
and
controllers.js
to the
testApp/www/js
directory the whole thing blows up.

Any help in debugging is highly appreciated.

Thanks,

Note

I do have
cordova.js
in
index.html
.

I have re installed
platforms
and
plugins
after copy paste as well.

Answer

I solved a similar issue by using ngcordova . It gives you an angular wrapper around the plugin that implements promises.

Often Cordova plugins aren't ready when you try to call them, using the promise interface you can avoid getting undefined errors.

I stole the example from the ngcordova page on the network plugin here.

module.controller('MyCtrl', function($scope, $rootScope, $cordovaNetwork) {

 document.addEventListener("deviceready", function () {

    var type = $cordovaNetwork.getNetwork()

    var isOnline = $cordovaNetwork.isOnline()

    var isOffline = $cordovaNetwork.isOffline()


    // listen for Online event
    $rootScope.$on('networkOffline', function(event, networkState){
      var onlineState = networkState;
    })

    // listen for Offline event
    $rootScope.$on('networkOffline', function(event, networkState){
      var offlineState = networkState;
    })

  }, false);
});
Comments