A push notification is an automated, clickable popup message sent by an application to its users. The message is immediately delivered to a device when the device is idle or running the app in the background. Push notifications are important because they:
It’s worth noting that the average smartphone user in the US receives 45 push notifications a day! According to RubyGarage, organizations that implement push notifications have 3x higher customer retention and 88% higher engagement than businesses that do not. While there are variations in push notification opt-in and click rates based on industry, location, type, and many other factors, it’s clear that the case for implementing push notifications is strong.
This tutorial provides step-by-step instructions for implementing React Native push notifications. But first, let’s take a look at some prerequisites.
Before diving into the implementation details, let’s talk about FCM messages. There are two types of FCM messages: notification messages and data messages. According to the Firebase documentation, “Notification messages have a predefined set of user-visible keys and an optional data payload of custom key-value pairs.” Data messages contain only user-defined key-value pairs. Sendbird uses data messages, allowing client apps to create the custom message payload consisting of these custom key-value pairs.
Push notifications are not supported for web applications. If you need to implement push notifications for web apps, we recommend using the webhook events to implement push notifications for web applications.
Before you start, ensure that you have access to the Firebase console. Let’s dive in! 💻
The Sendbird server requires an FCM server key for Android and APNs certificate for iOS to deliver the push notifications.
React Native Firebase is the officially recommended collection of packages that brings React Native support to all Firebase services on both Android and iOS apps. Configure FCM for Android and APNs for iOS in your React Native project by following the instructions in the official documentation. By the end of this step, you should have Android and iOS apps added to the Firebase project, and respective config files added to the React Native project.
Refer to the React Native Firebase notifications page to learn more about displaying and handling notifications from FCM.
To send notification messages to a specific client app, FCM requires an FCM registration token for Android devices and an APNs device token for iOS devices, issued by the client app instance. Therefore, the Sendbird server also needs the registration token of every client app instance to send notification requests to FCM on your behalf. The Chat SDK provides an interface to register and unregister these two types of tokens to the Sendbird server.
The below code snippet shows the device token registration.
The registered push token appears in the dashboard under ‘Users > user_id > Chat’:
Once the device token has been registered, the client app instance can receive and handle the FCM notification messages regardless of the iOS or Android platform. Refer to the React Native Firebase documentation’s usage page to learn more about the implementation.
Review the React Native Firebase documentation to understand the available event handlers for receiving messages. The below code snippet shows the parsing of received FCM messages.
Note: Channels are an Android-only concept used to categorize and allow users to control how notifications are handled on their devices.
The data object parsed from an FCM data message contains a set of key-value items, as shown in the below JSON code.
Troubleshooting push notifications can be complex; here are some tips on doing this.
And that’s a wrap! You now know how to send push notifications for React Native apps with Sendbird Chat. With the guidance in this tutorial and the docs, you’ll be on your way to sending timely, relevant, and engaging push notifications in no time!
We’re always here to help; contact us if you have any questions, comments, or concerns.
Happy push notifications building! 💻
Stay up-to-date on the latest technical content from Sendbird.