How to Push Geofence Notifications using HMS Push and Location Plugins in React Native?
Introduction
In this article, I’ll elucidate how to receive geofence notifications using HMS push and location plugins in a React Native app.
A geofence is a circular area with the center located at a specified latitude and longitude. Geofencing events occur when specified criteria are satisfied. There are three geofencing criteria. Namely, enter, leave and stay (dwell). The enter criterion is satisfied when the user enters into the geofence. The exit criterion is satisfied when the user leaves from the geofence. The stay criterion is satisfied when the user stays in the geofence for a predefined time.
Geofence Notifications are the notifications pushed when a geofencing event, defined in Huawei developer console -> Geofence Management, is satisfied.
Instructions
In order to push a geofence notification you need to determine a device token for your device. The device token is used to identify your device by the HMS push server. You may obtain the token by using React Native HMS push plugin. Additionally, some location permissions are needed to be granted for the app by using React Native HMS Location plugin.
Obtaining a Device Token
Follow the instructions in the tutorial to integrate the React Native HMS push plugin. Then, call HmsPushInstanceId.getToken to obtain the token. The token is encapsulated in the resolved JS object with the field “result”.
Granting the Necessary Permissions
Some location permissions are needed to be granted for the app. Declare the following permissions in AndroidManifest.xml file of your app, under the Manifest tag.
If the API level of your device is above 28, declare the additional permission.
The declared location permissions should be granted by the user to take effect. To request the permissions, use React Native HMS location plugin. You may find the integration instructions in this tutorial.
Once the plugin is integrated, you can check if the permissions are already granted by using HMSLocation.FusedLocation.Native.hasPermission, if not granted, request the permissions by HMSLocation.FusedLocation.Native.requestPermission.
Obtaining Data From a Pushed Geofence Notification
A pushed notification from Huawei push server may contain data as payload. To retrieve the data use HmsPushEvent.onNotificationOpenedApp, which is a callback triggered when a pushed notification opens the app. The callback resolves a JS object which encapsulates properties of the clicked notification, including the payload. You may access the payload data by the “extras” property of the resolved object.
If the application is in terminated state when the notification is clicked, onNotificationApp callback will only work when it is registered in index.js file of the application.
Pushing a Geofence Notification
Creating a Geofence
To push a geofence notification, create a cloud geofence from Huawei developer console -> My Projects -> <your_app> -> Geofence Management -> Groups -> New.
Multiple geofences can be added to the created geofence group. Once you created one, click on the Geofences -> New to create a geofence to be added to the group. Click submit after setting in the geofence parameters to create the geofence.
Creating a Geofence Push Task
Go to Huawei developer console -> My Projects -> <your_app> -> Grow -> Push Kit -> Automated Notifications -> New Geofence Push Task, and configure the geofence notification by following the instructions :
Set the notification content params, you may set the payload in Key-value pair section.
Set Push scope as Specified device, and Device Token as the token you obtained by React Native HMS Push plugin.
Set Group as the geofence group, Push Frequency as the desired geofence push frequency and Pushed Messages as limit number of push messages.
Set Time Zone as the time zone of the interest, Starts Time as the task start time after which the task will take effect and Ends Time as the expiry date of the task. Note that, the starts time must not be a past time, or you may get Invalid parameters error when the task is submitted.
Submit the task by clicking on the submit button. The app will receive the notification after a geofencing event is occurred. Note that the notifications are not pushed in real time.
Conclusion
In this article, I’ve explained how to push Geofence Notifications from Huawei Push server and how to receive it by a React Native app. You may leave your questions in the comments section.
References
