使用JavaScript向Web平台发送Firebase云消息/推送通知时未收到该消息_Javascript_Firebase_Firebase Cloud Messaging

使用JavaScript向Web平台发送Firebase云消息/推送通知时未收到该消息

javascript firebase

使用JavaScript向Web平台发送Firebase云消息/推送通知时未收到该消息,javascript,firebase,firebase-cloud-messaging,Javascript,Firebase,Firebase Cloud Messaging,现在我正在开发一个需要使用实时通知功能的Web应用程序。我正在使用谷歌Firebase的云消息服务。我可以使用JavaScript成功注册服务并检索令牌值。但是当我从REST客户端推送消息时，我的平台不会触发onMessage事件这是我的全部代码 <html> <head> <title>FCM</title> </head> <body> <h1>This is the FCM</h1>

现在我正在开发一个需要使用实时通知功能的Web应用程序。我正在使用谷歌Firebase的云消息服务。我可以使用JavaScript成功注册服务并检索令牌值。但是当我从REST客户端推送消息时，我的平台不会触发onMessage事件

这是我的全部代码

<html>
<head>
    <title>FCM</title>
</head>
<body>
<h1>This is the FCM</h1>

<script src="https://www.gstatic.com/firebasejs/5.3.1/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.3.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.1/firebase-functions.js"></script>

<script>
    // Initialize Firebase
    var config = {
        apiKey: "xxx",
        authDomain: "fcm-web-testing.firebaseapp.com",
        databaseURL: "https://fcm-web-testing.firebaseio.com",
        projectId: "fcm-web-testing",
        storageBucket: "fcm-web-testing.appspot.com",
        messagingSenderId: "xxxx"
    };
    firebase.initializeApp(config);

    const messaging = firebase.messaging();
    messaging.requestPermission().then(function(){
        console.log(messaging.getToken());
        return messaging.getToken();
    }).then(function(token){
        //I get the token here. I use this token to push the notification
        console.log(token);
    })
        .catch(function(err){
            alert('Permission denied');
        })

    messaging.onMessage(function(payload){
        //I am expecting to trigger this event when I push the message using the REST client
        alert('Message ' + payload)
    })
</script>
</body>
</html>

如您所见，我将先前检索到的令牌传递给请求主体。我还在头中传递了服务器密钥。Post请求成功。我收到了以下回复信息

但是如果请求成功，Javascript代码中的事件应该被触发

messaging.onMessage(function(payload){
            //I am expecting to trigger this event when I push the message using the REST client
            alert('Message ' + payload)
        })

但是，它没有被触发。实际上，它应该在post请求成功后触发。我的代码有什么问题或遗漏了什么？

您如何为您的web应用提供服务？必须通过httpS提供服务，否则ServiceWorker/消息将无法工作

看看开发者控制台（Chrome）->应用程序->服务人员，你的软件应该出现在这里

编辑：

为了进行测试，您还可以将项目上载到firebase主机中。包括一个免费的ssl证书。为此，请安装firebase cli（通过）：

然后，首先运行login命令登录到您的google帐户：

firebase login

“init”是一个新项目（如

npm init

）：

然后部署就像键入一样简单

firebase deploy

查看更多详细信息。

本地测试时无需使用https。只是：>很好用。如果将站点部署到域（而不是本地主机），则必须是https才能让firebase service worker工作

只有当窗口最小化/未聚焦时，您才会收到通知

若窗口处于焦点位置，将触发Direct onmessage事件

请尝试以下JSON帖子：

下面是firebase serviceworker内部处理的推送（如果您使用firebase托管），您不需要在软件中使用setBackgroundMessageHandler来处理它

{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png"
  },
  "to": "ecce7xlo9CA:APA91bEXPT-NCnl9evVE....",
  "priority": "high"
}

{
  "data":{
    "id": 1,
    "missedRequests": 5,
    "addAnyDataHere": 123
  },
  "to": "ecce7xlo9CA:APA91bEXPT-NCnl9evVE....",
  "priority": "high"
}

以下内容不会在内部处理，您需要在软件中设置BackgroundMessageHandler

{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png"
  },
  "to": "ecce7xlo9CA:APA91bEXPT-NCnl9evVE....",
  "priority": "high"
}

{
  "data":{
    "id": 1,
    "missedRequests": 5,
    "addAnyDataHere": 123
  },
  "to": "ecce7xlo9CA:APA91bEXPT-NCnl9evVE....",
  "priority": "high"
}

现在，它是通过http的。但是本地主机。它应该会起作用。我将尝试在localhost上伪造https并重试。您好。谢谢你的建议。我无法为本地主机安装ssl。所以我用Pusher（）代替。甚至更好。如果它解决了你的问题，请考虑把它标记为答案：

{
  "data":{
    "id": 1,
    "missedRequests": 5,
    "addAnyDataHere": 123
  },
  "to": "ecce7xlo9CA:APA91bEXPT-NCnl9evVE....",
  "priority": "high"
}