How to Get the Device Information in PhoneGap

Introduction

In this article I will discuss device information in Apache Cordova. The device object describes the device's hardware and software information. Their are many properties of devices. I will explain all of them in this article.

Device.name

It is used to get the name of the device's model or the product. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango), Bada 1.2 & 2.x and webOS. The syntax for using this is:

var string = device.name;

Device.cordova

It is used to get the version of Cordova that is running on the device. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x. The syntax for using this is:

var string = device.cordova;

Device.platform

It is used to get the operating system name of the device. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango), Bada 1.2 & 2.x and webOS. The syntax for using this is:

var string = device.platform;

Device.uuid

It is used to get the UUID (Universally Unique Identifier) of the device. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x and webOS. The syntax for using this is:

var string = device.uuid;

Device.version

It is used to get the version of the operating system. The supported platforms are Android, BlakBerry Webworks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango), Bada 1.2 & 2.x and webOS. The syntax for using this is:

var string = device.version;

Example

In order to work with it use the following steps:

Step 1 : Open Visual Studio and press File -> New -> Project:

Step 2 : A dialog box is shown; from this select Silverlight for Window Phone inside the Visual C# and select the CordovaStarter and click ok after giving the name and location:

Step 3 : Inside the www folder in the Solution Explorer select the index.html file:

Step 4: Write the following code in the index.html:

<!DOCTYPE html>

<html>

<head>

<title>Device Information Example</title>

// Cordova is loading.....

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

// Now the Cordova is ready

function onDeviceReady()

{

var element = document.getElementById('deviceProperties');

element.innerHTML = 'Device Name: ' + device.name + '<br />' +'<br/>'+

'Device Cordova: ' + device.cordova + '<br />' + '<br/>' +

'Device Platform: ' + device.platform + '<br />' + '<br/>' +

'Device UUID: ' + device.uuid + '<br />' + '<br/>' +

'Device Version: ' + device.version + '<br />' + '<br/>';

}

</script>

</head>

<body>

<p id="deviceProperties">Loading device properties...</p>

</body>

</html>

Step 5 : Now Run the application by pressing F5.

First, the Emulator is loaded, like this:

Then the device information is displayed like this:

Summary : In this article I discussed how we get the device information by using the device object in Apache Cordova.