Push Notification-Firebase Cloud Messaging

Hey guys I am back with an interesting and trending concept these days push Notifications.

Have you ever wondered how your smartphone receives and handles notifications whether in the foreground, background, or even killed?

Firebase Cloud Messaging is the tool used to send push notifications to a single or a group of devices.

In this blog, we’ll learn how to integrate push notifications in React Native apps using firebase, send notifications with the help of firebase and handle them in Android.

The concept behind push notifications is quite simple: they are messages sent to a user’s mobile device from an app they’ve downloaded. Their purpose is to add value and keep the user interested in the mobile app.

Messages in push notifications are usually short as they have a restricted character limit (as opposed to, for example, text messages). In fact, the better their click-through rates. Moreover, if a user clicks on a push notification, they’ll be redirected directly to the mobile app that sent the message, which makes them a quite convenient marketing strategy.

Let's deep dive into the article without wasting time.

My name is Sivasai Gangala, I am a full-stack developer who loves to develop and build solutions using Cloud services and React-native.

Firebase Cloud Messaging: Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost.

Using FCM, you can notify a client app that new email or other data is available to sync. You can send notification messages to drive user re-engagement and retention. For use cases such as instant messaging, a message can transfer a payload of up to 4KB to a client app.

Now, that you have got a little idea about FCM, let’s implement it in our Project.

1. Create Firebase Project:

Go to Firebase Console.

Follow the steps to set up the project.

After adding the project to the Firebase, add App to the same project.

Enter the project name, package name, and SHA-1 key of your Android Studio project.

Follow all the steps to complete the Android App linking with Firebase.

If you face any problem while setting up Firebase on your project you can refer to Add Firebase to your Android Project.

Till now, we have only linked our Android Studio project to Firebase. Now, we proceed with adding Firebase SDK to our project to handle FCM.

Adding Firebase SDK:

1. Install via NPM

Install the React Native Firebase “app” module to the root of your React Native project with NPM or Yarn:

# Using npm
npm install --save @react-native-firebase/app
# Using Yarn
yarn add @react-native-firebase/app

The @react-native-firebase/app the module must be installed before using any other Firebase service.

2. Android Setup

To allow the Android app to securely connect to your Firebase project, a configuration file must be downloaded and added to your project.

Generating Android credentials

On the Firebase console, add a new Android application and enter your project details. The “Android package name” must match your local projects package name which can be found inside of the manifest tag within the /android/app/src/main/AndroidManifest.xml file within your project.

The debug signing certificate is optional to use Firebase with your app, but is required for Dynamic Links, Invites, and Phone Authentication. To generate a certificate run cd android && ./gradlew signingReport. This generates two variant keys. You have to copy both 'SHA1' and 'SHA-256' keys that belong to the 'debugAndroidTest' variant key option. Then, you can add those keys to the 'SHA certificate fingerprints' on your app in Firebase console.

Download the google-services.json file and place it inside of your project at the following location: /android/app/google-services.json.

Configure Firebase with Android credentials

To allow Firebase on Android to use the credentials, the google-services plugin must be enabled on the project. This requires modification to two files in the Android directory.

First, add the google-services plugin as a dependency inside of your /android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.14'
    // Add me --- /\
  }
}

Lastly, execute the plugin by adding the following to your /android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

3. Autolinking & Rebuilding

Once the above steps have been completed, the React Native Firebase library must be linked to your project and your application needs to be rebuilt.

Users on React Native 0.60+ automatically have access to “auto-linking”, requiring no further manual installation steps. To automatically link the package, rebuild your project:

# Android apps
npx react-native run-android

Once successfully linked and rebuilt, your application will be connected to Firebase using the @react-native-firebase/app module. This module does not provide much functionality, therefore to use other Firebase services, each of the modules for the individual Firebase services needs to be installed separately.

5.CloudMessaging Installation

This module requires that the @react-native-firebase/app module is already set up and installed. To install the "app" module, view the Getting Started documentation.

# Install & setup the app module
npm i @react-native-firebase/messaging
# Install the messaging module
yarn add @react-native-firebase/messaging

6. Integrating into Our App

1. Add the below code in the app.js file or index.js file

APP.JS

import messaging from '@react-native-firebase/messaging';
async function requestUserPermission() {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
console.log('Authorization status:', authStatus);
}
}
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Message handled in the background!', remoteMessage);
});
const checkToken = async () => {
const fcmToken = await messaging().getToken();
if (fcmToken) {
console.log(fcmToken);
}
}
checkToken();

7. Send Push Notifications from FCM

Go to the FCM dashboard to send messages. In the Engage>Cloud Messaging section, click on compose notification.

Enter the notification values

you can also send a test message by clicking on Send Test Message. Now click on Next.

You can target your app for push notifications. Select the targets you need and click on next.

you can schedule your push notification

We can also add conversion events and additional options. Additional options can be modified according to your requirements. Click the review and publish buttons in the following popup to send the message according to your provided settings.

When you click on publish, the push notification will be sent to the application according to the targeting criteria.
Please share it with your friends and colleagues if you enjoyed this blog!

Refernce https://rnfirebase.io/messaging/usage