How to monitor internet connectivity in ionic / cordova applications

If you are developing mobile application you may required to check whether device is connected to internet or not. You need a internet connection to do any operation with server. Even you required internet connection to request api. Sometimes you want to show message to tell user that you are disconnected from internet. So for every operation which required internet connection you need to check internet connection.

Today in this article i will show you how to monitor internet connectivity in ionic/cordova application. You can also check internet connectivity on browser. I have written one service in angular js. We will start watching network connectivity as soon as angularjs bootstraps the application. We can do specific task when user disconnects or connects back to internet. 

In this service i am listening to online & offline event. As soon as i receive offline event i add offline class to body element & remove offline class when user come back to online state. The css class makes document black & white & turns off all the pointer events on document so, that user can easily identify that he is disconnected from internet. It will give you a very good user experience. 

So, lets get started.

Note: You can use this service in any angular js application

To do this you need 2 things

1. you have to inject ngcordova module in angular application as a dependency injection. Inject ngcordova module in your app module.

you can check the link given here = http://ngcordova.com/docs/install/

2. you have to install cordova network plugin provide by ngcordova. Inject $cordovaNetwork in your service.

you can check the link given here = http://ngcordova.com/docs/plugins/network/

1. CSS

.offline {
  filter: grayscale(1);
  pointer-events: none;
}

2. JS

var myApp = angular.module('myApp', ['ionic', 'ngCordova']);

// Initialize the main module
myApp.run(function($ionicPlatform, $rootScope, connectivityMonitor) {
  $ionicPlatform.ready(function() {
    // start checking network connectivity
    connectivityMonitor.startWatching();
  });
});

myApp.factory('connectivityMonitor', function($rootScope, $cordovaNetwork) {

  return {
    isOnline: function() {
      if (ionic.Platform.isWebView()) {
        return $cordovaNetwork.isOnline();
      } else {
        return navigator.onLine;
      }
    },
    isOffline: function() {
      if (ionic.Platform.isWebView()) {
        return !$cordovaNetwork.isOnline();
      } else {
        return !navigator.onLine;
      }
    },
    startWatching: function() {
      var bodyElem = angular.element(document.querySelector('body'));

      if (ionic.Platform.isWebView()) {
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState) {
          console.log("went online");
          bodyElem.removeClass('offline');
        });

        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState) {
          console.log("went offline");
          bodyElem.addClass('offline');
        });
      } else {
        window.addEventListener("online", function(e) {
          console.log("went online");
          bodyElem.removeClass('offline');
        }, false);

        window.addEventListener("offline", function(e) {
          console.log("went offline");
          bodyElem.addClass('offline');
        }, false);
      }
    }
  }
});