Ionic 3 | Get Background Device Location using Cordova and Ionic Native Geolocation Plugins

Applications these days provide features to get locations like we implemented device location plugin to get location coordinates when a user clicks a button, But what if we want to get location updates after fixed intervals of time. To track location we can’t always keep an application open, In that case, we need to track location when the application is in the background.

In this tutorial, we will create an Ionic 3 application to track Background Geolocation using Cordova plugin and Ionic Native wrapper.

So, let’s begin …

Before we start with application make sure that your system is having updated version of NodeJS installed.

Create a new Ionic Application

Install latest version of Ionic and Cordova CLI.

Now we will create a new blank application

After the application is created, go to the root using the CD command

If your system is having Visual Studio code(VS Code) installed, use  $ code .  command to open the project in VS Code

Install the Cordova and Ionic Native plugins

Background Geolocation

This plugin will use device location service to fetch latitude, longitude, accuracy, altitude, altitudeAccuracy, altitudeAccuracy, heading, speed and start a background service to update location after an interval.

Local Notifications

We are using Local Notification plugin to show location coordinates received from Background Geolocation plugin

Add these plugin in application’s module file

In app.module.ts, import plugin and add in imports array.

In home.html, add following HTML

Here we have two buttons to start and stop background geolocation service.

Update component with methods

Above code is having Background Geolocation configuration object, and methods to start and stop Background location service. On successfully fetching location object we will show Local Notification having data of coordinates, accuracy, speed, time etc.

That’s it you can now test your application in a real device after building apk using this command $ ionic cordova build android 

Let me know if you face any issue in implementing this

Happy coding 🙂

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

10
Leave a Reply

avatar
4 Comment threads
6 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
Nashit Nakadekapil soniAdit BharadwajRaul FloresJolly.exe Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
chetan
Guest
chetan

i am getting error while using given code

Adit Bharadwaj
Member
Adit Bharadwaj

i have solved my previous query i wanted to knw how can we print the coordinates and show them on notification or a div?

kapil soni
Guest
kapil soni

hi team,
I have tried above but not working form me i got plugin not installed error?

Nashit Nakade
Member
Nashit Nakade

plugin not installed error will come if ionic serve connect your phone and run ionic cordova run android –livereload –device

make sure your device is showing in my computer

kapil soni
Guest
kapil soni

not worked for me properly if am in backgound, please give me response if you create any post

Nashit Nakade
Member
Nashit Nakade

to enable background add background plugin