reactjs - Firebase 云消息在超出窗口焦点时不显示通知
问题描述
最近开始研究 FCM,有两种情况,或者您在浏览器窗口中,您将使用事件侦听器在窗口内收到应用内通知,或者如果您不在浏览器窗口中,您将收到桌面通知.
在我的特殊情况下,每当我在窗口上时,只要收到某个消息对象,我就会调用 API 来获取数据
navigator.serviceWorker.addEventListener("message", ({ data }) => {
dispatch(getNotifications(10));
});
这工作正常,但是当我有一个打开的选项卡但我在另一个窗口上时,FCM 没有得到这个消息对象并且没有调用事件侦听器,基本上我必须刷新页面或使用 window.onfocus 重新当我回到选项卡时调用 api。
有人有解决方法吗?
解决方案
遗憾的是,当您在另一个选项卡上时,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 ://stackoverflow.com/a/57964685/11827624
推荐阅读
- sml - 这个标准的 ML 函数给了我“未处理的异常:匹配”。有人可以指出我解决问题的正确方向吗?
- ios - 我可以以某种方式手动安装我的 TestFlight 构建的 IPA 吗?
- qemu - 未调用 QEMU 分支和交换(手臂拇指)指令
- laravel - 如何解决 Laravel 护照安装错误?
- c - C - Qsort 按计数然后按字母顺序
- html - .NET LinkTagHelper - 如何在没有显式 css 类选择器的情况下将其用于 CSS CDN 文件?
- c - 如何使用两个管道控制一个ftp二进制文件
- python-3.x - python:将t检验应用于DataFrame中的每一列
- php - PHP联系表单验证并在同一页面提交
- python-3.x - Keras UpSampling2D 不一致的行为