Web 前台推送通知未弹出在 Reactjs 中使用 Firebase 集成

Question

我在我的 reactjs Web 应用程序中使用 fcm 推送通知。如果 Web 应用程序在后台运行，我可以收到通知。但是当我的应用程序在前台主动运行时无法收到通知。

Firebase 初始化在我的项目中完美完成，因为我在后台成功获得推送通知。

firebase-messaging-sw.js

    importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js');
    importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js');

    firebase.initializeApp({
      'messagingSenderId': '337889493107'
    });
    const messaging = firebase.messaging();

    messaging.setBackgroundMessageHandler(function (payload) {
      const data = JSON.parse(payload.data.notification);
      const notificationTitle = data.title;
      const notificationOptions = {
        body: data.body,
        icon: '/favicon.png'
      };
      return self.registration.showNotification(notificationTitle,
        notificationOptions);
    });
    messaging.onMessage(function(payload) {

      const data = JSON.parse(payload.data.notification);
      const notificationTitle = data.title;
      const notificationOptions = {
        body: data.body,
        icon: '/favicon.png'
      };
      return self.registration.showNotification(notificationTitle,
        notificationOptions);
    });

我需要对我的前台方法messaging.onMessage 做任何进一步的修改还是需要做更多的配置。请帮帮我

Answer 1

请尝试使用Notifications API，而不是 Service Worker API。

messaging.onMessage(function(payload) {

    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: payload.notification.icon,        
    };

    if (!("Notification" in window)) {
        console.log("This browser does not support system notifications.");
    } else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        var notification = new Notification(notificationTitle,notificationOptions);
        notification.onclick = function(event) {
            event.preventDefault();
            window.open(payload.notification.click_action , '_blank');
            notification.close();
        }
    }

});