window 焦点不在时，Firebase 云消息传递不显示通知

Question

最近开始研究 FCM，有两种情况，要么你在浏览器上 window 你会在 window 中使用事件侦听器获得应用内通知，要么你'重新关闭浏览器 window，您将收到桌面通知。

在我的特殊情况下，每当我在 window 上时，只要收到某个消息对象，我就会调用 API 来获取数据

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

这工作正常但是当我有一个打开的选项卡但我在另一个 window 上时，FCM 没有得到这个消息对象并且没有事件监听器被调用，基本上我必须刷新页面或使用 window.onfocus 在我返回选项卡时重新调用 api。

有人有解决方法吗？

Answer 1

遗憾的是，当您在另一个选项卡上时，Firebase 不会显示该消息。

但是您可以使用开箱即用的 BroadcastChannel API。它就像一个魅力。在您的服务人员中，您可以添加：

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

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

然后在您的应用中收听 'background-message':

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

更新：这在 safari 上不起作用，但这个解决方案似乎有效：

window 焦点不在时，Firebase 云消息传递不显示通知

Firebase cloud messaging doesn't show notification when out of window focus

firebase

reactjs

redux

firebase-cloud-messaging