Firebase Push Notifications in React: A Complete Guide

import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";
import { toastMessage } from "./components/ToastMessage";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: "********************",
authDomain: "********************",
projectId: "********************",
storageBucket: "********************",
messagingSenderId: "********************",
appId: "********************",
measurementId: "********************",
};

export const onMessageListener = () =>
new Promise((resolve) => {
onMessage(messaging, (payload) => {
resolve(payload);
});
});

initializeApp(firebaseConfig);
export const getMessagingToken = (setTokenFound) => {
return getToken(messaging, {
vapidKey:"unique_pair_of_public_and_private_keys ",
})
.then((currentToken) => {
if (currentToken) {
console.log("current token for client: ", currentToken);
setTokenFound(true);
// Track the token -> client mapping, by sending to backend server
// show on the UI that permission is secured
} else {
console.log(
"No registration token available. Request permission to generate one."
);
setTokenFound(false);
// shows on the UI that permission is required
}
})
.catch((err) => {
console.log("An error occurred while retrieving token. ", err);
// catch error while creating client token
});
};

const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);
const messaging = getMessaging(firebaseApp);

Getting the Messaging Token

This function tries to obtain a messaging token, essential for sending Firebase push notifications to the client. If successful, it sets a flag (setTokenFound) indicating that the token is available. If the browser does not allow notification permission, this function first asks for notification permission and then generates the FCM (Firebase cloud messaging) token.

VapidKey:

The vapidKey used here is the unique key pair generated earlier in your Firebase project settings under the Web Push Certificates section. This key is essential for securing and authenticating communication between your web app and Firebase’s servers. By adding this key to your Firebase messaging setup, you create a trusted channel for sending and receiving Firebase push notifications, ensuring that these notifications come from your server and are securely delivered to the recipients.

Here We Have Some Scenarios to Understand:

If notification permission is not given then it will ask for permission suppose the user allows the permission then you will get the FCM token successfully.
If the user dont allow the permission and blocks it instead. In that case, you will not get the FCM token that is required for sending the notification.

Getting Notification (onMessageListener)

The onMessageListener function in your React app is crucial for managing real-time Firebase push notifications. When the app is active, it exports a promise that listens for incoming Firebase messages. When a message arrives, Firebase’s onMessage function is called, passing along the notification’s details (payload). This configuration ensures that any notifications sent while the app is in the foreground are received and processed immediately.

The payload, which contains information such as the title and body of the notification, is logged for debugging and then resolved, indicating the successful completion of this asynchronous operation. This function is important for the seamless and interactive user experience that keeps users engaged with real-time updates.

// Scripts for firebase and firebase messaging
importScripts(
"https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"
);
importScripts(
"https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js"
);

// Initialize the Firebase app in the service worker by passing the generated config
var firebaseConfig = {
apiKey: "***********",
authDomain: "***********",
projectId: "***********",
storageBucket: "***********",
messagingSenderId: "***********",
appId: "***********",
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
console.log("Received background message ", payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
icon: "https://freeiconshop.com/wp-content/uploads/edd/notification-flat.png",
};

self.registration.showNotification(notificationTitle, notificationOptions);

self.addEventListener("notificationclick", function (event) {
console.log("clicked on notification", payload);
const notification = payload?.data;
event.notification.close();
event.waitUntil(clients.openWindow("/example.com"));
});
});

In our Firebase service worker script, first we import the Firebase app and messaging libraries required for Firebase push notification integration. The script uses firebase.initializeApp(firebaseConfig) to initialize Firebase with our project’s specific configuration details, establishing a connection to Firebase services. Then, with const messaging = firebase.messaging(), we create a Firebase messaging instance, which is required for handling push notifications. The core functionality is contained in messaging.onBackgroundMessage, which is called when a background notification is received.

This function processes the payload, which contains information such as the notification’s title and body, as well as possibly additional custom data. Using this information, we configure and display the notification via self.registration.showNotification(notificationTitle, notificationOptions), ensuring that users receive timely updates even when the web app is not active. A notificationclick event listener is also added to define actions when the notification is clicked. Clicking on the notification, such as opening a specific URL, increases user engagement.

Firebase Cloud Messaging on Safari for macOS

For receiving push notification in safari you just have to do some extra things.

Configure the Manifest File

{ "display": "standalone" } // or {"display": "fullscreen"}

// Example: wrapping permission request call inside a button click
const myButton = document.querySelector("button");
myButton.addEventListener("click", async () => {
let permission = await Notification.requestPermission();
if (permission === "granted") {
console.log("Notification permission granted. Requesting for token.");
let token = await messaging.getToken({
vapidKey: "<YOUR_PUBLIC_VAPID_KEY_HERE>",
});
// do something with the FCM token
} else {
console.log("Notification permission denied");
// Handle denied permission
}
});