reactjs - Firebase 云消息传递在窗口焦点之外时不显示通知

Question

最近开始研究 FCM，有两种情况，要么您在浏览器窗口中，您将使用事件监听器在窗口内收到应用程序内通知，要么如果您离开浏览器窗口，您将收到桌面通知。

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

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

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

有人有解决方法吗？

Answer 1

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

但是您可以使用 BroadcastChannel开箱即用的 API。它就像一个魅力。 在您的 serviceworker 中，您可以添加以下内容:

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

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

然后在您的应用程序中收听“background-message” channel :

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