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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

Table of Contents

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

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin 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