How to Implement Push Notifications in React Using Firebase
Push notifications enable applications to send timely updates, alerts, or personalized messages directly to users' devices, regardless of their active usage of the application. These notifications ensure continuous user engagement and instant connectivity.
In the case of web applications, the browser captures these notifications initially and subsequently forwards them to the corresponding application.
Set Up a Firebase Project
Follow the steps below to get started and set up a Firebase project:
Configure Firebase Cloud Messaging (FCM) Service
Once you have registered your application on Firebase, the next step is to configure the Firebase Cloud Messaging (FCM) service.
Set Up the React App
First,create a React app. Once installed, go ahead and install thefirebaseandreact-hot-toastpackages which you will use to implement push notifications in the React app.
You can find this project’s source code in thisGitHub repository.
Configure Firebase and the Cloud Messaging Service
Head over to yourProject settingspage on the developer console, and copy the provided Firebase configuration object. In thesrcdirectory, create a newfirebase.jsfile and add the following code.
Replace the abovefirebaseConfigobject with the one you copied from theProject settingspage. This code will set up the Firebase instance and initialize the cloud messaging object to enable FCM functionality in your application.
Manage Notifications' User Permission Requests
To allow the React applications to receive push notifications from Firebase’s Cloud Messaging service, you need to handle the user permissions.
This involves defining and calling therequestPermissionmethod provided by the messaging object, which you have previously configured. It ensures that you properly handle the user’s responses to the notifications' permission requests.
Add the following code to thefirebase.jsfile after initializing the messaging object.
The provided code requests user permission for notifications and handles the permission response. If permission is granted, it proceeds to obtain a registration token for the application using thegetTokenfunction.
The registration token serves as an identifier for the device or browser receiving the notifications. you could then utilize this token to set up a notification campaign in the Firebase Cloud Messaging settings page.
Ensure that you replace the placeholderNotification_key_pairwith the actual key pair you generated earlier in theWeb Configurationsection.
Define Notification Listeners
To handle any type of incoming notifications, it is necessary to set up message listeners to track incoming notifications and callback functions to trigger any messaging events.
In yourfirebase.jsfile, add the following code.
This function sets up a message listener specifically for push notifications. TheonMessagefunction withinonMessageListeneris triggered whenever the app receives a push notification and is in focus.
When a notification is received, the message payload will contain relevant data associated with the notification, such as the title and body of the message.
Define a Firebase Messaging Service Worker
FCM requires a Firebase Messagingservice workerto handle incoming push notifications.
The service worker is a JavaScript file that runs in the background and handles push notifications—it allows the web app to receive and display notifications, even if the user has closed the app or switched to a different tab or window.
In the/publicdirectory, create a newfirebase-messaging-sw.jsfile and include the following code.
This code sets up a service worker for Firebase Cloud Messaging in the React application, enabling the handling and display of notifications.
Create a Notification Component
Create a newcomponents/Notification.jsfile in the/srcdirectory and add the following code.
This code defines a component that handles push notifications. It utilizes thereact-hot-toastlibrary to display notifications to the user.
The component requests user permission, listens for incoming messages usingonMessageListenerfunction, and by default displays a toast notification with the received title and body for a duration of one minute at the top-right section of the browser page. you’re able to further customize the notification with the help of the officialreact-hot-toastdocumentation andthe CSS position property.
Finally, update theApp.jsfile to import theNotificationcomponent.
Test the Push Notification Feature
Go ahead and spin up the development server and open http://locahlhost:3000 on your browser to access the application. You should get the following pop-up to allow the application to receive notifications.
ClickAllow. Theclient tokenshould be generated and logged in thebrowser console. You will use the token to send notification campaigns to your React app.
Copy theclient tokenand head over to Firebase’s developer consoleProject Overviewpage. Click theCloud Messagingcard under theGrow & engage your audiencesection.
ClickCreate your first campaign, selectFirebase Notification messages, and provide a title and message for your notification. Under theDevice previewsection, clickSend test message.
Paste in and add the client token in the pop-up window that follows and clickTestto send the push notification.
If you are on the application, you will receive a push notification. If not, you will receive a background notification.
Sending Push Notifications Using Firebase Cloud Messaging Service
Push notifications are a valuable feature for enhancing the user experience for both web and mobile applications. This guide highlighted the steps to integrating push notifications using Firebase, including handling user permissions and setting up message listeners.
By leveraging Firebase Cloud Messaging APIs, you can effectively deliver timely updates and personalized messages to your React applications.
Utilize the powerful combination of React.js and Firebase to build a chat application.
If an AI can roast you, it can also prep you for emergencies.
Some subscriptions are worth the recurring cost, but not these ones.
Sometimes the smallest cleaning habit makes the biggest mess.
One casual AI chat exposed how vulnerable I was.
The key is not to spook your friends with over-the-top shenanigans.
