Sending Push Notifications on React Native With Huawei Push Kit Plugin — Part 1
Introduction
Hello Everyone,
In this article, We will look at the Sending Push Notifications with the React Native Push kit. We will talk about HUAWEI Push Kit and React Native demo to send push notifications.
HUAWEI Push Kit is a messaging service provided for you to establish a messaging channel from the cloud to devices. By integrating Push Kit, you can send messages to your apps on user devices in real time
High reliability
Push messages in real time, even when your app isn’t running.
Instant reach
Reaches users without delay, thanks to high-concurrency message processing capabilities.
Global coverage
Serves 200+ countries and regions.
Easy integration
Needs just half a day for integrating client-side sample code thanks to HMS Toolkit and also offers ready-to-use server-side sample code.
Preparing the Development Environment
First of all, we need to make some adjustments in AppGallery Connect so that we can integrate our kit into our application. After the registration process is completed on HUAWEI Developers, we can create a new React Native project, configure and integrate it with the Huawei Push kit.
After all settings are done, we are ready to development now.🥳
In Push Kit Plugin we have to get a token to send push notifications from AppGallery Connect.
To take token we need to implement HmsPushInstanceId module.
After implement the module we are able to use getToken() method.
import {
HmsPushInstanceId,
HmsPushEvent
} from ‘@hmscore/react-native-hms-push’;If the response to a token request is empty or a token changes, an event listener needs to be used to receive the requested or updated token. The event listener for the new tokens is HmsPushEvent.onTokenReceived. Register the listener in the componentDidMount state and unregister the listener in componentWillUnmount.
After setting the listeners, then we should call the getToken() method and then copy the result log from console.
After copy the result we will use the Huawei Consol to send push notification.
Login to Consol with developer account and click on the App Gallery Connect.
Then open the My Projects section and click on the project name created before. If you didn’t create the project yet please follow the link.
Before try to send the push notification please make sure Push Service is enabled from Manage APIs section.
After all settings are done we are ready to send notification. Click the Push Kit section from the left menu and then click the Add Notification button. Finally we are on the final screen.💪🏼
Fill the fields and click on the Test Effect button. After clicked the button a modal will appear, paste your token to the text field and watch your mobile phone:)
Bonus
In this section we will look, how we can get the token automatically.
With the help of auto init feature we are able to get token automatically on initial state. To use that feature we need to implement HmsPushMessaging module or add meta-data to AndroidManifest.xml file. After the implementation register onTokenReceived and onTokenError listeners.
The are two option to activate auto init feature.
import {HmsPushMessaging} from '@hmscore/react-native-hms-push';- Activate Auto Init With
meta-data
- Use HmsPushMessaging.setAutoInitEnabled(true) function with the parameters “true” or “false”.
Conclusion
In this article, we have learnt how to integrate Push kit in React Native and usage for main capabilities.
For more details, you can visit our developer page.
In the next section, we will look sending data message.
