How React Native Web Push Notifications Work - A Complete Guide

React Native Push Notifications are the most necessary feature if you are planning to write a mobile app. Push Notifications are going to be a very useful tool for your business, so you are required to master them. In this article, we are going to provide you with a complete guide on how React Native Web Push Notifications work. 

We can surely send a notification through APN for iOS. Although the Firebase messaging window is easy to operate, its step-by-step implementation is necessary.

Moving forward to the implementation, you must know if your React Native Project is ready to use or not to initiate the steps for React Native Push Notifications.

1.    Firebase Installation

This starts with simply installing the React Native Firebase application to emerge as a root for React Native Project with Yarn or NPM. It is needed that the React Native app needs to be installed before using any other service related to Firebase.

We usually get GoogleService-Info list in iOS which is available in the IOS native project whereas we get google-service.json for android that is available in the Android native project.

2.    Android Setup

To avail of the Firebase service using the android application, you have to provide details such as the Android package name at the time of the Firebase app integration process. Once you reach the Firebase site, simply click the Android icon for creating the Android app.

Once you are done with adding details, the googleservice.json file that will have the Firebase configuration will be downloaded and, we only have to fix it inside the Android project at /android/app/google-service.json.

To permit Firebase on Android for using our credentials, you must enable the google-services plugin for the project. For this, you first need to add a google-services plugin inside your /android/build. Gradle file and later execute the same. Your configuration will be done.

3.    iOS Setup

When you wish to connect the Firebase service with the iOS application, you need to provide all the details during the integration process of the Firebase app that is the iOS bundle ID and for this, we need to click on the iOS icon at the Firebase platform.

Once your details are added, google service-info. plist file will appear containing the Firebase configuration. You have to place it in the iOS project there at the root holder.

You also have to allow the Firebase to allow your credentials on iOS so that the configuration of iOS SDK is done by opening your ios/project name/AppDelegate.m file and importing Firebase SDK at the top of the file. For IOS, installation of pods is required. Further, we have to move for code integration in order to have received React native push notifications.

4.    Code integration for push notifications

The FCM which means Firebase cloud messaging service is popular for sending push notifications. To get the push notifications, the app needs to request permission for push notifications.

FCM messages can be forwarded to Android and iOS devices whereas text is only the payload of data that we get in the notification. The notifications can be handled as:

·      Active when the app remains open in foreground mode.

·      Background when the app is in minimized mode.

·      Killed when the app is closed.

This code is enough to handle the push notifications in the app.

5.     Handling notifications while the app is open.

You won’t be able to see any notification in the active mode, but we get notifications in Firebase callback and throw it from the react native app. Hence a local notification package is generated like this.

There is a difference in handling local notification and remote notification, so lines of code are detected. Later, the flow with the same codes is handled on the nodes of data that we got in the local notification. 

6.    Sending the test push notification

 We can use the Firebase console to send test push notifications. Cloud messaging option needs to be chosen from the side menu, and further you have to click on ‘Send your first message.’

Once it is done, you will see a screen that guides you to mention the title and body of notifications. Once you mention this, click on send text message.

Further, you have to specify the FCM token of your device that you wish to get notification on. Add the notification and press the test button and you will receive the push notification on your device with the device token.

Finally, you have the FCM token that is your unique identity for sending the notifications using Firebase.

7.    Handling notification flow

This helps us to know where to navigate in the app from the data that is received in the notification. You can get custom data from data nodes. For example, you can read type nodes from the app, in order to navigate to the screen.

You have to set the type node value to screen for opening screen and modal for showing modal. This all is according to the logic we mention in the custom field of the app.

Conclusion

The react native push notifications mentioned in the article are according to the current research and this may change in the future. So explore the standards and set protocols before you initiate.

Author Bio: Wonderpush allows you to grow your business. It provides you with React Native Push Notifications that can take your iOS app to iOS devices across the world.