Cordova Device Plugin Tutorial

Are you thinking about retrieving device information using Cordova (PhoneGap)? You found a solution. I have written a step by step tutorial for using cordova-plugin-device

I will explain how to get device information such as device UUID, model, platform, version. Cordova version using the PhoneGap / Apache Cordova device plugin.

What you’ll learn from this tutorial?

  • What is the device plugin do?
  • How to get device information using the PhoneGap device API?
  • how to create a PhoneGap application for getting device information?

Why the device plugin?

Device API is used to gather specific information about the device such as Cordova version, mobile model, platform information, device unique id (UUID). OS version

What are the properties of the PhoneGap device plugin?

  • device.cordova returns cordova version
  • device.model returns device model (E.g HTC 132)
  • device.platform platform information (E.g Android)
  • device.uuid returns phone unique id (1sd341sdr1)
  • device.version App version

How to get device information using PhoneGap device plugin?

Create a new Cordova project & change your working directory

cordova create DeviceInfo com.codesundar.deviceinfo DeviceInfo
cd DeviceInfocordova platform <span class="hljs-keyword">add</span><span class="bash"> android
</span>cordova platform <span class="hljs-keyword">add</span><span class="bash"> ios</span>

Now add plugin for device plugin

cordova plugin <span class="hljs-keyword">add</span><span class="bash"> cordova-plugin-device</span>

Now Change your index.html code

    <span class="hljs-meta"><!DOCTYPE html></span>
    <span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>

    <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Document<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cordova.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
            <span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">"deviceready"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                <span class="hljs-keyword">var</span> deviceinfo = <span class="hljs-string">"cordova:"</span> + device.cordova + <span class="hljs-string">"<br>Model:"</span> + device.model + <span class="hljs-string">"<br>UUID:"</span> + device.uuid + <span class="hljs-string">"<br>Platform:"</span> + device.platform + <span class="hljs-string">"("</span> + device.version + <span class="hljs-string">")"</span>;
                <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"deviceInfoText"</span>).innerHTML = deviceinfo;
            }, <span class="hljs-literal">false</span>);
        </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">head</span>></span>

    <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"deviceInfoText"</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">body</span>></span>

    <span class="hljs-tag"></<span class="hljs-name">html</span>></span>