I can’t believe, but this is a heavily requested feature so let me show you how you can retrieve this data without external services. This article will be written from the perspective of Ionic Framework, but this code can be used on it own. I’m using Ionic Framework just to provide a UI.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)
 

Introduction

We’re going to use this plugin:
 
NetworkInterface Plugin
 
 
I checked the Java portion of the code, and I can safely say it’s not using external services.
 

Installation

Create a new project:
 
ionic start IonicIpFindDemo blank
cd IonicIpFindDemo
 
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
 
Let’s install NetworkInterface plugin:
 
cordova plugin add cordova-plugin-networkinterface
 
If you’re using Cordova 4+ and especially if you’re accessing remote images don’t forget to install Cordova Whitelist plugin:
 
cordova plugin add cordova-plugin-whitelist
 
And add this security meta tag to your index.html file:
 
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
 
Last but not least, add an appropriate platform:
 
ionic platform add android
 
For MacOS users, do it like this:
 
ionic platform add ios
 

Preparation

This is a pretty simple plugin, all you need to do to use it is this:
 
networkinterface.getIPAddress(function (ip) { 
    alert(ip); 
});
 

Code

This is going to be our example:
 

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">		
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
        <title></title>
         
        <link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
        <link href="css/style.css" rel="stylesheet"/>
         
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
         
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>
         
        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
         
        <ion-pane>
            <ion-content ng-controller="MainCtrl" padding="true">
                <button class="button button-full button-positive " ng-click="findDeviceIP()">Find Device IP</button>
            </ion-content>
        </ion-pane>
         
    </body>
</html>
 
Continue to the next page

  • Umar

    Hey does this work over cellular connection?

    • I don’ think so but you can try it on your own, just test this example.

      • Umar

        Thanks man. Will give it a go.

  • Tejaswi Rana

    The problem is you can’t use this while testing in the browser.

    • This plugin does not support desktop browsers

  • Ravikumar

    Hi All,
    I tried the above plugin. It worked well for phones with Wifi but it is not working with cellular data. The error is ” No valid IP address identified”.

    If anyone faced this error, Please reply.