Firebase 推送通知已发送，但 onMessage() 未触发

Question

我正在发送来自 Postman 的推送通知。

我已经设置了 Authorization 和 Content-Type 标头，我的 Body 如下所示：

{
    "to" : "faecDTf47y4:APA91bEsGFDeKQtifs-XXXXXXXXXXXXXXXXXXXXXXXXXXX", 

    "notification": {
        "title": "Hello",
        "body": "World!",
        "icon": "/images/favicon.png"
  }

}

当我提交 post 请求时，我得到以下 JSON 响应：

{
    "multicast_id": XXXXXXXXXXXXX,
    "success": 1,
    "failure": 0,
    "canonical_ids": 0,
    "results": [
        {
            "message_id": "0:XXXXXXXXXXXXXXXXXXXXXXXX"
        }
    ]
}

因此，看起来它已成功发送，但似乎实际上并未触发通知。

我正在关注本教程：https : //youtu.be/BsCBCudx58g?t=337 到目前为止，一切都在进行中，直到我使用 onMessage() 函数阅读通知。

我的 Service Worker 如下所示：

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

// Initialize Firebase
var config = {
    apiKey: "AIzaSyDRXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXXXX.firebaseio.com",
    projectId: "XXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXXXXXX"
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

我的 main.js 看起来像这样：

// Initialize Firebase
var config = {
    apiKey: "AIzaSyDRXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXXXXXXXX.firebaseio.com",
    projectId: "XXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXXXXXXX"
};
firebase.initializeApp(config);

navigator.serviceWorker
.register('/site/serviceworker-firebase-messaging.js', { scope: '/site/' })
.then(function(registration) {

console.log("??? Firebase Service Worker Registered");
const messaging = firebase.messaging();
messaging.useServiceWorker(registration);
messaging.requestPermission()
.then(function() {
    console.log('Firebase has permission.');
    return messaging.getToken();
}).
then (function(token) {
    console.log('Firebase messaging Token', token);
})
.catch(function(err) {
    console.log('Firebase has encountered an error.', err);
});

messaging.onMessage(function(payload) {
    console.log('onMessage: ', payload);
});

});

我正在 Chrome 中测试。

编辑

当我不在 Web 应用程序所在的选项卡上时，当我从 Postman 提交时确实会收到通知。它只是弹出并说“此站点已在后台更新。” 但它没有我的消息/标题/图标。

Answer 1

虽然这个问题有点老了，而且 OP 已经在评论中回答了它，但我会添加这个答案以防万一：

• onMessage仅当您的网站选项卡打开并选择（活动）时才会触发该事件，因此您可以按照自己的方式处理传入的通知。
• 但是，如果该选项卡未处于活动状态，则浏览器会处理传入的通知并且onMessage不会触发该事件。