Firebase messaging.setBackgroundMessageHandler not receiving messages

问题

I am trying Firebase Cloud Messaging. It's awesome and all, but I am having the hardest time getting it to work for me.

The problem I am facing is with the service worker, here is my firebase-messaging-sw.js :

console.log('Service worker is loaded!');

self.addEventListener('install', function(event) {
    console.log('Service Worker is being installed.');
});

self.addEventListener('activate', function(event) {
    console.log('Service Worker is being activated.');
});

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

firebase.initializeApp({
    'messagingSenderId': ' ... '
});

var messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload){
    console.log('Received background message: ', payload);

    return self.registration.showNotification('Title', {'body': 'Body'});
});

When I send a message (I am using PHP-FCM BTW) the message gets received as expected in the browser when the page is under focus, through onMessage( ... ), but never when the page isn't under focus or the browser is closed; the service worker just doesn't receive the message!

The line "Received background message: ... " never shows; meaning that the message handler wasn't registered at all!

Here's a sample message response:

{
  "from": " ... ",
  "collapse_key": "do_not_collapse",
  "data": {
    "id": "111"
  },
  "priority": "high",
  "notification": {
    "title": "Hi there",
    "body": "Message body",
    "badge": "1",
    "color": "#ffffff"
  }
}

What could be the issue here? It's driving me crazy.

回答1:

No it is registered but not invoked because of the way you choose to structure your notification. Referring to the FCM docs:

https://firebase.google.com/docs/cloud-messaging/js/receive

"Note: If you set notification fields in your HTTP or XMPP send request, those values take precedence over any values specified in the service worker."

So, you have

{
    "from": " ... ",
    "collapse_key": "do_not_collapse",
    "data": {
      "id": "111"
    },
    "priority": "high",
    "notification": {
      "title": "Hi there",
      "body": "Message body",
      "badge": "1",
      "color": "#ffffff"
    }
}

and this structure never triggers the BackgroundMessageHandler. Because sending data this way, simply overrides your variables. If you want to trigger it you need to send your notification like this:

{
    "from": " ... ",
    "collapse_key": "do_not_collapse",
    "priority": "high",
    "data": {
      "id": "111",
      "notification": {
        "title": "Hi there",
        "body": "Message body",
        "badge": "1",
        "color": "#ffffff"
      }
    },
    "to": "topic",
}

回答2:

I'm not sure that you can define the imports roots in the middle of your javascript, I think those calls need to be at the top.

Also the badge value and color are not supported by the FCM SDK. If you want to set the badge you can use the background message handler to show a notification use the normal APi and define the badge through that APi

来源：https://stackoverflow.com/questions/41805933/firebase-messaging-setbackgroundmessagehandler-not-receiving-messages

标签

javascript

firebase-cloud-messaging

service-worker