How to monitor network connectivity in ionic?


#1

I want to monitor network connectivity in ionic app . i’m using ngCordova network plugin i have 3 scenarios

  1. while opening app if net is not connected
  2. while using app if net is disconnected suddenly or limited connectivity
    3.before fetching a API data if net is disconnected
    for all 3 scenarios if net is disconnected or limited network i want to display an error page (simple Html file)

how can i do the above things ?? plz someone guide me or post a sample code


#2

add network-information cordova plugin --> listen on the offline and online events + check the connection type. --> if the device goes offline --> redirect to error page or open an alert box


#3

can you post a sample code ??


#4

for usage i recommend using ionics ngCordova lib
http://ngcordova.com/docs/plugins/network/

there are also examples and a startup guide


#5

I have this code I use…

    $rootScope.BrowserNetworkType = "BROWSER";
    $rootScope.BrowserEventNetOn = '$fakeNetwork:online';
    $rootScope.BrowserEventNetOff = '$fakeNetwork:offline';

    if (window.cordova) {
        $rootScope.networkType = $cordovaNetwork.getNetwork;
        $rootScope.networkOnline = $cordovaNetwork.isOnline;
        $rootScope.networkAvail = $rootScope.networkOnline();
        $rootScope.$on('$cordovaNetwork:online', function (e, networkState) {
            $rootScope.networkAvail = true;
        });
        $rootScope.$on('$cordovaNetwork:offline', function (e, networkState) {
            $rootScope.networkAvail = false;
        });
    } else {
        $rootScope.BrowserNetworkOnline = $rootScope.networkAvail = navigator.onLine;
        $rootScope.networkType = function () {
            return $rootScope.BrowserNetworkType;
        };
        $rootScope.networkOnline = function () {
            return $rootScope.BrowserNetworkOnline;
        };
        $rootScope.$on($rootScope.BrowserEventNetOn, function (e, networkState) {
            $rootScope.BrowserNetworkOnline = $rootScope.networkAvail = true;
        });
        $rootScope.$on($rootScope.BrowserEventNetOff, function (e, networkState) {
            $rootScope.BrowserNetworkOnline = $rootScope.networkAvail = false;
        });
    }

And this function which is wired to a toggle switch so i can easily set the network to off when testing in the browser.

    $scope.toggleNetwork = function () {
    $rootScope.networkAvail = !$rootScope.networkAvail;
    if ($rootScope.networkAvail) {
        $rootScope.$broadcast($rootScope.BrowserEventNetOff);
    } else {
        $rootScope.$broadcast($rootScope.BrowserEventNetOn);
    }
};

And I check in my app controllers like this:

if (!$rootScope.networkAvail) { } else {}

#6

if i use in run method will it be sufficient ?? im confused can you guide me ?


#7

i think you can use it in your .run but I use it in my initial (default route) controller and have not noticed anything to do with it malfunctioning during the app lifetime. Everything it uses is in the root scope (probably wrong angularwise, should be a service I expect).