58 lines
2.2 KiB
JavaScript
58 lines
2.2 KiB
JavaScript
// 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);
|
||
});
|