Push Notification for React Native – TJ Kang – Medium

Push Notification for React Native  #pushnotification #googlecloudplatform #reactjs #reactjs

  • Push Notification for React NativeIn 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.
  • 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) ImplementationThere 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 is better to use Firebase App Server, that will be responsible for interaction with FCM Connection Server.When User A send a message to user BThere are several ways to send a message to targets(or devices).
  • Send to a condition (combination of publish/subscribe topics)for details ref to 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 listUser A and User is authenticated with Firebase Auth.User A on the left / User B on the rightHere is how push notifications will work with our setup:User ‘A’ writes some subject in the list along with a notificationRequest on Firebase DatabaseApp Server(GCP AppEngine) track data of new notification request on Firebase DatabaseApp server send a message to speicific TOPIC through 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 serverex) users of RN application will subscribe to /topics/listSending a push notification from the RN AppData 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 listI am using the database as a queue here.

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…

@ReactDOM: Push Notification for React Native #pushnotification #googlecloudplatform #reactjs #reactjs

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. I only focus on iOS this time in this article though.

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.

2. Edit “Podfile”

target ‘ProjecName’ do

use_frameworks!

inherit! :search_paths

target ‘ProjecNameTests’ do

inherit! :search_paths

3. pod install

4. Certification Setup

5. Edit AppDelegate.h / AppDelegate.m

6. Xcode Build Setup

7. FCM config

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.

There is two methods of how to organize user2user notification sending through FCM:

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)

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

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

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.

Push Notification for React Native – TJ Kang – Medium