Cordova Network Information

A hybrid app depends on the WebView's network stack for every AJAX call, image load, and API request your JavaScript makes — which means a dropped or flaky connection can silently break parts of your app in ways a purely native app might handle more gracefully. The Network Information plugin, cordova-plugin-network-information, lets you detect the current connection type and react the moment connectivity changes, so you can build a UI that degrades gracefully instead of just hanging or failing silently.

Installing the Plugin

cordova plugin add cordova-plugin-network-information

Once installed, a global navigator.connection object becomes available after deviceready fires, alongside the standard online/offline browser events.

Checking the Current Connection Type

navigator.connection.type tells you, synchronously, what kind of connection the device currently has:

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    var networkState = navigator.connection.type;
    console.log('Connection type: ' + networkState);
}

Possible Connection Type Values

These constants are also available on Connection.WIFI, Connection.CELL_4G, Connection.NONE, and so on, so you can compare against them by name rather than a raw string:

if (navigator.connection.type === Connection.NONE) {
    console.log('No network connection available');
}

Listening for Connectivity Changes

Rather than polling navigator.connection.type repeatedly, listen for the standard online and offline events. Cordova fires these on the document whenever connectivity is lost or restored:

document.addEventListener('offline', onOffline, false);
document.addEventListener('online', onOnline, false);

function onOffline() {
    console.log('Connection lost');
}

function onOnline() {
    console.log('Connection restored');
}

Full Example: An "You're Offline" Banner

This example shows a persistent banner at the top of the app the moment connectivity drops, and hides it again the instant connectivity is restored — a simple, honest way to tell users why something in your app might not be working right now:

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    document.addEventListener('offline', showOfflineBanner, false);
    document.addEventListener('online', hideOfflineBanner, false);

    // Also check the state right away, in case the app launched already offline
    if (navigator.connection.type === Connection.NONE) {
        showOfflineBanner();
    }
}

function showOfflineBanner() {
    document.getElementById('offlineBanner').style.display = 'block';
}

function hideOfflineBanner() {
    document.getElementById('offlineBanner').style.display = 'none';
}

With a matching, initially hidden banner element in your HTML:

<div id="offlineBanner" style="display:none; background:#c62828; color:#fff; padding:8px; text-align:center;">
    You're offline. Some features may not work.
</div>

Why This Matters Specifically for a Hybrid App

In a fully native app, the OS and platform SDKs often surface network errors with built-in retry logic or system-level connectivity banners. In a Cordova app, every network-dependent call — an AJAX request to your backend, a remote image, a font loaded from a CDN — is just a regular web request made from inside the WebView, and a lost connection makes it fail exactly like it would fail in a desktop browser: silently, unless your code explicitly checks for and communicates the failure. Designing a graceful offline experience isn't optional polish for a Cordova app — it's a core part of making the app feel reliable at all.

Pairing with Local Storage

A connectivity banner alone only tells the user what's wrong — it doesn't let them keep doing anything. Combining network detection with locally cached data (using localStorage or a similar on-device store, covered in the upcoming Local Storage & Persistence lesson) lets your app show the last-known data while offline and only disable the specific actions that truly require a live connection, rather than blocking the entire app.