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 –

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

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

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-

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-

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

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