CODEWITHSUNDEEP
angularjscordovaphonegap-pluginsionic-framework
Bhuvnesh
Bhuvnesh

Reputation: 71

Detect internet working or not in Cordova Ionic Framework

I want show message when internet not working in cordova Ionic Application, Can anybody done this in Ionic Cordova Application.

Upvotes: 4

Views: 3367

Answers (5)

Mahen
Mahen

Reputation: 760

After installing plugin (cordova plugin add org.apache.cordova.network-information), you can use following code inside app.js to show alert message

if(window.Connection) {
  console.log("checking connection");
    if(navigator.connection.type == Connection.NONE) {
      $ionicPopup.alert({
        title: "No Internet Connection",
        content: "Internet Connection is not available. In offline you can see previously fetched data.",
        okType:"balanced",
      })
      .then(function(result) {
          if(!result) {
            console.log('ok clicked');
          }
      });
    }
}

Upvotes: 0

Sunil Lama
Sunil Lama

Reputation: 4539

Its quite simple actually. Add the plugin:

cordova plugin add org.apache.cordova.network-information

You don't need to include anything in index.html. Just add $cordovaNetwork on the controller you are using. And, the following snippet will go well with it.

document.addEventListener("deviceready", function () {
 // Check for network connection
    if(window.Connection) {
    //you can log your connection as well, whether it is internet, wifi and so on.In this case you are checking for no connection
alert(navigator.connection.type);
      if(navigator.connection.type == Connection.NONE) {
        $ionicPopup.confirm({
          title: 'Network Problem',
          content: 'Sorry, Please Check Your Network Connection.'
        })
//or you can simply navigate it to a page with the no internet connection html.
      }
    }
})

//This is one of the way. The next way is having the following snippet in the controller you want to use. Don't forget to add the $cordovaNetwork, $ionicPlatform in this case.

var type = $cordovaNetwork.getNetwork();

   var isOnline = $cordovaNetwork.isOnline();

    var isOffline = $cordovaNetwork.isOffline();

 $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
      var onlineState = networkState;
      alert(onlineState);
    })

 $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
      var offlineState = networkState;
       alert(offlineState);
    })

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

  $rootScope.$on('$cordovaNetwork:online',function(event,networkState){
    $location.path('/japp/login');
  })

 $rootScope.$on('$cordovaNetwork:offline',function(event,networkState){
     $ionicPopup.confirm({
                        title: "Internet Disconnected",
                        content: "The internet is disconnected on your device."
                    }).then(function(){
                                    ionic.Platform.exitApp();
                    })
  })

If you are still having problem feel free to ask any small detail.

Upvotes: 1

user3006708
user3006708

Reputation: 121

here is some discussion on the ionic forum: http://forum.ionicframework.com/t/how-to-check-network-coneection/15806/14

you can find a lot like this one. I would suggest to use ngCordova and do something like this:

$rootScope.$on('$cordovaNetwork:online', function() {});
$rootScope.$on('$cordovaNetwork:offline', function() {});

Upvotes: 0

user1936277
user1936277

Reputation: 19

Hi there is another issue here. Network information only tells you wether there is a connection. But that doesn't mean you have connection to a website and/or a running database. In most cases an app depends on the website and/or the database are available. So you have to check those too.

Upvotes: -1

kindasimple
kindasimple

Reputation: 2427

There is a network-information plugin to get network information from the device. Add the

cordova plugin add org.apache.cordova.network-information

include it and in app.js and register an offline event handler from within the onDeviceReadyevent handler, 

onDeviceReady: function() {
    document.addEventListener("offline", onOffline, false);
},

onOffline: function () {
  //handle offline 
}

Upvotes: 6

Related Questions