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

【问题标题】：Firebase Push Notification sent, but onMessage() not firingFirebase 推送通知已发送，但 onMessage() 未触发
【发布时间】：2018-09-20 00:58:05
【问题描述】：

我正在从 Postman 发送推送通知。

我已经设置了 Authorization 和 Content-Type 标头，我的 Body 看起来像这样：

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

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

}

当我提交发布请求时，我收到以下 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 提交时收到通知。它只是弹出并说“此站点已在后台更新。”但它没有我的消息/标题/图标。

【问题讨论】：

有趣的事情......完全关闭标签后，我的两个问题都得到了解决。 My notification is displayed correctly when tab is not open and the payload is being written to the console when the tab is open.
我也有同样的问题

标签： javascript firebase push-notification firebase-cloud-messaging postman

【解决方案1】：

虽然这个问题有点老了，并且 OP 已经在评论中回答了它，但如果有帮助，我会添加这个答案：

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

【讨论】：

此建议对前台消息有帮助，谢谢。想补充一下，供使用Chrome的用户调试。不要使用同一个窗口，使用 Google firebase（用于触发器）打开 1 个窗口，并在前台运行 FCM 脚本的另一个窗口。

【解决方案2】：

messaging.setBackgroundMessageHandler(function(payload) 将在应用程序处于后台时触发。

【讨论】：