Ionic: Check Internet Connection using Cordova
Solution 1
I solved a similar issue by using ngcordova . It gives you an angular wrapper around the plugin that implements promises.
Often Cordova plugins aren't ready when you try to call them, using the promise interface you can avoid getting undefined errors.
I stole the example from the ngcordova page on the 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);
});
Solution 2
For anyone new visiting and having problems with getting Armed10's answer working, you may want to check the post I wrote which goes literally step by step telling you where and why you should put some piece of code (may be useful if you're just starting with Ionic): http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/.
Also, I made the example code available freely on Github: https://github.com/Hitman666/IonicNetworkInfo.
edit: As per StackOverflow's rules, I'm adding the post content here as well:
Step by step on how to make this yourself
Start a new Ionic project by doing:
ionic start IonicNetworkInfo blank
Then, change the directory to the newly created IonicNetworkInfo:
cd IonicNetworkInfo
Install ngCordova with Bower:
bower install ngCordova
If by some chance you don’t have bower installed, you can install it with npm:
npm install bower -g
Open up the www/index.html file in your favorite editor, and add the reference 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 executing the following command in your Terminal/Command prompt (you should do this from the root directory of your app; so, in our case 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 won’t be repeating this anymore; when I say you should run some command from the Terminal/Command prompt that, in this case, means from the root directory of the application):
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 up the www/js/app.js file and add ngCordova to the dependencies list, so that 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 content:
.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 on the deviceready event (because it could be that the device would not have been yet initialized when this code runs) and you get the network information with:
$cordovaNetwork.getNetwork();
The information, about weather you’re connected to the internet is obtained with the following line:
$scope.isOnline = $cordovaNetwork.isOnline();
Then, you register two events $cordovaNetwork:online and $cordovaNetwork:online which trigger when the device gets online/offline. In them you then just update the $scope variables (). Just for reference, the whole content 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>
Basically what we do here is we show the contents of the network variable (which is attached to the $scope via the controller). Also, by using the ion-toggle component we show the “I’m online” / “I’m offline” notifications.
Just for reference, the content of the whole 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's 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>
In order to test this application you should run it on your device (because you can’t disable network in iOS simulator). If you have an Android device plugged to your computer (and all the SDKs in place) you can run the following to commands to get your application running on your Android device:
ionic build android && ionic run android
Solution 3
just use this code in your app.js inside .run
if (window.Connection) {
if (navigator.connection.type == Connection.NONE) {
toast.show("Internet is disconnected on your device");
};
};
Solution 4
Before you call the "connection", you need to check the device:
document.addEventListener("deviceready", function () {
...
});
Solution 5
If you updated recently (running cordova 5.0), my guess would be the cordova-plugin-whitelist
needs to be installed. After installing, 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="*" />
Incpetor
Updated on July 09, 2022Comments
-
Incpetor almost 2 years
I am working on Ionic Framework, and facing issues using the Apache Cordova Network API to detect internet connection in Android App. I have referred this tutorial and also created a demo project, which works fine.
I have followed the below steps. [from the tutorial]
ionic start testApp sidemenu
ionic platform add android
Open
testApp/www/js/app.js
-
Copy paste 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 Cordova Plugin
cordova plugin add org.apache.cordova.network-information
Build
ionic build android
Run
ionic run android
This works fine
Issue
- Copy Paste
www
frommainproject
totestApp
and do steps 6 and 7
I get a alert
Cannot find Window.Connection
After copy pasting the
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
andcontrollers.js
to thetestApp/www/js
directory the whole thing blows up.Any help in debugging is highly appreciated.
Thanks,
Note
I do have
cordova.js
inindex.html
.I have re installed
platforms
andplugins
after copy paste as well. -
Incpetor over 9 yearsHi, thanks for reply, the
$cordovaNetwork.getNetwork()
returns0
instead ofConnection.NONE
and$cordova.isOnline()
returns an error. I'm still stuck with this. -
Admin over 9 yearsDid you follow install instructions carefully and are you running it on a device or AVD? I personally used a test call to my server to see if I have a connection. Since having wifi doesn't mean internet access. Maybe write a call to the server and handle returns to see if you have a connection.
-
Nikola over 8 years@kleopatra: thanks for the reminder. However, is it "allowed" to basically post the full contents of my post here as well? I mean, I have no problem with it, I'm just asking - if so, thanks, and I'll update it shortly.
-
ADyDyka almost 8 yearsUse $rootScope.$on('$cordovaNetwork:offline' and $rootScope.$on('$cordovaNetwork:online' instead your listeners
-
methuselah over 7 yearsHi @Nikola, I am experiencing the same issue but the structure of my code is a bit different. Just wanted to ask how you can implement this as a service/factory. I've included some more detail about my particular issue here: stackoverflow.com/questions/40123495/…. I'm short, I want to create a real-time connection status monitor for my application but apart from setinerval (as seen here: stackoverflow.com/a/40201808), I really have no idea. Please help!
-
methuselah over 7 yearsHow would you implement this in a factory/service?