Cordova - Network Information

Cordova - Network Information

The Network Information plugin (cordova-plugin-network-information) provides information about the device’s cellular and Wi-Fi connection. It allows you to determine if the device is connected to a network, the type of connection (e.g., Wi-Fi, 2G, 3G, 4G), and to listen for changes in network status (online/offline).

Step 1 - Installing the Network Information Plugin

To add this plugin to your project, open your terminal or command prompt, navigate to your Cordova project’s root directory, and execute:

your-cordova-project/ cordova plugin add cordova-plugin-network-information

Step 2 - Add UI Elements (Optional)

For demonstration, let’s add a button to check the current network state and a div to display information in index.html:

<body>
    <button id="checkNetworkBtn">Check Network Connection</button>
    <div id="networkStatus">Network status will appear here.</div>
</body>

Step 3 - Add Event Listeners

In your www/js/index.js file, within the onDeviceReady function, you should listen for online and offline events. Also, attach a listener to the button.

// Inside onDeviceReady in www/js/index.js
document.addEventListener('online', onOnline, false);
document.addEventListener('offline', onOffline, false);
document.getElementById('checkNetworkBtn').addEventListener('click', checkNetworkConnection);

Step 4 - Implement Network Functions

Define the callback functions to handle network status changes and to check the connection type.

const networkStatusDisplay = document.getElementById('networkStatus');

function checkNetworkConnection() {
    // navigator.connection.type requires the plugin
    if (typeof navigator.connection === 'undefined' || typeof Connection === 'undefined') {
        networkStatusDisplay.textContent = 'Network Information plugin not available.';
        return;
    }

    const networkState = navigator.connection.type;
    const 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';

    const currentStatus = states[networkState] || 'Connection type not recognized';
    networkStatusDisplay.textContent = 'Connection Type: ' + currentStatus;
    console.log('Connection type: ' + currentStatus);
}

function onOnline() {
    networkStatusDisplay.textContent = 'Device is Online. Checking connection type...';
    // Check connection type once online event fires
    checkNetworkConnection();
    alert('You are now online!'); // Simple notification for demo
}

function onOffline() {
    networkStatusDisplay.textContent = 'Device is Offline.';
    alert('You are now offline!'); // Simple notification for demo
}

// It's good practice to check initial state on device ready
// app.js (onDeviceReady or similar):
// checkNetworkConnection(); // Call this to display initial status

How It Works

When the app starts, if it’s connected to a network, the onOnline function might be triggered (behavior can vary slightly by platform initialization timing). The networkStatus div would show “Device is Online…” followed by the specific connection type like “WiFi connection” after checkNetworkConnection runs.

If you click the “Check Network Connection” button, the checkNetworkConnection function executes and updates the networkStatus div with the current connection type. For example, if connected via WiFi, it might display: “Connection Type: WiFi connection”.

If you disconnect the device from all networks (e.g., turn on airplane mode or disable Wi-Fi/cellular data), the onOffline event will fire, the onOffline function will execute, and the networkStatus div will show “Device is Offline.” An alert saying “You are now offline!” will also appear.

Reconnecting to a network will trigger the onOnline event and its corresponding function.

Practical Applications

• Preventing network requests when offline to avoid errors and provide better UX.
• Notifying users when they go offline or come back online.
• Allowing data synchronization only when on a Wi-Fi connection to save cellular data.
• Adapting app features based on network speed (e.g., loading lower quality images on slower connections like 2G).

Always ensure your app handles offline scenarios gracefully to provide a good user experience.