Firebase 云消息传递在超出窗口焦点时不会显示通知

Question

最近开始研究FCM，有两种情况，要么你在浏览器窗口中，你会在窗口中使用事件侦听器收到应用内通知，要么如果你不在浏览器窗口，你会收到桌面通知。

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

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

这很好，但当我有一个打开的选项卡，但我在另一个窗口上时，FCM没有得到这个消息对象，也没有调用任何事件侦听器，本质上，当我回到选项卡时，我必须刷新页面或使用window.onfocus重新调用api。

有人能解决问题吗？

Answer 1

Firebase将不会显示消息。

但是您可以使用开箱即用的BroadcastChannel API。它就像一个符咒。在您的service worker中，您可以添加以下内容：

const broadcast = new BroadcastChannel('background-message');
messaging.onBackgroundMessage(message => {
broadcast.postMessage(message);
})

然后在你的应用程序中收听"后台消息"频道：

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