Firebase Push Notification sent, but onMessage() not firing

Question

I am sending a push notification from Postman.

I've got the Authorization and Content-Type headers set and my Body looks like this:

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

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

}

When I submit the post request, I get the following JSON response:

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

So, it looks like it was sent successfully, but it seems like the notification isn't actually fired.

I'm following this tutorial: https://youtu.be/BsCBCudx58g?t=337 And so far everything is working up until I get to reading the notification with the onMessage() function.

My Service Worker looks like this:

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

and my main.js looks like this:

// 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);
});

});

I'm testing in Chrome.

EDIT

When I am not on the tab where my web application is, I do get a notification when I submit from Postman. It just pops up and says "This site has been updated in the background." But it doesn't have my message/title/icon.

Answer 1

Although the question is a bit old and the OP already answered it in a comment, I would add this answer in case it helps:

• The onMessage event is only triggered only when your website tab is open and selected (active) so you can handle the incoming notification the way you desire.
• But if the the tab is not active then the browser handles the incoming notification and the onMessage event is not triggered.

Answer 2

The messaging.setBackgroundMessageHandler(function(payload) will be triggered when the application is on background.