Firebase 云消息在离开 window 焦点时不显示通知

Question

Recently started working on FCM and there are two cases, either you're on browser window you'll get an in app notification within the window using an event listener or if you're off the browser window, you'll get a desktop notification.

In my particular case whenever i'm on window i'm calling an API to fetch data whenever there's a certain message object recieved

navigator.serviceWorker.addEventListener("message", ({ data }) => {
  dispatch(getNotifications(10));
});

this works fine but when I have an open tab but i'm on another window, FCM doesn't get this message object and no event listener is being invoked, essentially I have to either refresh the page or use window.onfocus to re-call the api when I come back to the tab.

Anyone with a workaround?

Answer 1

Firebase will not display the message when you are on another tab, sadly.

But you can use the BroadcastChannel API out of the box. It works like a charm. In your service worker you can add this:

const broadcast = new BroadcastChannel('background-message');

messaging.onBackgroundMessage(message => {
    broadcast.postMessage(message);
})

Then in you app listen to 'background-message':

const broadcast = new BroadcastChannel('background-message');
broadcast.onmessage = (event) => {
  console.log('message from service-worker:', event.data)
};

Update : This doesn't work on safari, but this solution seems to work: https://stackoverflow.com/a/57964685/11827624