Jatto_abdul Jatto_abdul - 1 month ago 36
AngularJS Question

Checking for Active Network connection and exiting the app if not active in ionic using ngCordova

i am developing a conference app that is data driven and constantly will be updated from the web server. i am storing data on the local storage for persistence, but when the app is installed and launched for the first time i want to pop up a "No Internet Connection" message and close the app when they click any button on the pop up. but when there is internet load the app. i have done this in my app.run function but it does not work.

var app = angular.module('starter', ['ionic', 'ionic-material', 'ngCordova']);

app.run(function ($ionicPlatform, $ionicPopup, $timeout) {
$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) {
StatusBar.styleDefault();
}

//checking for internet connection on startup
if (window.Connection) {
if (navigator.connection.type === Connection.NONE) {
document.addEventListener("offline", function () {
$ionicPopup.confirm({
title: "Internet Disconected",
content: "Sorry, No internet connection now, please try again"
}).then(function (result) {
if (!result) {
$ionicPlatform.exitApp();
}
});
}, false);
}
}
});
});


the app pops up the message, but on click of any of the buttons(ok and cancel), the app just stays on white screen. it does not exit the app.
i don't know what am doing wrong. please i need advice and code samples to correct my error.

Answer

A few aspects to keep in mind:

  • your implementation of exitApp() is reported not to work in iOS devices

  • kill an app is a big no for usability, you'd better present the interface with the latest chached data or if any data is cached a "no network connection" message integrated into the app layout (checkout Spotify for an example)

In any case, your purpose could be reached with ngCordova.plugins.network module, bundled in http://ngcordova.com/

This an example of service that returns current network status:

angular.module('app.common.connectivity', [
  'ngCordova.plugins.network'
])

.service('ConnectivityService', function($cordovaNetwork) {
  this.isOnline = $cordovaNetwork.isOnline() || false;
});

You can add this module and inject the service where needed, like in:

var app = angular.module('starter', ['ionic', 'ionic-material', 'app.common.connectivity']);

app.run(function ($ionicPlatform, $ionicPopup, $timeout, ConnectivityService) {
    $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) {
            StatusBar.styleDefault();
        }

        //checking for internet connection on startup
        if( !ConnectivityService.isOnline && !window.localStorage.appLaunched ) {
          $ionicPopup.confirm({
            title: "Internet Disconected",
            content: "Sorry, No internet connection now, please try again"
          })
          .then(function(result) {
            $ionicPlatform.exitApp();
          });
        }

        // Apparently we're online so remember we already have been here
        if ( !localStorage.appLaunched ) localStorage.appLaunched = true;
    });
});