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

Posted 2023-02-22

【中文标题】Firebase 云消息在超出窗口焦点时不显示通知

【英文标题】：Firebase cloud messaging doesn't show notification when out of window focus

【发布时间】：2021-03-13 03:07:44

【问题描述】：

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

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

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

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

任何有解决方法的人？

【参考方案1】：

很遗憾，当您在另一个标签页上时，Firebase 不会显示该消息。

但您可以使用开箱即用的BroadcastChannel API。它就像一个魅力。 在您的服务工作者中，您可以添加以下内容：

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)
;

更新：这在 safari 上不起作用，但这个解决方案似乎有效：https://***.com/a/57964685/11827624