Handling push notifications in a React app involves integrating browser notifications or push notification services, such as Firebase Cloud Messaging (FCM), or Web Push Notifications. Here’s a step-by-step guide to handling push notifications in a React app:

✅ 1️⃣ Setting Up Push Notifications with Firebase Cloud Messaging (FCM):

Firebase Cloud Messaging (FCM) is a popular service for handling push notifications. Here’s how you can integrate FCM into your React app:

Step 1: Set up Firebase in your project

1. Create a Firebase project in the Firebase Console: Firebase Console.

2. Add Firebase SDK to your project:

   Run the following command to install Firebase:

   npm install firebase


3. Configure Firebase by adding Firebase configuration to your project:

   In src/firebase-config.js:

   import { initializeApp } from "firebase/app";
   import { getMessaging } from "firebase/messaging";
   
   const firebaseConfig = {
   apiKey: "YOUR_API_KEY",
   authDomain: "YOUR_AUTH_DOMAIN",
   projectId: "YOUR_PROJECT_ID",
   storageBucket: "YOUR_STORAGE_BUCKET",
   messagingSenderId: "YOUR_SENDER_ID",
   appId: "YOUR_APP_ID",
   };
   
   const app = initializeApp(firebaseConfig);
   const messaging = getMessaging(app);
   
   export { messaging };

Step 2: Request Permission for Push Notifications

In your React component, request permission from the user to send notifications:

• import { messaging } from './firebase-config';
  import { getToken } from 'firebase/messaging';
  
  const requestNotificationPermission = async () => {
  try {
  const token = await getToken(messaging, { vapidKey: 'YOUR_VAPID_KEY' });
  if (token) {
  console.log("Notification permission granted. Token:", token);
  // Send token to server or use for subscribing to push notifications
  } else {
  console.log("No notification permission granted.");
  }
  } catch (error) {
  console.error("Error getting notification token:", error);
  }
  };
  

  The VAPID Key is a public key used to authenticate the push service.

Step 3: Handling Incoming Notifications

Use Firebase messaging to handle incoming notifications while the app is in the foreground:

import { onMessage } from 'firebase/messaging';

const setupForegroundNotification = () => {
onMessage(messaging, (payload) => {
console.log("Notification received in foreground:", payload);
// Show custom notification UI or display alert
});
};

Step 4: Create a Service Worker

A service worker listens for background notifications. Create a firebase-messaging-sw.js file in the public folder:

importScripts('https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.1.2/firebase-messaging.js');

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// Background notifications
messaging.onBackgroundMessage((payload) => {
console.log('Received background message ', payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
icon: payload.notification.icon,
};

self.registration.showNotification(notificationTitle, notificationOptions);
});

Ensure that your service worker is registered in your React app:

import { useEffect } from 'react';

const useServiceWorker = () => {
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/firebase-messaging-sw.js').then((registration) => {
console.log('Service Worker registered with scope:', registration.scope);
}).catch((error) => {
console.log('Service Worker registration failed:', error);
});
}
}, []);
};

export default useServiceWorker

✅ 2️⃣ Handling Web Push Notifications Directly (Without Firebase):

You can also handle Web Push Notifications directly using the Push API and Notification API. This doesn’t require Firebase and works across most modern browsers.

Step 1: Request Notification Permission

const requestNotificationPermission = async () => {
const permission = await Notification.requestPermission();
if (permission === "granted") {
console.log("Notification permission granted!");
} else {
console.log("Notification permission denied.");
}
};

Step 2: Show Notifications

Once permission is granted, you can trigger notifications from your React app:

const showNotification = () => {
const options = {
body: "This is your push notification!",
icon: "/path-to-your-icon.png",
};

new Notification("Hello, React!", options);
};

Step 3: Push Notifications with Service Workers

To handle background notifications, use a service worker:

1. Create a service-worker.js file in the public folder:

self.addEventListener('push', (event) => {
const options = {
body: event.data.text(),
icon: '/icon.png',
};
event.waitUntil(self.registration.showNotification('Push Notification', options));
});

1. Register the service worker in your main React app:

useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then((registration) => {
console.log('Service Worker registered:', registration);
}).catch((error) => {
console.log('Service Worker registration failed:', error);
});
}
}, []);

✅ 3️⃣ Handling Push Notifications in React with Third-Party Libraries:

There are libraries like react-push-notification or web-push that simplify push notifications in React. Here’s how you can integrate react-push-notification:

Step 1: Install the library

Step 2: Use the library in your React component

import React, { useState } from "react";
import { NotificationContainer, NotificationManager } from 'react-push-notification';

const App = () => {
const [notification, setNotification] = useState('');

const triggerNotification = () => {
NotificationManager.success('This is a sample notification!');
};

return (
<div>
<button onClick={triggerNotification}>Show Notification</button>
<NotificationContainer />
</div>
);
};

export default App;

⚡ Summary:

1. Firebase Cloud Messaging (FCM): Best for reliable, cross-platform push notifications. Set up Firebase, request permission, and handle background notifications using a service worker.
2. Web Push Notifications (without Firebase): Use the native Push API and Notification API to request permissions and show notifications, including background support with service workers.
3. Third-Party Libraries: Libraries like react-push-notification can simplify the process for basic notifications.