How to retrieve network (internet connection) information in a Cordova application

If you're working on a complex app (mobile app or even webapp), where data consumption by the user is required, to know the connection type is very important. Mainly to know if you should provide a rich experience or a bandwidth efficient experience according to the resources of your user.

Till the date, for the HTML5 standards, there's an available API for the newest browsers named the Network Information API. Pitifully, this API isn't available in all browsers and in Cordova, it doesn't even exists. To get information about the network connection of the user, we are going to use the Cordova Network Information Plugin.

Requirements

As mentioned previously, to know the status of the internet connection in a device with cordova we are going to use the Cordova Network Information Plugin. This plugin provides an implementation of an old version of the Network Information API. It provides information about the device's cellular and wifi connection, and whether the device has an internet connection.

To install the Cordova Network Information plugin, execute the following command in your terminal:

cordova plugin add cordova-plugin-network-information

After the installation, the navigator.connection object will be available in the document. If you want more information about the plugin, visit the oficial Github repository here.

Using the plugin

As mentioned previously, the plugin will load the connection object in the navigator object in the window. Besides, a constant named Connection (an object) will be exposed in your document and it has the following structure:

{  
   "UNKNOWN":"unknown",
   "ETHERNET":"ethernet",
   "WIFI":"wifi",
   "CELL_2G":"2g",
   "CELL_3G":"3g",
   "CELL_4G":"4g",
   "CELL":"cellular",
   "NONE":"none"
}

Now, the navigator.connection object only has 1 property, this property is type. Until Cordova 2.3.0, the Connection object was accessed via navigator.network.connection, after which it was changed to navigator.connection to match the W3C specification. It's still available at its original location, but is deprecated and will eventually be removed.

With this information in mind, you can figure out the current connection of the device creating your own methods, for example:

/**
 * Retrieve the type of internet connection of the device
 * @return {String} The status or undefined if the plugin isn't installed
 */
function getConnectionInfo() {
    // Verify if the plugin is installed
    if(typeof(Connection) == "undefined" || typeof(navigator.connection) == "undefined"){
        return "Plugin not installed";
    }
    
    var networkState = navigator.connection.type;
    var states = {};
    
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.CELL]     = 'Cell generic connection';
    states[Connection.NONE]     = 'No network connection';

    return states[networkState];
}

Then just execute the method:

alert("The current connection is : " + getConnectionInfo());

Pretty easy right ? Now, optimize your code to provide an awesome user experience for those users with a 2G connection in the countryside !

Curiosities

Although the Network Information API is available on the newest browsers versions, it isn't available in Cordova, therefore we need to use a plugin for it. Although knowing the type of connection doesn't really give you all the information you may probably need to calculate weird things as speed or other status, it can be prety useful to make a decision of what content to send from the server to the device based on the internet connection (based on assumptions), to warn the user about huge downloads even though he's using a 3G connection etc.

Happy coding !