Firebase雲消息傳遞/使用JavaScript將通知推送到Web平台未收到消息

Question

現在，我正在開發一個需要使用實時通知功能的Web應用程序。 我正在使用Google Firebase的Cloud Messaging服務。 我可以成功注冊服務並使用JavaScript檢索令牌值。 但是，當我從REST Client推送消息時，我的平台沒有觸發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 （描述）提供，否則ServiceWorker /消息系統將無法工作。

看一下開發者控制台（Chrome）->應用程序->服務工作者，您的軟件應該出現在這里。

編輯：

為了進行測試，您還可以將項目上傳到Firebase托管中。 有一個免費的SSL證書。 包括在內。 為此，請安裝firebase cli（通過npm ）：

npm install -g firebase-tools

然后，首先運行login命令登錄到您的Google帳戶：

firebase login

然后“初始化”一個新項目（例如npm init ）：

firebase init

然后部署就像輸入一樣容易

firebase deploy

在這里查看更多詳細信息。

Answer 2

在本地測試時，無需使用https。 只是http：// localhost ：<< port >>可以正常工作。 如果你到一個域（非本地主機）部署你的網站，那么它必須是http s到獲得火力點服務人員的工作。

僅當窗口最小化/未聚焦時，您才會收到通知。
如果窗口處於焦點位置，則將直接觸發onmessage事件。
請嘗試以下JSON帖子：

在以下情況下，firebase服務工作人員在內部處理了推送（如果您使用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 個解決方案

解決方案1
1 2018-08-09 12:14:22

解決方案2
0 2018-08-21 23:52:11

Firebase雲消息傳遞/使用JavaScript將通知推送到Web平台未收到消息

問題描述

2 個解決方案

解決方案1 1 2018-08-09 12:14:22

解決方案2 0 2018-08-21 23:52:11

解決方案1
1 2018-08-09 12:14:22

解決方案2
0 2018-08-21 23:52:11