Ionic: check your internet connection with Cordova

Question

I am working on the Ionic Framework and run into problems using the Apache Cordova Network API to detect Internet connectivity in an Android application. I mentioned this tutorial and also created a demo project that works great.

I have completed the following steps. [from the textbook]

• ionic start testApp sidemenu

• ionic platform add android

• Open testApp/www/js/app.js

• Copy this code

   if(window.Connection) { if(navigator.connection.type == Connection.NONE) { alert('There is no internet connection available'); }else{ alert(navigator.connection.type); } }else{ alert('Cannot find Window.Connection'); } 

• Install the Cordova cordova plugin add org.apache.cordova.network-information

• Build ionic build android

• Run ionic run android

It works great

Question

8. Copy paste www from mainproject into testApp and follow steps 6 and 7

I get a Cannot find Window.Connection

After copying the paste, app.js looks like this:

 .run(function($ionicPlatform) { $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) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } // check internet connection //alert(window.Connection); alert('Hi') try { alert('Naviagtor says'+navigator.connection.type); } catch(err) { alert( 'Error '+ err.message) //here i get 'Error cannot read property type of undefined' } if(window.Connection) { if(navigator.connection.type == Connection.NONE) { alert('There is no internet connection available'); }else{ alert(navigator.connection.type); } }else{ alert('Cannot find Window.Connection'); } }); }) 

The moment I copy, paste my app.js and controllers.js into the testApp/www/js directory, it all explodes.

Any help in debugging is much appreciated.

Thanks,

Note

I have cordova.js in index.html .

I installed platforms and plugins again after copying.

Answer 1

I solved a similar problem using ngcordova . It provides an angular wrapper around a plugin that implements promises.

Often Cordova plugins are not ready, when you try to call them using the promises interface, you can avoid undefined errors.

I stole an example from the ngcordova page in a network plugin here .

 module.controller('MyCtrl', function($scope, $rootScope, $cordovaNetwork) { document.addEventListener("deviceready", function () { var type = $cordovaNetwork.getNetwork() var isOnline = $cordovaNetwork.isOnline() var isOffline = $cordovaNetwork.isOffline() // listen for Online event $rootScope.$on('networkOffline', function(event, networkState){ var onlineState = networkState; }) // listen for Offline event $rootScope.$on('networkOffline', function(event, networkState){ var offlineState = networkState; }) }, false); }); 

Answer 2

For any new visit and problems with answering Armed10's work, you can check the message I wrote, which goes literally step by step, telling you where and why you should put some piece of code (it may be useful, re only starting with Ionic): http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/ .

In addition, I made the code code free on Github: https://github.com/Hitman666/IonicNetworkInfo .

edit: According to the rules of StackOverflow, I also add the contents of the message:

Step by step on how to do it yourself

Launch a new Ionic project by following these steps:

 ionic start IonicNetworkInfo blank 

Then change the directory to the newly created IonicNetworkInfo:

 cd IonicNetworkInfo 

Install ngCordova with Bower:

 bower install ngCordova 

If you did not accidentally install bower, you can install it using npm:

 npm install bower -g 

Open the www / index.html file in your favorite editor and add a link to ngCordova (just above the cordova.js script):

 <!-- This is what you should add, the cordova below you'll already have --> <script src="lib/ngCordova/dist/ng-cordova.min.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> 

Install the ngCordova network plugin by running the following command on the Terminal / Command command line (you must do this from the root directory of your application, so in our case it is the IonicNetworkInfo directory):

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

To check if you have successfully installed the plugin, you can run the following command (from the root directory - I will not repeat this anymore; when I say that you have to run some command from the Terminal / Command prompt, so in this case, from the root directory applications):

 cordova plugin list 

You should see the following output:

 > cordova plugin list com.ionic.keyboard 1.0.4 "Keyboard" org.apache.cordova.network-information 0.2.15 "Network Information" 

Open www / js / app.js and add ngCordova to the list of dependencies, so basically the first line looks like this:

 angular.module('starter', ['ionic', 'ngCordova']) 

Create a new controller in the www / js / app.js file called MyCtrl with the following contents:

 .controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) { document.addEventListener("deviceready", function () { $scope.network = $cordovaNetwork.getNetwork(); $scope.isOnline = $cordovaNetwork.isOnline(); $scope.$apply(); // listen for Online event $rootScope.$on('$cordovaNetwork:online', function(event, networkState){ $scope.isOnline = true; $scope.network = $cordovaNetwork.getNetwork(); $scope.$apply(); }) // listen for Offline event $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){ console.log("got offline"); $scope.isOnline = false; $scope.network = $cordovaNetwork.getNetwork(); $scope.$apply(); }) }, false); }) 

In this controller, you attach an event listener to the deviceready event (because it may happen that the device would not have been initialized when this code was run), and you will get network information using

 $cordovaNetwork.getNetwork(); 

Information about the weather connected to the Internet is obtained on the following line:

 $scope.isOnline = $cordovaNetwork.isOnline(); 

Then you register two events: $ cordovaNetwork: online and $ cordovaNetwork: online, which starts when the device goes online / offline. In them, you simply update the $ scope () variables. For reference, the entire contents of the www / js / app.js file should be:

 // Ionic Starter App // angular.module is a global place for creating, registering and retrieving Angular modules // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) // the 2nd parameter is an array of 'requires' angular.module('starter', ['ionic', 'ngCordova']) .run(function($ionicPlatform, $cordovaNetwork, $rootScope) { $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(); } }); }) .controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) { document.addEventListener("deviceready", function () { $scope.network = $cordovaNetwork.getNetwork(); $scope.isOnline = $cordovaNetwork.isOnline(); $scope.$apply(); // listen for Online event $rootScope.$on('$cordovaNetwork:online', function(event, networkState){ $scope.isOnline = true; $scope.network = $cordovaNetwork.getNetwork(); $scope.$apply(); }) // listen for Offline event $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){ console.log("got offline"); $scope.isOnline = false; $scope.network = $cordovaNetwork.getNetwork(); $scope.$apply(); }) }, false); }); 

In the index.html file inside the ion-content tag, paste the following content:

 <div class="card"> <div class="item item-text-wrap"> <h1>Network: {{network}}</h1> </div> </div> <div class="card"> <div class="item item-text-wrap"> <ion-toggle ng-model="isOnline" ng-checked="item.checked"> <h1 ng-show="isOnline">I'm online</h1> <h1 ng-show="! isOnline">I'm offline</h1> </ion-toggle> </div> </div> 

We mainly show the contents of a network variable (which is bound to $ scope through the controller) here. In addition, with the help of a component that displays ions, we display notifications "Im online" / "Im offline".

For reference only, the contents of the entire index.html file should look like this:

  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/ngCordova/dist/ng-cordova.min.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app js --> <script src="js/app.js"></script> </head> <body ng-app="starter" ng-controller="MyCtrl"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content padding="true"> <div class="card"> <div class="item item-text-wrap"> <h1>Network: {{network}}</h1> </div> </div> <div class="card"> <div class="item item-text-wrap"> <ion-toggle ng-model="isOnline" ng-checked="item.checked"> <h1 ng-show="isOnline">I'm online</h1> <h1 ng-show="! isOnline">I'm offline</h1> </ion-toggle> </div> </div> </ion-content> </ion-pane> </body> </html> 

To test this application, you must run it on your device (because you cannot disconnect the network in the iOS simulator). If you have an Android device connected to your computer (and all the SDKs in place), you can run the following commands to launch your application on an Android device:

 ionic build android && ionic run android 

Answer 3

just use this code in app.js inside .run

 if (window.Connection) { if (navigator.connection.type == Connection.NONE) { toast.show("Internet is disconnected on your device"); }; }; 

Answer 4

If you recently upgraded ( running cordova 5.0 ), I would suggest that you need to install cordova-plugin-whitelist . After installation, add this to config.xml to allow all http / s requests:

 allow-intent href="http://\*/\*" allow-intent href="https://\*/\*" 

Shell:

 ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git 

Config.xml:

 <allow-navigation href="*" /> 

Answer 5

Before you call the "connection", you need to check the device:

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