I have been trying to show custom notifications when the user gets an FCM background notification but I am getting two notifications each time a user gets a new notification one is the default Firebase SDK and the other is a custom notification from my service worker code.

Is there a way to disable the default notification or hide it as soon as it appeared so that the user can only get the custom notification?

I have tried all the previous solutions but none of them are working as many functions such as SetBackgroundHandler are deprecated. FCM Push notifications arrive twice if the browser is in background

see my code below -

self.addEventListener('push', function(event) {
    // console.log('Received a push message', event);
    var body,title,tag,icon;
    messaging.onBackgroundMessage((payload)=>{

    title = payload.notification.title;
     body =  payload.data.order_id;
    icon = "/images/logo.png';
    tag = 'simple-push-demo-notification-tag';
    
     
    event.waitUntil(
      self.registration.showNotification(title, {
        body: body,
        // icon: icon,
        tag: tag,
      })
    );
  });
  });

I have been trying to show custom notifications when the user gets an FCM background notification but I am getting two notifications each time a user gets a new notification one is the default Firebase SDK and the other is a custom notification from my service worker code.

Is there a way to disable the default notification or hide it as soon as it appeared so that the user can only get the custom notification?

I have tried all the previous solutions but none of them are working as many functions such as SetBackgroundHandler are deprecated. FCM Push notifications arrive twice if the browser is in background

see my code below -

self.addEventListener('push', function(event) {
    // console.log('Received a push message', event);
    var body,title,tag,icon;
    messaging.onBackgroundMessage((payload)=>{

    title = payload.notification.title;
     body =  payload.data.order_id;
    icon = "/images/logo.png';
    tag = 'simple-push-demo-notification-tag';
    
     
    event.waitUntil(
      self.registration.showNotification(title, {
        body: body,
        // icon: icon,
        tag: tag,
      })
    );
  });
  });

• javascript
• angular
• push-notification
• firebase-cloud-messaging
• service-worker

• did you find a solution? – Pumuckelo Commented Aug 9, 2021 at 8:06
• did you find a solution? – Tabarek Ghassan Commented Jan 16, 2022 at 12:44

1 Answer 1

This question puzzled me for 2 days. I read all the informations about firebase messaging and service worker, finally I found a solution now, so I'm so excited to write it down.

You can skip to the end if you just want the conclusion.

By using chrome's console tool, run

getEventListeners(self).push[0]

on firebase-messaging-sw.js, this method can let me know the list of event handlers of 'push' event, which should be the mechanism used by firbase messaging. And I can get the function be run by running

getEventListeners(self).push[0].listener()

. Because there was en error, I jumped to the firebase-messaging.js->sw-controller.ts-> onPush(event: PushEvent), and found out that if the message from firebase contains notification property, this event handler created by firebase will show the notification.

So, the simple way to stop the default notification popup is, don't send message with notification property. (If you test message sending on firebase project console, the message will contain the notification property, so you'd better test sending by another way.)

Then you can do your customized handling by onBackgroundMessage() by now.