After getting internet status we can show custom message. It’s very right approach to show customer message to user that internet not working and application working offline or application can’t connect to server etc.
We have two ways to check internet when we developing with Ionic Framework.
Use connection object – The connection object provide information about devices cellular and Wi-Fi information.
For add “org.apache.cordova.network-information” plugin into you project run this command into main root of your project.
| Constants | Description |
| Connection.UNKNOWN | Unknown connection |
| Connection.ETHERNET | Ethernet connection |
| Connection.WIFI | WiFi connection |
| Connection.CELL_2G | Cell 2G connection |
| Connection.CELL_3G | Cell 3G connection |
| Connection.CELL_4G | Cell 4G connection |
| Connection.NONE | No network connection |
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html ng-app="myIonicApp"> <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"> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.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> How to Check Network Connection in IonicFramework. </body></html> |
<!DOCTYPE html>
<html ng-app="myIonicApp">
<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">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.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>
How to Check Network Connection in IonicFramework.
</body>
</html>
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | angular.module('myIonicApp', ['ionic']) .run(function($ionicPlatform, $ionicPopup) { // Before call plugin you must check that device is ready or not, we have two ways to check that device ready. $ionicPlatform.ready(function() { // cordova plugin add org.apache.corova.network-information if (window.Connection) { if (navigator.connection.type == Connection.NONE) { $ionicPopup.confirm({ title: "Internet is not working", content: "Internet is not working on your device." }); } } }); }) |
angular.module('myIonicApp', ['ionic'])
.run(function($ionicPlatform, $ionicPopup) {
// Before call plugin you must check that device is ready or not, we have two ways to check that device ready.
$ionicPlatform.ready(function() {
// cordova plugin add org.apache.corova.network-information
if (window.Connection) {
if (navigator.connection.type == Connection.NONE) {
$ionicPopup.confirm({
title: "Internet is not working",
content: "Internet is not working on your device."
});
}
}
});
}) Note :- Before run program you must disable wifi on your device Video - http://youtu.be/ByTcpgH6oI0
Use ngCordova $cordovaNetwork plugin - We can ngCordova plugin to check intenet avaliable or not. for that we first need to install ngCordova plugin.
$ bower install ngCordova
and then include ngCordova into HTML
<!-- ng-cordova have to be before cordova -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
We have three method to check internet status
$cordovaNetwork.getNetwork() - Check which type of network available
$cordovaNetwork.isOnline() - Check if the phone network is Online
$cordovaNetwork.isOffline() - Check if the phone network is Offline Install ngCordova for your project 
Use ngCordova $cordovaNetwork plugin sample –
index.html
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html><html ng-app="myIonicApp"> <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"> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- ng-cordova have to be before cordova --> <script src="lib/ngCordova/dist/ng-cordova.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> <script src="js/controllers.js"></script> <script src="js/services.js"></script> </head> <body> How to Check Network Connection in IonicFramework. </body></html> |
<!DOCTYPE html>
<html ng-app="myIonicApp">
<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">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- ng-cordova have to be before cordova -->
<script src="lib/ngCordova/dist/ng-cordova.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>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
How to Check Network Connection in IonicFramework.
</body>
</html>
app.js
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | angular.module('myIonicApp', ['ionic', 'ngCordova']).run(function($ionicPlatform, $ionicPopup, $cordovaNetwork) { // Before call plugin you must check that device is ready or not, we have two ways to check that device ready. //document.addEventListener("deviceready", function () { // }, false); // OR with IONIC // $ionicPlatform.ready(function() { // }); $ionicPlatform.ready(function() { if ($cordovaNetwork.isOffline()) { $ionicPopup.confirm({ title: "Internet is not working", content: "Internet is not working on your device." }); } });}); |
angular.module('myIonicApp', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $ionicPopup, $cordovaNetwork) {
// Before call plugin you must check that device is ready or not, we have two ways to check that device ready.
//document.addEventListener("deviceready", function () {
// }, false);
// OR with IONIC
// $ionicPlatform.ready(function() {
// });
$ionicPlatform.ready(function() {
if ($cordovaNetwork.isOffline()) {
$ionicPopup.confirm({
title: "Internet is not working",
content: "Internet is not working on your device."
});
}
});
});
Video – http://youtu.be/aP5E9tsFJao
