How to Use Firebase to Send Push Notifications to React Native and Node.js Apps

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that allows app developers to send notifications to devices on Android, iOS, and the web. FCM supports sending messages to individual devices, groups of devices, or topics, making it easy to reach your entire user base with relevant notifications.

FCM is built on top of Google Cloud Messaging (GCM), which was deprecated in 2019. FCM provides a more flexible and reliable platform for sending notifications to mobile devices.

What are Push Notifications?

Push notifications are short messages that are sent from a server to a client device to alert the user about important events or updates. Push notifications are an important feature for mobile applications, as they allow apps to provide timely and relevant information to users even when the app is not in use.

Where to use Firebase for Push Notifications?

• Use FCM to send timely and relevant notifications. Users are more likely to engage with notifications that are relevant to their interests and that are sent at a time when they are likely to be interested in receiving them.
• Use FCM to segment your users. You can segment your users by demographics, interests, or behavior. This will allow you to send more targeted notifications that are more likely to be opened and engaged with.
• Use FCM to track the results of your notifications. The Firebase console provides you with information about the number of notifications that were sent, the number of notifications that were delivered, and the number of notifications that were opened. This information can help you to improve the effectiveness of your push notifications.                          
   

We have learned about Firebase, now let's dive into how to use Firebase for your project if you are using React Native and NodeJS.                          
Before we start, you will need to have the following installed:

1. Node.js
2. React Native
3. Firebase account

Setting up Firebase

The first step in sending push notifications is to set up Firebase for your project. You can follow these steps to create a new Firebase project:

1. Go to the Firebase website console and sign in with your Google account.
2. Click on the "Add Project" button and give your project a name.
3. Follow the prompts to set up Firebase for your project, including enabling Firebase Cloud Messaging (FCM) for push notifications.

After setting up your Firebase project, you will need to obtain your Firebase google-services.json file and  generate a private key which results in a json file, which is required for sending push notifications. You can obtain these files from the Firebase Console by clicking on the "Project Settings" button.Go to general tab and service accounts tab to download both files.

Implementing Push Notifications in React Native

Push notifications are an essential part of any mobile app that aims to keep its users engaged and informed. Firebase Notifications with Expo makes it easy to send push notifications to your users in React Native. In this blog, we will walk you through the process of setting up Firebase Notifications with Expo in React Native.

Step 1: Install Required Dependencies

In your React Native project, install the following dependencies:

npm install @react-native-firebase/app @react-native-firebase/messaging

Step 2: Configure Your App

In your app.json file, add the following configuration: 

The googleServicesFile property specifies the location of your Google Services file for both Android and iOS. The plugins property lists the plugins you have installed.

Step 3: Request User Permission

Before your app can receive push notifications, you need to request permission from the user. You can do this by adding the following code to your app..                                         
 

Gist Link:

Step 4: Generate a Token

To receive push notifications, you need to generate a token. You can do this by adding the following code to your app:

Gist Link:

Step 5: Handle Incoming Messages

We'll need to handle incoming notifications when our app is in the foreground, background, or closed. We can do this by adding the following code to our app's entry point (e.g. App.js):                                              
 

Implementing Push Notifications in Node.js

1. Install the firebase-admin package using npm or yarn.

       npm install --save firebase-admin

2. Initialize Firebase Admin in your Node.js application. 

3. Send a message to a specific device.

Gist Link:

Conclusion

In this article, we have learned about Firebase Cloud Messaging (FCM) and how to use it to send push notifications to React Native and Node.js apps. FCM is a reliable and scalable messaging solution that can be used to send messages to devices on Android, iOS, and the web. FCM supports a variety of message types, including text, images, and JSON objects.
 

We have also learned how to set up Firebase for your project and how to implement push notifications in React Native and Node.js. With Firebase, you can easily send timely and relevant notifications to your users, even when your app is not in use. This can help you to keep your users engaged and informed, and to improve the overall user experience of your app.

Contact Valuebound today to learn more about how we can help you transform your business with technology.                                           
 

Boost Engagement: Set Up Push Notifications Now!