---
title: "Cordova - Network Information"  
description: "This plugin provides information about device's network.Step 1 - Install Network Information PluginOpen command prompt window and run the following co"  
author: "Anonymous User"  
published: 2017-05-02  
updated: 2018-03-19  
canonical: https://www.mindstick.com/blog/11370/cordova-network-information  
category: "apache cordova"  
tags: ["mobile development", "apache", "cordova"]  
reading_time: 2 minutes  

---

# Cordova - Network Information

This plugin provides information about device's network.

**Step 1 - [Install](https://www.mindstick.com/articles/12876/the-top-5-reasons-to-buy-and-install-a-tonneau-cover) Network Information Plugin**

Open **[command prompt](https://answers.mindstick.com/qa/51716/how-to-make-bootable-pendrive-using-cmd-windows-command-prompt) window** and run the following code to install this plugin:

```
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-network-information
```

## Step 2 - Adding Buttons

We will add one button in index.html file that will fetch info about the network.

```
<button id = "netInfo">INFO</button>
```

**Step 3 - Adding [Event Listeners](https://www.mindstick.com/forum/159117/how-do-you-handle-events-using-jquery-and-attach-event-listeners-to-elements)**\

In **index.js** file, we have to add three event listeners inside onDeviceReady [function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server). The first will act on clicks on the INFO button and the other two will act to the changes in connection status.

```
document.getElementById("netInfo").addEventListener("click", netInfo);
document.addEventListener("offline", Offlineon, false);
document.addEventListener("online", Onlineon, false);
```

**Step 4 - Create [Functions](https://www.mindstick.com/forum/160140/explain-the-role-of-functions-as-a-service-faas-in-serverless-computing)**\

When INFO [button is clicked](https://www.mindstick.com/forum/157821/write-a-jquery-code-that-selects-all-the-checkboxes-in-a-form-when-a-select-all-button-is-clicked), **netInfo**() function will return information about current [network connection](https://answers.mindstick.com/qa/94984/how-do-you-change-the-network-connection-priority-in-windows-10). We are calling type method. The other functions are Offlineon and Onlineon. These functions are working to the network connection changes or any change will display the corresponding alert message.

```
function netInfo() {
   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';
   alert('Connection type: ' + states[networkState]);
}
function Offlineon () {
   alert('You are now offline!');
}
function Onlineon () {
   alert('You are now online!');
}
```

When we start the app [connected](https://www.mindstick.com/articles/12941/link-building-and-search-engine-rankings-how-are-they-connected) to the network, **onOnline** function will trigger alert.

\

![Cordova - Network Information](https://www.mindstick.com/blogs/8a90f82b-14d3-4d83-97f9-0e3f21aa5e7d/images/dee91b2b-4d9a-4e29-a3d5-13599c525d20.png)\

\

If we press **INFO** button the alert will show our network state.

\

![Cordova - Network Information](https://www.mindstick.com/blogs/8a90f82b-14d3-4d83-97f9-0e3f21aa5e7d/images/394cc7bc-3f92-47a3-8e1b-29f79d620fe8.png)\

\

If we disconnect from the network, **onOffline** function will be called.

\

![Cordova - Network Information](https://www.mindstick.com/blogs/8a90f82b-14d3-4d83-97f9-0e3f21aa5e7d/images/90045abd-4f53-4364-a838-9036c9fae203.png)\

---

Original Source: https://www.mindstick.com/blog/11370/cordova-network-information

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
