How to Check Network Connection in IonicFramework

avatar
by Virender
July 20, 2015

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


    Tags:

    Share: