Web foreground pu sh оповещение не появляется интегрировано с помощью Firebase в Reactjs

Question

Я использую fcm для уведомления о pu sh в моем reactjs веб-приложении. Я могу получить уведомление, если веб-приложение работает в фоновом режиме. Но я не могу получать уведомления, когда мое приложение активно работает на переднем плане.

Инициализация Firebase отлично выполнена в моем проекте, потому что я успешно получаю уведомление pu sh в фоновом режиме.

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

Попробуйте использовать API уведомлений вместо API Service Worker.

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

});