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.
We start by creating a new Ionic project:
And adding the Ionic and Cordova plugins we will need:
- Local Notifications:
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.
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.
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.
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.
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:
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?