React Js Firebase Cloud消息在屏幕处于活动状态时未收到通知答案

【问题标题】：React Js Firebase Cloud messaging not recieving notifications when screen is activeReact Js Firebase Cloud消息在屏幕处于活动状态时未收到通知
【发布时间】：2020-03-24 08:41:19
【问题描述】：

这是我的索引文件

import * as firebase from "firebase";

firebaseConfig = {
     apiKey: "x",
     authDomain: "x",
     databaseURL: "x",
     projectId: "x",
     storageBucket: "x",
     messagingSenderId: "x",
     appId: "x"
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    return messaging.getToken().then(function (token)
    {
        console.log(token, 'firebase token generated here');
        localStorage.setItem('fcmToken', token);
    })
  } else {
    console.log('Unable to get permission to notify.');
  }
});

messaging.onMessage((payload) => {
    console.log('Message received. ', payload);
  });

const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

export { firebase, googleAuthProvider };

这是我的 firebase-messaging-sw.js 文件

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

firebase.initializeApp({
    messagingSenderId: "x",
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {

     console.log(payload);
     console.log('[firebase-messaging-sw.js] Received background message ', payload);
     // Customize notification here
      const notificationTitle = payload.data.title;
      const notificationOptions = {
        body: payload.data.body,
        icon: '/xxx.png'
      };

      return self.registration.showNotification(notificationTitle,
        notificationOptions);
});

我正在尝试从邮递员那里发送通知。当标签未激活时。出现通知。甚至 firebase-messaging-sw.js 也捕获了 console.log 但是当标签处于活动状态时

messaging.onMessage((payload) => {
    console.log('Message received. ', payload);
});

这不会在 index.js 中触发

这是我要发送的有效负载。

{
 "to" : "x",
 "notification" : {
 "body" : "great match!!!!!!!!",
 "title" : "Portugal vs. Denmark!!!!!!!!!!!!!!!!1",
 "content_available" : true,
 "priority" : "high",
 },
 "data" : {
 "body" : "great match..............",
 "title" : "Portugal vs. Denmark..............",
 "content_available" : true,
 "priority" : "high",
 }
}

我什至尝试了不同组合的有效载荷

{
 "to" : "x",
 "notification" : {
 "body" : "great match!!!!!!!!",
 "title" : "Portugal vs. Denmark!!!!!!!!!!!!!!!!1",
 "content_available" : true,
 "priority" : "high",
 },
}

也喜欢

{
 "to" : "x",
 "data" : {
 "body" : "great match..............",
 "title" : "Portugal vs. Denmark..............",
 "content_available" : true,
 "priority" : "high",
 }
}

【问题讨论】：

标签： reactjs firebase firebase-cloud-messaging

【解决方案1】：

好的，终于找到了答案。我不认为这是一个直接的解决方法，但它是一种解决方法。

navigator.serviceWorker.addEventListener("message", (message) => {
    console.log(message);
});

【讨论】：