即使在发送消息后，React应用中也不会触发Firebase云消息传递onMessage [英] Firebase cloud messaging onMessage not triggered in React app even after message is sent

问题描述

我正在我的React应用中测试Firebase Cloud Messaging功能，该功能由create-react-app启动。请注意，我已经正确初始化了Firebase（包括服务器端的admin SDK），并且客户端已部署在https上。到目前为止，我所做的是：

I am testing out the Firebase Cloud Messaging function in my React app which was bootstrapped with create-react-app. Note that I have already intialized firebase (including admin SDK on server-side) properly and my client side is deployed on https. What I did so far was to:

1. 在firebase.js中初始化firebase消息传递，还请求通知权限并侦听onMessage事件

const messaging = firebase.messaging();
messaging
  .requestPermission()
  .then(() => {
    console.log("Permission granted!");
  })
  .catch(() => {
    console.log("Permission denied!");
  });

messaging.onMessage(payload => {
  console.log("onMessage: ", payload);
});

1. 创建服务工作者文件firebase-messaging-sw公用目录中的.js

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

var config = {
  messagingSenderId: <messageID hidden>
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

1. 我从另一个Stackoverflow阅读将带有create-react-app的帖子发布到index.js中

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("../firebase-messaging-sw.js")
    .then(function(registration) {
      console.log("Registration successful, scope is:", registration.scope);
    })
    .catch(function(err) {
      console.log("Service worker registration failed, error:", err);
    });
}

1. 测试轻松进行消息传递，我在Main.js中添加了一个按钮，该按钮将在单击时向服务器发送令牌（然后服务器将继续发送消息）

const handlePushButtonClick = () => {
    messaging.getToken().then(token => {
      axios.post(<Server link hidden>, {
        token
      });
    });
  };

1. 然后我在自己的路线中设置了必要的路线这样的快递服务器

app.post("/api/push", async (req, res) => {
    const registrationToken = req.body.token;
    var message = {
      data: {
        score: "850",
        time: "2:45"
      },
      token: registrationToken
    };
    fb.admin
      .messaging()
      .send(message)
      .then(response => {
        console.log("Successfully sent message:", response);
        res.sendStatus(200);
      })
      .catch(error => {
        console.log("Error sending message:", error);
      });
  });

这是问题，我已验证我的服务器已成功接收令牌并且实际上已成功发送消息，但在客户端，我根本没有收到onMessage有效负载对象。

Here's the issue, I have verified that my server is successfully receiving the token and in fact has successfully sent the message but on my client-side, I am not receiving the onMessage payload object at all.

从代码中回想起，我希望在客户端开发控制台上收到的是带有onMessage和有效负载的console.log。

Recall from my code that what I expect to receive on my client side dev console is a console.log with onMessage and the payload.

messaging.onMessage(payload => {
  console.log("onMessage: ", payload);
});

推荐答案

简单的解决方案是更新您的 Firebse 到最新版本。

Simple solution to this is update your Firebse to latest versions.

例如。

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

注意：更新Firebase库版本后， essagingSenderId 在您的 firebase-messaging-sw.js 文件中不起作用。您必须提供所有其他参数，例如。 apiKey ， projectId ， appId 以及 messagingSenderId 。

Note: Once you have updated your firebase libraries versions then messagingSenderId will not work in your firebase-messaging-sw.js file. You have to provide all other params eg. apiKey, projectId, appId along with messagingSenderId.

例如

将其替换为 firebase-messaging-sw.js

firebase.initializeApp({
    messagingSenderId: "Sender ID"
});

使用此

firebase.initializeApp({
        apiKey: "api-key",
        authDomain: "project-id.firebaseapp.com",
        databaseURL: "https://project-id.firebaseio.com",
        projectId: "project-id",
        storageBucket: "project-id.appspot.com",
        messagingSenderId: "sender-id",
        appId: "app-id",
});

• 如果仍然无法运行。清理浏览器缓存并重新注册服务人员。



这篇关于即使在发送消息后，React应用中也不会触发Firebase云消息传递onMessage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！