react chat pwa中的FCM推送通知逻辑

Question

我正在开发一个 React 聊天 PWA。我想使用 FCM 进行推送通知。正如我们在 WhatsApp 和 Messenger 上看到的，用户只有在他/她离开时才会收到新消息通知。

所以，我想在对方用户发送消息时显示通知。但我无法做到那种逻辑。你能帮我建议怎么做吗？或者，您能否分享 PWA 推送通知的代码片段？

顺便说一句，后端API是在Laravel中设置的吗？

谢谢！

Answer 1

你可以试试这些文章以供参考-

1. PWA series with FCM
2. Implementing Push notification with FCM
3. Official Google Docs

希望对开发推送通知功能有帮助

所涉及的基本步骤是-

1. 在 Google 开发者控制台上设置 firebase 应用
2. 在你的 React 应用上添加密钥（按照官方文档）
3. 为推送通知添加 Service Worker
4. 此 Service Worker 将拥有您想要的所有逻辑，例如何时接收屏幕上或屏幕外通知
5. 在移动设备上测试该功能（参考 - How to test PWA on mobile with local server）