Novu•9mo ago

FCM web push duplicate

Hi. I'm using https://docs.novu.co/guides/novu-fcm-web#adding-firebase-to-the-frontend to send web push notifications. The problem is that doing it that way will display notification twice because onBackgroundMessage when payload has notification will display push notification on it's own from fcm messaging. Does anyone know how to prevent default onBackgroundMessage notifications?

4 Replies

Ask Inkeep•9mo ago

Hi @BartB, I'm an AI assistant for Novu. While a team member reviews this question, I'll look through relevant sources and see if I can provide suggestions. Please tag @Ask Inkeep with any follow-up questions. ----------------------------- While I generate an answer, here are some sources that might be helpful: * How to send web push notifications with FCM and Novu * Push Channel Introduction * API Reference * Trigger event ----------------------------- Answer To prevent the default onBackgroundMessage notifications from displaying twice, you should adjust how you manage the payload in the Firebase service worker file (firebase-messaging-sw.js). Specifically, instead of using payload.notification directly to show notifications, you can control the behavior manually. When onBackgroundMessage is triggered, you have the option to customize how and whether a notification is displayed. If you're encountering double notifications, it may be due to both your service worker and the Firebase SDK trying to display a notification based on the notification object in the payload. One approach is to use the payload data to create a custom notification using self.registration.showNotification within onBackgroundMessage, but ensure that you do not automatically pass the notification object from Firebase. Instead, pull the necessary information from the payload or data object and construct the notification details manually. Here's an adjusted snippet from your service worker code to illustrate handling custom notification logic:

messaging.onBackgroundMessage((payload) => {
  console.log("Received background message ", payload);
  const notificationTitle = payload.data.title; // Adjust according to your payload structure
  const notificationOptions = {
    body: payload.data.body, // Adjust according to your payload structure
    icon: payload.data.icon // Adjust according to your payload structure
  };

  // Display the custom notification
  self.registration.showNotification(notificationTitle, notificationOptions);
});

messaging.onBackgroundMessage((payload) => {
  console.log("Received background message ", payload);
  const notificationTitle = payload.data.title; // Adjust according to your payload structure
  const notificationOptions = {
    body: payload.data.body, // Adjust according to your payload structure
    icon: payload.data.icon // Adjust according to your payload structure
  };

  // Display the custom notification
  self.registration.showNotification(notificationTitle, notificationOptions);
});

Ask Inkeep•9mo ago

In this adjusted example, ensure that your payload sent from the backend contains a data object with necessary properties (title, body, icon, etc.) for your notification. This way, you manually control the notification's appearance and avoid the automatic display from the Firebase SDK's handling of notification objects in the payload (1) . Remember, this solution requires you to adjust your payload structure and the way your backend sends notifications to ensure it includes the necessary data for constructing the notification in the service worker.

Sources [1] How to send web push notifications with FCM and Novu

BartBOP•9mo ago

That doesn't seem right. Even if I do:

const messaging = getMessaging(firebaseApp);
onBackgroundMessage(messaging, (payload: MessagePayload) => {
  self.registration.showNotification('123', {});
});

const messaging = getMessaging(firebaseApp);
onBackgroundMessage(messaging, (payload: MessagePayload) => {
  self.registration.showNotification('123', {});
});

I'm getting double notifications. The backend sends notification on it's own - it's novu that is sending this notification.

Pawan Jain•9mo ago

cc:- @unicodeveloper

Gaming

Programming

FCM web push duplicate