Web push messaging.setBackgroundMessageHandler not working

Question

I implemented web-push notifications on my site with Google Firebase service. firebase.google.com/docs/cloud-messaging/js/client

I tested it and everything works fine, but when my website window isn't in focus (it's in background) or closed and if I get push-notification it will disappear after 20 seconds.

In my https://hdlava.me/j/firebase_subscribe.js file I added

requireInteraction: true 

flag in messaging.onMessage so if I get push mesage when my website is open the message won't disappear until I click on it.

I tried to add this

requireInteraction: true

in messaging.setBackgroundMessageHandler in my https://hdlava.me/firebase-messaging-sw.js, but it's not working. Even:

console.log('[firebase-messaging-sw.js] Received background message ', payload)

doesn't work. It looks like whole messaging.setBackgroundMessageHandler does not work.

Can someone please help me figure out what is the problem ? Also if I use in firebase-messaging-sw.js

self.addEventListener("push",function(event)

instead messaging.setBackgroundMessageHandler so I have two messges at once. First message disappears and second one doesn't, but second one is not clickable. Is it possible to prevent first message and make second one to be clickable ?

Answer 1

Referring to the FCM docs:

https://firebase.google.com/docs/cloud-messaging/js/receive

"Note: If you set notification fields in your HTTP or XMPP send request, those values take precedence over any values specified in the service worker."

So, if you have

{
    "notification": {
      "title": "Your title",
      "body": "Your message"
    },
    "to": "topic",
}

It never triggers the BackgroundMessageHandler. Because sending data this way, simply overrides your variables. If you want to trigger it you need to send your notification like this:

{
    "data": {
      "notification": {
        "title": "Your title",
        "body": "Your message"
      }
    },
    "to": "topic",
}