Question

现在，我正在开发一个需要使用实时通知功能的Web应用程序。我正在使用Google Firebase的Cloud Messaging服务。我可以成功注册服务并使用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>

我在代码中注释掉以突出显示我期望得到的结果。我可以检索在代码中注释过的令牌。当我获得令牌时，我像这样从REST客户端推送消息。

我的请求正文是这样的

{
    "to" : "dJA57nVCZ7A:APA91bFFaYODxZQ4tbyy6RupRvH-jhmM1xh8F3iBQ1BWwdnvHA-dbB50cY1OyYNLpNhZLIKZm7Aqs4nTnQDsd2sExvNIglAeMSw3VLDXGjgaeqBEYFgz6PqbOJIS0Qki6m9XQ931H1xt",
    "notification" : {
        "body" : "SOMETHING",
        "title" : "SOMETHING"
    },
    "data" : {
      "message" : "This is data message"
    }
}

如您所见，我将先前获取的令牌传递给请求正文。我还在标头中传递了服务器密钥。发布请求成功。我收到以下响应消息。

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

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

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

Answer 1

您如何服务您的Web应用程序？它必须通过http S (Description)来提供，否则ServiceWorker /消息系统将无法工作。

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

编辑：

对于测试，您还可以将您的项目上传到Firebase托管中。有一个免费的SSL证书。包括在内。为此，请安装firebase cli（通过npm）：

npm install -g firebase-tools

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

firebase login

并“初始化”一个新项目（例如npm init）：

firebase init

部署就像输入一样容易

firebase deploy

请查看here，了解更多详细信息。

Answer 2

在本地测试时，您无需使用https。只是http://localhost：<< port >>可以正常工作。如果您将网站部署到域（而不是本地主机）上，则必须使用http s 才能使Firebase Service Worker工作。

仅当窗口最小化/未聚焦时，您才会收到通知。
如果窗口处于焦点位置，则会直接触发onmessage事件。
尝试以下JSON帖子：

在内部由Firebase Serviceworker处理的下推操作（如果您使用Firebase托管），则无需使用sw中的setBackgroundMessageHandler对其进行处理。

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

下面将不会在内部处理，您需要在sw中设置setBackgroundMessageHandler。

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

Firebase云消息传递/使用JavaScript将通知推送到Web平台未收到消息

2 个答案: