Firebase

Firebase (opens in a new tab) provides the tools and infrastructure you need to develop, grow, and earn money from your app. This package supports web (browser), mobile-web, and server (Node.js) clients. Further information can be found Firebase (opens in a new tab)

The resources(mixture of both) used to achieve this notification feature on web app are :

1. Stackoverflow (opens in a new tab)
2. Online Blog (opens in a new tab)

The main codes are inside src/shared/utils/firebase-utils and in public/firebase-messaging-sw.js It's usage in the code base is shown below

import { showToast, TOAST_TYPES } from "@shared/utils/toast-utils/toast.util";
import "firebase/messaging";
 
useEffect(() => {
  // Listen for the push notification event in the background
  requestNotificationPermission();
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.addEventListener("message", (event) => {
      showToast(TOAST_TYPES.info, event?.data.notification.body); //the data sent from API
    });
  }
}, []);