Push Notification for React Native

Published in

Google Cloud - Community

7 min readMar 23, 2017

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)

I am going to use this library: react-native-fcm which is a module for firebase cloud messaging and local notification. For installation and configuration you can refer here for details.

Configuration for iOS

pod init

$> cd 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
  use_frameworks!

  # Pods for ProjecName
  pod 'Firebase/Messaging'

  target 'ProjecName-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'ProjecNameTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

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

Refer to https://firebase.google.com/docs/cloud-messaging/ios/certs

Note: You MUST have a PAID Apple Developer account to enable push notifications in your app.

5. Edit AppDelegate.h / AppDelegate.m

Refer to https://github.com/evollu/react-native-fcm#shared-steps

6. Xcode Build Setup

Refer to https://github.com/evollu/react-native-fcm#xcode-post-installation-steps

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 Info.plist)

8. Let’s write sample code

9. Test

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

Scenario

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.

User A on the left / User B on the right

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

- notificationRequests
    $pushid
      from_username: "TJ"
      message: "just posted new topic"- subjects
    $pushid
      author: "TJ"
      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.

AppServer code

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.

Automatic scaling

You can set automatic scaling in the app.yaml file. For example:

service: my-serviceruntime: nodejsenv: flexautomatic_scaling:min_num_instances: 5max_num_instances: 20cool_down_period_sec: 120 # default valuecpu_utilization:target_utilization: 0.5

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 login
cd path/to/yourProject
firebase init functions

Once these commands completely successfully, your project structure will look like this.

myproject
 +- .firebaserc 
 |
 +- firebase.json
 |
 +- functions/     # Directory containing all your functions code
      |
      +- package.json 
      |
      +- index.js
      |
      +- node_modules/

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.