How to detect click on push notification

[mattyx97]

Hi, could you help me to find how can i manage this action?

fcm: { firebaseConfig: { apiKey: "xxxxx", authDomain: "xxxx", projectId: "xxxx", storageBucket: "xxxxx", messagingSenderId: "xxxxxx", appId: "xxxxx", measurementId: "xxxx", }, vapidKey: "xxxxxxx", serviceWorkerScript: messaging.onBackgroundMessage((payload) => { const notificationTitle = payload.notification.title; const notificationOptions = { body: payload.notification.body, icon: payload.notification.icon || '/default-icon.png', tag: payload.notification.title, };

   if (navigator.serviceWorker && navigator.serviceWorker.ready) {
  navigator.serviceWorker.ready.then((registration) => {
    registration.showNotification(notificationTitle, notificationOptions);
    })
    .catch((error) => {
      console.error("Error displaying notification:", error);
    });
  } else {
    // Fallback: prova a mostrare direttamente la notifica se ready non è disponibile
    self.registration.showNotification(
        notificationTitle,
        notificationOptions
      );
    }
  });
  if ("serviceWorker" in navigator) {

navigator.serviceWorker.getRegistration().then((registration) => { if (registration) { registration.update(); } }); }

  self.addEventListener('notificationclick', function (event) {

console.log('notification clicked'); event.notification.close(); clients.openWindow("https://youtu.be/PAvHeRGZ_lA"); }); , },

why notificationclick doesn't work??

[becem-gharbi]

Hi, you can extend the service worker's script as described in docs. You can also refer to FCM docs.

  // nuxt.config.ts
  fcm: {
    serviceWorkerScript: `
      addEventListener("notificationclick", (event) => {
        console.log("[firebase-messaging-sw.js] Notification clicked!", event)
      });

      messaging.onBackgroundMessage((payload) => {
        console.log("[firebase-messaging-sw.js] Received background message ", payload);
      })
    `
  },

[mattyx97]

This one messaging.onBackgroundMessage((payload) => { console.log("[firebase-messaging-sw.js] Received background message ", payload); }) work as expected Meanwhile this one is not working addEventListener("notificationclick", (event) => { console.log("[firebase-messaging-sw.js] Notification clicked!", event) });

[becem-gharbi]

I can't reproduce the issue. However, it can be solved by registering the notificationclick event listener before importing the Firebase scripts as they stop further listeners registration, https://github.com/firebase/quickstart-js/issues/102#issuecomment-278584863.

To confirm, you can add the notificationclick listener below on runtime/server/routes/firebase-messaging-sw.get.ts.

export default defineEventHandler((event) => {

  // ....
  return `
    addEventListener("notificationclick", () => {}); // <--- ADD THIS

    importScripts("https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js");
    importScripts("https://www.gstatic.com/firebasejs/10.12.2/firebase-messaging-compat.js");

    const firebaseConfig = ${firebaseConfigString};

    const app = firebase.initializeApp(firebaseConfig);

    const messaging = firebase.messaging();

    ${privateConfig.serviceWorkerScript?.trim() ?? ''}
  `
})