Checking the network status in the Ionic app

Question

I wrote the following service, which tries to check the connection of the application, as in my Ionic application, I need to perform certain actions based on whether the user is offline or online. I am currently experiencing 3 problems.

1) On my desktop, when testing in a browser, I always get the message You are not connected , even when my Wi-Fi is not working. How can I make it display the correct message on my desktop?

2) On my mobile device, I tested this and yes, it really works at the initial stage of the download and correctly sets the connection status, but if I turn on / off the Wi-Fi connection, it does not update immediately and takes some time. How can I get it to update "in real time" in my mobile application.

connection.service.js

 (function() { 'use strict'; angular .module('dingocv.services') .service('ConnectionService', ConnectionService) function ConnectionService($rootScope, $cordovaNetwork) { this.isOnline = function() { if(ionic.Platform.isWebView()) { return $cordovaNetwork.isOnline(); } else { return navigator.OnLine; } } this.isOffline = function() { if(ionic.Platform.isWebView()) { return !$cordovaNetwork.isOnline(); } else { return !navigator.OnLine; } } this.startWatching = function() { if(ionic.Platform.isWebView()) { $rootScope.$on('$cordovaNetwork:online', function(event, networkState) { console.log('went online'); }); $rootScope.$on('$cordovaNetwork:offline', function(event, networkState) { console.log('went offline'); }); } else { window.addEventListener('online', function(e) { console.log('went online'); }, false); window.addEventListener('offline', function(e) { console.log('went offline'); }, false); } } } })(); 

search.controller.js

 (function() { 'use strict'; angular .module('dingocv.controllers') .controller('SearchController', SearchController) function SearchController($scope, CategoryService, ConnectionService) { if(ConnectionService.isOnline()){ $scope.connected = true; } else { $scope.connected = false; } CategoryService.getCategoryList().then(function(dataResponse) { $scope.categories = dataResponse.data; }); } })(); 

search.view.html

 <ion-view view-title="Search"> <ion-content> <div ng-show="!connected"> You are not connected </div> <div ng-show="connected"> You are connected </div> </ion-content> </ion-view> 

Answer 1

You can implement these codes below:

In your app.js app

 var app = angular.module('starter', ['ionic', 'ionic-material', 'starter.controllers', 'starter.service', 'ngCordova']); app.run(function($ionicPlatform, $ionicPopup, $timeout) { $ionicPlatform.ready(function() { if(window.Connection) { if(navigator.connection.type == Connection.NONE) { $ionicPopup.confirm({ title: "Internet Disconnected on your device", content: "App requires Network Connection..." }) .then(function(result) { if(!result) { ionic.Platform.exitApp(); } }); } } if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); var backButton =0; $ionicPlatform.registerBackButtonAction(function(){ if(backButton == 0){ backButton++; $timeout(function(){ backButton = 0; },2000); }else{ navigator.app.exitApp(); } },100); window.addEventListener("online", function(e){ },false); window.addEventListener("offline", function(e){ console.log(e); $ionicPopup.alert({ title: "Message", template: "There is no internet connection" }); },false); });