setBackgroundMessageHandler showing empty title & body

[royalpranjal]

I am working on the push notifications for my web project. I am able to receive notifications properly when the window is in focus (via onmessage) but on handling when the window is not in focus, I am getting title as "title" & the body as "body". Here is my function in firebase-messagin-sw.js.

messaging.setBackgroundMessageHandler(function (payload) {
    const options = {
         body: "You have a new booking.",
         icon: "/static/vendor/ic_logo.png"
    };
   const title = "my web project";
   self.registration.showNotification(title, options);
});

Note that my firebase-messagin-sw.js is not in root. It's in my static folder but I am registering it as navigator.serviceWorker.register('/static/fcm/firebase-messaging-sw.js') which is working fine. It's just that the backgroundMessageHandler is not working properly.

@gauntface

[gauntface]

Have you tried unregistering your service worker so you know it's getting the latest one? Can you provide an link to your project?

[gauntface]

*Also - you should be returning the self.registration.showNotificaiton promise

[royalpranjal]

Yes, I tried un-registering & registering the service worker again. I am using a library fcm-django to fire notifications from my django server. On debugging, I realised that that the library is somewhere overriding the setBackgroundMessageHandler method. Is it the correct behaviour to override this method? I mean should it be permissible as there is no means of accessing payload then!

[gauntface]

Can you provide a link to your project? It's difficult to understand why anything would be going wrong given your sample card explicitly sets a title and body string.

The only thing that will make this fail is if you send an FCM request with a "notification" body, in which case the SDK will generate the notification for you, instead you should only send a "data" body.

[royalpranjal]

Sorry, cannot share the actual project (confidentiality agreement reasons) but I can tell you what the actual code is like. The library I am using is fcm-django. I have a manual model instead of FCMDevice (as in the library). Here's the snippet from the library

from fcm_django.models import FCMDevice

device = FCMDevice.objects.all().first()

device.send_message(title="Title", body="body")

When I am firing this message from my server & if the window is not in focus (of the person to which this notification is meant for), the setBackgroundMessageHandler in my service-worker JS file is overridden (unexpected behaviour) On the other hand, if the window is in focus, I am seeing the custom notification that I am displaying in onmessage (expected behaviour)

[gauntface]

• Is setBackgroundMessageHandler called at all?
• Is the fcm-django code sending a "notification" payload, if so this will create the notification for you and you can't do anything / setBackgroundMessageHandler will not be called.

[royalpranjal]

• . Yes, the setBackgroundMessageHandler is called but my method is overridden by that of the library.
• . Yes, the fcm-django is sending a payload, perhaps that is why my method is overridden. Got the solution now. Cheers

[gauntface]

For further context in case anyone reads this.

The setBackgroundMessageHandler isn't "overriden". If you make an API call to FCM's API and send JSON similar to:

{
    "notification: {
        "title": "title",
        "body": "body"
    }
}

The FCM SDK will look for the "notification" and treat it as a push message it should handle (i.e. you are telling the SDK to generate the notification for you). In this case setBackgroundMessageHandler() is never called.

If you send a data payload, the setBackgroundMessageHandler() function will be called. For completeness, you'd be sending a payload like:

{
    "data": {
        "key": "value"
    }
}