Ionic 4/5 Geofence Tutorial using Native Plugin

The geofence is an area defined in a geometrical shape which can be a circle or any polygon shape around a coordinate on a Geological map. In google maps, a Geofence is used to know if the current device has entered or exited from a geofence.

Indication about leaving or exiting a Geofence can be shown in the form of notification a user which can have a number of practical applications in day to day life. For example, we can add a location to remind use when we enter that geofence for shopping some important items.

In this article, we will learn How to add Geofence functionality in a Hybrid application like Ionic use this feature. It can work background and keep watch if the current location is in a Geofence or not to give local notification to the user.

Let’s get started!

Install Geofence Native and Cordova Plugins

Run following commands in the Ionic project root to install Geofence Cordova plugin and Angular wrapper for it:

Add in App Module Imports

To use these plugin methods we need to import the Geofence class then add in the providers array:

Using Geofence in the Component

To use Geofence we need to import the Geofence class and also add in class constructor as shown below:

In above code, we are also checking if Geofence is loaded successfully using geofence.initialize() on class load.

Next call the addOrUpdate method  which returns a promise and takes option object which is fence here.



Leave a Reply

Notify of