javascript - Firebase Push Notification sent, but onMessage() not firing - Stack Overflow

admin管理员组

文章数量:1307120

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: 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('.12.1/firebase-app.js');
importScripts('.12.1/firebase-messaging.js');

// Initialize Firebase
var config = {
    apiKey: "AIzaSyDRXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXX.firebaseapp",
    databaseURL: "",
    projectId: "XXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXX.appspot",
    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",
    databaseURL: "",
    projectId: "XXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXX.appspot",
    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.

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./firebasejs/4.12.1/firebase-app.js');
importScripts('https://www.gstatic./firebasejs/4.12.1/firebase-messaging.js');

// Initialize Firebase
var config = {
    apiKey: "AIzaSyDRXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXX.firebaseapp.",
    databaseURL: "https://XXXXXXXXXX.firebaseio.",
    projectId: "XXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXX.appspot.",
    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.",
    databaseURL: "https://XXXXXXXXXXXXXX.firebaseio.",
    projectId: "XXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXX.appspot.",
    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.

• javascript
• firebase
• push-notification
• firebase-cloud-messaging
• postman

Share Improve this question Follow edited Apr 10, 2018 at 13:51 Frank van Puffelen 600k8585 gold badges889889 silver badges859859 bronze badges asked Apr 10, 2018 at 11:59 narfienarfie 49311 gold badge77 silver badges1616 bronze badges 2

• Funny thing.... after closing the tab pletely, both my issues were resolved. My notification is displayed correctly when tab is not open and the payload is being written to the console when the tab is open. – narfie Commented Apr 10, 2018 at 12:35
• I have the same issue – Jek Commented Jun 12, 2018 at 5:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Although the question is a bit old and the OP already answered it in a ment, 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 ining notification the way you desire.
• But if the the tab is not active then the browser handles the ining notification and the onMessage event is not triggered.

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

本文标签： javascriptFirebase Push Notification sentbut onMessage() not firingStack Overflow