out/firebase-messaging-sw.js

// 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.
importScripts('https://www.gstatic.com/firebasejs/10.12.3/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.12.3/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
const firebaseConfig = {
    apiKey: "AIzaSyDwg6jgZxw6454FIYDqEAWOo_dwuWo1yCA",
    authDomain: "whisperlink-2moar.firebaseapp.com",
    databaseURL: "https://whisperlink-2moar-default-rtdb.firebaseio.com",
    projectId: "whisperlink-2moar",
    storageBucket: "whisperlink-2moar.appspot.com",
    messagingSenderId: "411244753604",
    appId: "1:411244753604:web:1931b16728cd45c412cf91"
};

firebase.initializeApp(firebaseConfig);


// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();


messaging.onBackgroundMessage(function(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.icon,
  };

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

self.addEventListener('notificationclick', function(event) {
    console.log('[Service Worker] Notification click Received.', event);
    event.notification.close();

    const notificationData = event.notification.data;
    const action = event.action;

    console.log("[Service Worker] Data: ", notificationData);
    console.log("[Service Worker] Action: ", action);
    
    // Default action if no specific button is clicked (i.e., user clicks the notification body)
    if (!action) {
        if (notificationData && notificationData.type === 'incoming-call') {
            const urlToOpen = new URL(`/?action=show-call&channelName=${notificationData.channelName}`, self.location.origin).href;
            event.waitUntil(
                clients.matchAll({ type: 'window', includeUncontrolled: true }).then(clientList => {
                    for (let i = 0; i < clientList.length; i++) {
                        let client = clientList[i];
                        if (client.url === urlToOpen && 'focus' in client)
                            return client.focus();
                    }
                    if (clients.openWindow)
                        return clients.openWindow(urlToOpen);
                })
            );
        }
        return;
    }

    // Handle actions like 'answer' and 'decline'
    if (notificationData && notificationData.type === 'incoming-call') {
        let urlToOpen;

        if (action === 'answer') {
            // For the 'answer' action, just open/focus the app at its root.
            // The app's internal state should already be 'incoming', so the call modal will be visible for the user to confirm.
            urlToOpen = new URL('/', self.location.origin).href;
            console.log(`[Service Worker] Action is 'answer'. Opening app root: ${urlToOpen}`);
        } else {
            // For other actions like 'decline', pass the action in the URL to be handled by the app.
            urlToOpen = new URL(`/?action=${action}&channelName=${notificationData.channelName}`, self.location.origin).href;
            console.log(`[Service Worker] Action is '${action}'. Opening URL with params: ${urlToOpen}`);
        }

        event.waitUntil(
            clients.matchAll({ type: 'window', includeUncontrolled: true }).then(clientList => {
                for (let i = 0; i < clientList.length; i++) {
                    let client = clientList[i];
                    // If a window is already open, navigate it to the new URL and focus it.
                    if (client.url.startsWith(self.location.origin) && 'focus' in client) {
                         client.navigate(urlToOpen);
                         return client.focus();
                    }
                }
                // Otherwise, open a new window.
                if (clients.openWindow) {
                    return clients.openWindow(urlToOpen);
                }
            })
        );
    }
});