Firebase notification onMessage not hitting when chrome tab is open but not active

Question

I have setup firebase messaging service and it works like a charm. Only problem is in messaging.onMessage function I have incremented count of notification on my page. Additionally I also have service worker setup that throws chrome notifications in background.

When my tab is open but not active, messaging.onMessage is not getting hit, but background handler service worker is hitting. So counter on my website is not increasing. When user goes to my website tab back again, it shows old notification count. That is creating bad UX. I am showing notifications list on click of count as like facebook shows.

Answer 1

I'm not sure how you're updating the notification badge count. But, you could retrieve the whole payload in the callback function below:

for background:

messaging.setBackgroundMessageHandler(function(payload) {

     console.log(payload.data.badgeCount);

     return self.registration.showNotification(title, options);
});

for foreground:

messaging.onMessage(function(payload) {

     console.log(payload.data.badgeCount);

});

Whether the web app is in foreground or background state, get the payload in the onMessage callback and setBackgroundMessageHandler callback, respectively, then update the UI.

Hope this helps :)