code handover

public/firebase-messaging-sw.js

@@ -0,0 +1,57 @@
+// Give the service worker access to Firebase Messaging.
+// Note that you can only use Firebase Messaging here. Other Firebase libraries
+// are not available in the service worker.
+// Replace 10.13.2 with latest version of the Firebase JS SDK.
+// eslint-disable-next-line no-undef
+importScripts(
+  "https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js"
+);
+// eslint-disable-next-line no-undef
+importScripts(
+  "https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js"
+);
+
+// Initialize the Firebase app in the service worker by passing in
+// your app's Firebase config object.
+// https://firebase.google.com/docs/web/setup#config-object
+// eslint-disable-next-line no-undef
+firebase.initializeApp({
+  apiKey: " AIzaSyACBg8oyAR2DWMu4xW85gx5thpRgxnvI_0",
+  authDomain: "nearle-gear.firebaseapp.com",
+  databaseURL: "https://nearle-gear-default-rtdb.firebaseio.com",
+  projectId: "nearle-gear",
+  storageBucket: "nearle-gear.appspot.com",
+  messagingSenderId: "140444764229",
+  appId: "1:140444764229:web:e5ed6259a92d0532283b2c",
+  measurementId: "G-3YQ4DNMXE5",
+});
+
+// Retrieve an instance of Firebase Messaging so that it can handle background
+// messages.
+// eslint-disable-next-line no-undef
+const messaging = firebase.messaging();
+
+// why here
+
+// When your web app is in the background or closed, the browser shuts down your React app’s JS context (like your firebase.js, App.js, etc.). At this point:
+// Only a Service Worker (like firebase-messaging-sw.js) is allowed to run.
+// It listens for messages even when your app is not active.
+// Firebase automatically routes background messages to that service worker.
+// So you must use onBackgroundMessage() in the service worker.
+// 🔁 Think of the service worker like a "headless background listener" running outside your React app.
+
+messaging.onBackgroundMessage((payload) => {
+  console.log(
+    "[firebase-messaging-sw.js] Received background message ",
+    payload
+  );
+  // Customize notification here
+  const notificationTitle = payload.notification.title;
+  const notificationOptions = {
+    body: payload.notification.body,
+    icon: payload.notification.image,
+  };
+
+  // eslint-disable-next-line no-restricted-globals
+  self.registration.showNotification(notificationTitle, notificationOptions);
+});