Push Notification for React Native
In this article i am going to show you how to implement push notification for React Native App using Firebase Database, App server(GPC AppEngine) and Firebase Cloud Messaging(FCM) which is a cross-platform messaging solution that lets you reliably deliver messages. In the end, I will also show you how to implement Google Function for Firebase to run serverless environment.
I only focus on iOS for RN app this time in this article though.
Push Notification Setup For React Native(iOS)
Configuration for iOS
- pod init
ios && pod init
2. Edit “Podfile”
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'ProjecName' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# Pods for ProjecName
target 'ProjecName-tvOSTests' do
# Pods for testing
target 'ProjecNameTests' do
# Pods for testing
3. pod install
$> pod install
when you build on xCode you have to open as PROJECT_NAME.xcworkspace, not [***.xcodeproj]
$> open ios/PROJECT_NAME.xcworkspac
4. Certification Setup
Note: You MUST have a PAID Apple Developer account to enable push notifications in your app.
5. Edit AppDelegate.h / AppDelegate.m
6. Xcode Build Setup
7. FCM config
=> In Firebase console, you can get
google-services.json file and place it in
android/app directory and get
GoogleService-Info.plist file and place it in
/ios/your-project-name directory (next to your
8. Let’s write sample code
Once you finished with all those setups and build project, you can test if it works well with sending test notification from Firebase Console. To send notifications from the Notifications console go to Firebase console, then open your project, then open the Notifications console and start sending notifications to user segments.
App Server(GPC AppEngine) Implementation
There is two methods of how to organize user2user notification sending through FCM:
- FCM implementation with own FCM App server.
- FCM implementation without FCM App server (using only React Native App clients).
it’s not recommended way to implement without FCM App server because of its security. Why? it uses FCM Connection Server API directly from the client, using HTTP
POST requests with Authorization Header, that is your FCM API Key. Therefore I am going to show you how to implement with own FCM App server(GPC AppEngine) in this article. it is better to use Firebase App Server, that will be responsible for interaction with FCM Connection Server.
There are several ways to send a message to targets(or devices).
1. Send to individual devices (registration token for the device)
2. Send to a device group (group of registration tokens for the device)
3. Send to a topic (publish/subscribe model)
4. Send to a condition (combination of publish/subscribe topics)
for details ref to https://firebase.google.com/docs/cloud-messaging/admin/send-messages
1) User A writes some subject in the list
2) Other users like User B will get push notification since there is new subject added in the list
User A and User is authenticated with Firebase Auth.
Here is how push notifications will work with our setup:
- User ‘A’ writes some subject in the list along with a notificationRequest on Firebase Database
- App Server(GCP AppEngine) track data of new notification request on Firebase Database
- App server send a message to specific TOPIC via FCM for new subject added in the list.[topic based notification]
- Other users like User ‘B’ who has subscribed to specific TOPIC will be notified with the notification we sent to FCM from the App server
ex) users of RN application will subscribe to /topics/list
Sending a push notification from the RN App
Data Structure of Firebase DataBase
message: "just posted new topic"
title: "sample subject"
When User ‘A’ add ‘Sample subject’ to the list
I am using the database as a queue here. RN app writes the request to send a notification into the database, where App Server will pick it up and send the notification through Cloud Messaging.
Following code shows you how it tracks data of new notification and sends the notifications to specific TOPIC. This is going to be a Node process, which runs on Google App Engine. The node script monitors the notification queue that we saw above. For every child that is added to this queue, it extracts the necessary information and then calls the Cloud Messaging to send the notification. If that succeeds, it removes the notification request from the queue.
To make script above work, you have to add the Firebase Admin SDK to your Server. you can refer here for details
Deploying to AppEngine
Now you can deploy node code to AppEngine. For details you can refer to running node.js on Google Cloud Platform.
The default when deploying applications to the flexible environment (such as Node) is a minimum of 2 instances. Unless specified otherwise, the platform will to spawn new instances until that minimum is met.
You can set automatic scaling in the
app.yaml file. For example:
cool_down_period_sec: 120 # default value
for details ref to https://cloud.google.com/appengine/docs/flexible/nodejs/configuring-your-app-with-app-yaml#automatic_scaling
Receiving a notification in the RN app
Subscribe to the topic
Finally just subscribe to topic when User login, and unsubscribe to topic when User logout
More to do
There is no auto-retry in above simple script, so it will only retry failed notifications when you restart the script. For a more scalable approach, consider firebase-queue library. If you use firebase-queue on your server, which is a task queue that constantly listens for tasks in “queue/tasks” collection. You can then let the client devices add tasks for sending FCM messages to this collection which will automatically be processed by your server. Just make sure to setup proper security rules for the “queue/tasks” collection.
Sending Notifications with Cloud Function for Firebase(BETA)
If you want to send notifications without running App Server(AppEngine) as you did above, you can use Cloud Functions directly from Firebase. Cloud Functions integrates the Firebase platform by letting you write code that responds to events and invokes functionality exposed by other Firebase features like Analytics, Realtime Database, Authentication, and Storage. Yes! This makes things easy to connect and extend google cloud services along with Firebase! It’s just released so it’s BETA now.
When you go to firebase console, you will see Functions as you see below
Now, write some code for cloud function to send notifications. It’s same scenario as you did above.
Here is how push notifications will work with our setup:
- The function triggers on writes to the Realtime Database path where subjectData is stored.
- The function sends a message to specific TOPIC via FCM.
- FCM sends a notification message to the user’s device which is subscribed to ‘/topics/list’.
First, you have to install the Firebase CLI
npm install -g firebase-tools
Then, Initialize your project
firebase init functions
Once these commands completely successfully, your project structure will look like this.
+- functions/ # Directory containing all your functions code
Edit index.js file in functions folder
Finally, Deploy your functions using the Firebase CLI. You can use the Firebase console to view and search through your logs.
firebase deploy --only functions
This is it! I hope this article helps you to implement push notification for your React Native App!