Firebase messaging "the site has been updated in background"

Question

I've got a problem. When getting a notification in my service worker:

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  angularClient.postMessage(payload.data);
});

How can I prevent the browser from showing notification that says:

the site has been updated in background

What I do is sending a message to my service where the notification will be showed. For now it shows two notifications. One from my service which is fine and another saying "the site... ".

Answer 1

You MUST show a notification when onBackgroundMessage is called and make sure your return the promise from registration.showNotification('title', {body: 'message'})

The reason for this is that web push doesn't support silent messages.

Answer 2

I was getting this notification in addition to the one I created myself. Spent two days trying to fix it. This is the code that worked for me:

self.addEventListener('push', async function(event) {
    event.waitUntil(
        self.registration.showNotification('title', {
          body: 'body'
        })
    );
});