Check Network Connection With IonicFramework

by - May 31, 2016

When creating a mobile app, specifically one that makes heavy use of the internet, it is often necessary to make sure an internet connection exists at launch and possibly display a message or perform an action if one does not exist.

The following is for an Ionic Framework 1 application. If you’re using Ionic 2, you will want to check here.

The following chunk of example code is typically found in your IonicFramework project’s js/app.js file. It demonstrates how to check if a network connection exists on application load and how to display an Ionic popup that is nicely styled in comparison to a JavaScript alert dialog.


    var myApp = angular.module('myapp', ['ionic'])
        .run(function($ionicPlatform, $ionicPopup) {
            $ionicPlatform.ready(function() {
                if(window.Connection) {
                    if(navigator.connection.type == Connection.NONE) {
                            title: "Internet Disconnected",
                            content: "The internet is disconnected on your device."
                        .then(function(result) {
                            if(!result) {

In the above example, we first check if the Connection object exists in the window. When viewing your project from a web browser Connection doesn’t exist so calling Connection.NONE would only result in a JavaScript error.

The Cordova documentation gives us the following available options in addition to Connection.NONE

Value 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

This plugin can be added to your project with the following:

Add Apache Cordova Network Information PluginShell
    cordova plugin add

The Ionic popup that shows upon no internet connection will have two buttons. If the negative or cancel button is pressed then the application will exit. No action has been specified for a positive or ok response. It is worth noting that a network connection check can only be done from the device, not a web browser.

You May Also Like