07 - Work with the Device in Phonegap

Introduction

When you start building real time apps, you might need to know more about the device on which the app is running. For example, you might require the name of the device or the unique number of the device (UUID) and so on. Moreover, status of the network connectivity is very much required in the mobile environment. Mobiles have limited storage capacity and most of the data is stored off the device. So, mobile apps need to contact the server frequently to fetch or store the required data. In such cases, mobile apps would have to ensure that network connectivity is available. Luckily, PhoneGap offers methods to collect information about the device as well as the network connectivity.

Get Information about the Device and Network Connectivity

PhoneGap provides an object named device which holds all the required information about the device. You can get different information about the device using different properties it offer. You can get the name of the device using name property, the version of the PhoneGap running on the device using phonegap property, the platform using platform property, the unique number of the device using uuid property and the version of the operating system using version property.

Mobile app developers also might have to check frequently whether the network is present. PhoneGap includes a Connection object that holds information about the device’s connection. The navigator.network interface includes this object. The connection object offers a property named type which returns information about the active network connection. The type property returns one of the following values (constants):

Connection.UNKNOWN (Connection is unknown)

Connection.ETHERNET (Ethernet connection)

Connection.WIFI (WiFi connection)

Connection.CELL_2G (2G connection)

Connection.CELL_3G (3G connection)

Connection.CELL_4G (4G connection)

Connection.NONE (No connection)

So, you can decide the type of the connection based on the value returned by navigator.network.connection.type.

Create an App to Know more about the Device and Network Connectivity

Let’s create a mobile app for iOS platform this time. So, first open the terminal window and point to the ios/bin folder by entering the following command:

cd /Users/apple/Documents/MobileAppDevelopment/phonegap-2.9.0/lib/ios/bin (Make sure that path to your PhoneGap folder is specified correctly)

Enter the following command to create a project named AndroidMultiScreens on the desktop.

./create /Users/apple/Desktop/iOSDeviceInfo com.learn.iOSDeviceInfo iOSDeviceInfo

Once the project is created on the desktop, open the folder and double click the iOSDeviceInfo.xcodeproj icon to launch the project. Now the project is opened in the XCode environment. Again go back to the project folder on the desktop, open the index.html file inside the www folder using your favourite text editor.

Now clean up the index.html file by removing the long comment, removing the line that links to the style sheet, moving the line that links to the cordova.js file from <body> section to the <head> section and removing everything else inside the <body> tag. You can also change the title to make it more relevant.

Add the following line inside the <body> tag.

<div id="result"></div>

Add the following lines of code inside the <head> section:

<script>
    window.onload = function()
    {
        document.addEventListener("deviceready", init, false);
    }
    function init()
    {
        var output = "Device Name: " + device.name + "<br />" +
                     "PhoneGap Version: " + device.phonegap + "<br />" +
                     "Device Platform: " + device.platform + "<br />" +
                     "Device UUID: " + device.uuid + "<br />" +
                     "Operating System Version: " + device.version;
        document.getElementById("result").innerHTML = output;
    }
 </script>

Here, we have collected all the required information in a variable named output and displayed that value within our div element.

Save the index.html file and run the project from the XCode environment. You can select any simulator you want. You might get a screen like this:

device.png

We are not getting correct information for the first two items because we are not running this app on a real device, but only on a simulator. I have just hidden the UUID value which you will be able to see clearly when you run the project.

The device name is a name set for the device by the manufacturer. The device platform is the operating system of the device such as Android, Blackberry, iOS etc. The UUID is also set by the device manufacturer.

Next, let us try to get information about the network. Add the following lines of code just above the line document.getElementById("result").innerHTML = output; (within the init method).

var networkAccess = navigator.network.connection.type;
var disp;
switch (networkAccess)
{
    case Connection.UNKNOWN:
        disp = "Unknown connection";
        break;
    case Connection.ETHERNET:
        disp = "Ethernet connection";
        break;
    case Connection.WIFI:
        disp = "WiFi connection";
        break;
    case Connection.CELL_2G:
        disp = "Cell 2G connection";
        break;
    case Connection.CELL_3G:
        disp = "Cell 3G connection";
        break;
    case Connection.CELL_4G:
        disp = "Cell 4G connection";
        break;
    case Connection.NONE:
        disp = "No network connection";
        break;
    default:
        disp = "Some error!!!"
        break;
}

Here we have used switch case statement to store friendly display messages based on the type of the network connection. At the end of the above lines of code, we will have the information to be displayed in the disp variable. So, modify the line that displays the output as follows:

document.getElementById("result").innerHTML = output + "<br />" + "Network connection: " + disp;

(Previously it was document.getElementById("result").innerHTML = output;)

Now save the index.html file and then run the application from the XCode environment. If you are not connected to any network, then you might get an output like this:

network1.png

I run the app again after connecting to my WiFi network and I got the following output.

network2.png

Summary

In this tutorial, we have created an app that collects information about the device and network connectivity and displays it to the user. You might need this kind of information in many situations to make your app more user-friendly and effective.

Like us on Facebook