Javascript 已发送Firebase推送通知，但onMessage（）未触发

我正在从邮递员那里发送推送通知

我已经设置了授权和内容类型标题，我的正文如下所示：

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

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

}

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();

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

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

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

我将遵循本教程： 到目前为止，一切都在进行中，直到我开始使用onMessage（）函数阅读通知

我的服务人员如下所示：

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

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

}

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应用程序所在的选项卡上时，当我从邮递员处提交时，会收到通知。它只是弹出并说：“这个网站已经在后台更新了。”但是它没有我的消息/标题/图标。

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

• 只有当您的网站选项卡打开并被选中（处于活动状态）时，才会触发

  onMessage

  事件，以便您可以按所需方式处理传入的通知
• 但是，如果选项卡未处于活动状态，则浏览器将处理传入的通知，并且不会触发

  onMessage

  事件

---

消息传递.setBackgroundMessageHandler（功能（有效负载）将在应用程序处于后台时触发。

有趣的是……完全关闭选项卡后，我的两个问题都得到了解决。当选项卡未打开时，我的通知将正确显示，当选项卡打开时，有效负载将写入控制台。我也有同样的问题此建议帮助用于前台消息，谢谢。要为使用Chrome进行调试的用户添加。不要使用相同的窗口，打开一个带有Google firebase（用于触发器）的窗口，以及另一个在前台运行FCM脚本的窗口。