Mixing Local Notifications and Background Geolocation in Ionic

This tutorial focuses on showing the power of Ionic’s Background Mode. If you follow me on Twitter, you already know that I’m a Pokemon Go addict player and … this game like many other mobile applications lack some crucial background features forcing us to keep the application open and draining our battery to death.

Running some code in the background of a mobile application is simple (at least with Ionic). In this tutorial we are going to create an application that notifies the player when a legendary Pokemon is nearby.

Plugins

We start by creating a new Ionic project:

And adding the Ionic and Cordova plugins we will need:

  • Geolocation:
  • Local Notifications:
  • Geolocation:

Followed by setting up the plugins in the app.module.ts file:

Nothing fancy here, just importing the plugins and adding them to Angular’s providers array.

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Background Mode Activation

From there, it’s all in the home.ts file.

The first goal is to make a simple log when the background mode is activated:

The Platform and BackgroundMode Services are imported then injected.
Once the device is ready, we are ready to roll.
The backgroundMode object has multiple event listeners, we only care about one: activate.
By passing a string to the on method, the backgroundMode service will listen to this type of event (activate) and we subscribe to react to this specific event.
The final touch: the enable method will enable the background mode in the application.

Result:

ionic background mode log

Great! The first milestone is cleared and our code is running even when the phone is locked (which is quite a battery saving mode isn’t it Niantic?).

Our next goal: showing a local notification.

Test Notification

Some more code added to our dear home.ts file:

The LocalNotification Service is imported and stocked in a localNotifications property. We will only have one notification so a notificationAlreadyReceived property will be used as a flag.

When the background mode is activated, if we haven’t yet received a notification, the showNotification custom method will be used, which is this one:

Simply using the schedule method from the localNotifications object we injected earlier and changing the flag’s value so the notification is only triggered once.

Result:

ionic background mode notification

The last step: recognizing when the player is close to a Legendary Pokemon.
This is generally handled by a server using the player’s position, however, let’s not complicate things and just trigger this event when the player moves a certain distance.

Geolocation and Maths

We start by adding some new properties:

originalCoords where the starting coords will be stocked and DISTANCE_TO_MOVE which is our threshold, since we are in test mode, 0.003 km is good enough.

The Geolocation Service is then used for the first time:

The originalCoords property now contains our starting position.

The code inside the activate callback is updated:

Instead of directly showing the notification, we start with tracking the player’s position by  triggering a new custom trackPosition method every two seconds:

A very simple method, all we do is acquiring the new position through the geolocation service’s getCurrentPosition method and passing the coords to another method:  handleMovement.

The distance between the starting and the current position is calculated by another custom method: getDistanceFromLatLonInKm (more on that later).

If the player moves enough and never received the notification: one is shown.

The distance calculation is a copy paste from the internet (aka the Haversine formula). You can analyze it if you like maths, otherwise, just copy paste those two methods:

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

Why the **** do I have to keep my game open to hatch my Pokemon Go eggs?
Seriously guys, if some of your features can work in the background, just do it.
If you have to choose between one application that allows you to save some battery while using other apps and one that forces you to stay on the main screen, which one would you uninstall?

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

4 Shares