Cordova Device Info Plugin

Sometimes your app needs to know something about the device it's running on — which OS, which version, which model — so it can adjust its behavior, log useful debugging context, or simply satisfy curiosity in a settings screen. The Device plugin, cordova-plugin-device, is one of the simplest core plugins: it exposes a single read-only device object with a handful of properties, no callbacks or async calls required to read them.

Installing the Plugin

cordova plugin add cordova-plugin-device

The Global device Object

As covered in the earlier lesson on the deviceready event, plugin JavaScript APIs only attach themselves to the global scope once Cordova's native bridge has finished initializing. The Device plugin is a perfect example of why that matters: reading device.platform before deviceready fires will fail, because the device object simply doesn't exist yet.

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

function onDeviceReady() {
    // Safe here: the "device" global now exists
    console.log('Running on: ' + device.platform + ' ' + device.version);
}

Key Properties Reference

Practical Use Cases

Reading device info is rarely the end goal by itself — here's where it typically gets used:

• Platform-specific UI: showing an iOS-style back button on iOS and a Material-style one on Android, based on device.platform
• Bug report context: attaching device.platform, device.version, and device.model to error logs or support tickets, so you know exactly what environment a bug happened in
• Feature detection over platform assumption: prefer checking whether a specific plugin API exists before calling it, rather than branching purely on device.platform === 'iOS' — OS versions and plugin capabilities both change over time, and a capability check is more future-proof than a platform string comparison

Full Example: A Device Info Panel

This example reads every core property from device as soon as the app starts and renders them into a simple info panel — a pattern useful for an app's "About" or debug screen:

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

function onDeviceReady() {
    var info = 'Platform: ' + device.platform + '<br>' +
               'Version: ' + device.version + '<br>' +
               'Model: ' + device.model + '<br>' +
               'Manufacturer: ' + device.manufacturer + '<br>' +
               'UUID: ' + device.uuid;

    document.getElementById('deviceInfoPanel').innerHTML = info;
}

With a matching container in your HTML:

<div id="deviceInfoPanel" class="info-panel"></div>

Related Plugins for Motion and Orientation

The Device plugin covers static information about the device itself, but two related core plugins cover the device's motion sensors instead, if your app ever needs them:

Both are worth knowing exist, though this track doesn't cover them in depth — their APIs follow the same success/error callback pattern you've already seen with the Camera and Geolocation plugins, so picking them up later should feel familiar.