How to Check Network Connection in IonicFramework

on


When we working with mobile application, which heavy use of internet. We need to check internet working on startup of application or need to check internet after some interval.

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. 

Use ngCordova $cordovaNetwork plugin – This plugin also provide information about devices cellular and Wi-Fi information.
We have two events where we can check internet

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

  OR  

$ionicPlatform.ready(function() {
});

Use connection object – This plugin only work when you added “org.apache.cordova.network-information” plugin into you project.
 


For add “org.apache.cordova.network-information” plugin into you project run this command into main root of your project.
C:\MyIonicProject1>cordova plugin add org.apache.cordova.network-information

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

connection object example - 
index.html

?
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>

app.js

?
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

Comments

Post a Comment