March 20, 2016

Detect Internet connection in Ionic Framework

Detect Internet connection in Ionic Framework : For internet based application it is very important to check internet connection. For checking internet connection we need network information cordova plugin. Here in this tutorial we are going to explain the how to detect the internet connection in ionic framework. Let us go step by step.

Detect Internet connection in Ionic Framework

Steps to detect internet connection in Ionic Framework-

1 . Install Network Information Cordova Plugin

First Install the Network Information Cordova Plugin. Run the following command to install the network information plugin –

Install Network Information Cordova Plugin Example-

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

After Running this command cordova network plugin will be installed.

After the successful installation of network cordova plugin let us check internet connection using the below code-

Ionic Check Internet Connection : JavaScript

Install Network Information Cordova Plugin Example-

<script type="text/javascript">
angular.module('myApp', ['ionic'])
.run(function($ionicPlatform, $ionicPopup) {
  $ionicPlatform.ready(function() {
    if(window.Connection) {
      if(navigator.connection.type == Connection.NONE) {
        $ionicPopup.confirm({
          title: 'Internet Connection Error',
          content: 'Sorry, No Internet Connection Found.'
        })
        .then(function(result) {
          if(!result) {
            ionic.Platform.exitApp();
          }
        });
      }
    }

  });
})
</script>

The above example will detect the internet connection and popup a message if connection is not available.

Supported Platforms –

The network cordova plugin supports in the following devices –

Amazon Fire OS
Android
BlackBerry 10
Browser
iOS
Windows Phone 7 and 8
Tizen
Windows
Firefox OS

Constants –

You can use the following constants to check the connection. Constants available are as below –

Connection.UNKNOWN – Unknown connection
Connection.ETHERNET – Ethernet connection
Connection.WIFI – Wi-Fi Connection
Connection.CELL_2G – Cell 2G Connection
Connection.CELL_3G – Cell 3G Connection
Connection.CELL_4G – Cell 4g Connection
Connection.CELL – Cell Generic Connection
Connection.NONE – No Network Connection

More Examples

Let us have more detail about cordova network plugin.

Network Related Events In Cordova Plugin – Ionic (Check Offline)

This is used to detect the already connected device. It is fired when already connected device goes offline-

Check offline in ionic framework Example:

document.addEventListener("offline", onOffline, false);

function onOffline() {
    // do stuff when offline 
}

Network Related Events In Cordova Plugin – Ionic (Check Online)

This is used to detect when device is connected to internet-

Check online in ionic framework Example:

document.addEventListener("online", online, false);

function online() {
    // do stuff when online 
}

Detect Internet connection in Ionic Framework