firebase cloud messaging: setBackgroundMessageHandler not called

Question

I am prototyping browser push notifications with FCM. I just copied the example code from the quickstart (https://github.com/firebase/quickstart-js/tree/master/messaging). Messages are recieved and displayed as they should be. But when I try to modify the message in the Service Worker (messaging.setBackgroundMessageHandler) nothing happens. The service worker is called, and if I implement an event listener in that service worker for the push notifications, it catches the event. But the method setBackgroundMessageHandler is never called. I am trying this on Chrome 54.

Any ideas what I need to do to customize the message in the service worker?

Thank you very much!

score 51 · Answer 1 · answered Nov 07 '16 at 17:44

51

For anyone experiencing the same problem, here is the answer: https://github.com/firebase/quickstart-js/issues/71

short summary: do not include a "notification" element in your json message.

answered Nov 07 '16 at 17:44

Mathias

1,076
1
9
10

2

This saved my life. I was literally going `crazier` trying to understand why my handler was not being called. – Phillip Stack Nov 28 '16 at 18:53
https://github.com/firebase/firebase-js-sdk/blob/master/packages/messaging/src/controllers/sw-controller.ts – Henry Feb 12 '18 at 18:54
8

If I remove the "notification" then it supports fro web app. But it doesn't support for mobile Android and IOS. Any solution? – acmsohail Apr 17 '18 at 08:51
Same problem as @acmsohail. – Khurram Nov 12 '18 at 18:44
@acmsohail did you find any solution? – Adnan Dec 20 '18 at 17:56
@Adnan not yet. – acmsohail Dec 30 '18 at 09:00
```setBackgroundMessageHandler``` and ```self.addEventListener('notificationclick')``` not working for firefox – kva Aug 01 '19 at 09:07
I posted an answer above to work around this issue on web while maintaining support for native apps – Titan Feb 17 '20 at 22:58

score 10 · Answer 2 · edited Aug 24 '21 at 15:16

This is a solution that worked for me in a webapp. It displays the notification with title and body text along with an image and handles the user click.

firebase-messaging-sw.js

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

// Initialize Firebase
var config = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DB_URL',
  projectId: 'YOUR_PROJ_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_SENDER_ID',
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
  console.log('Handling background message ', payload);

  return self.registration.showNotification(payload.data.title, {
    body: payload.data.body,
    icon: payload.data.icon,
    tag: payload.data.tag,
    data: payload.data.link,
  });
});

self.addEventListener('notificationclick', function (event) {
  event.notification.close();
  event.waitUntil(self.clients.openWindow(event.notification.data));
});

JSON Message

{
  "message": {
    "token": "YOUR_TARGET_APP_TOKEN",
    "data": {
      "title": "FCM Message",
      "body": "This is an FCM Message",
      "icon": "https://shortcut-test2.s3.amazonaws.com/uploads/role_image/attachment/10461/thumb_image.jpg",
      "link": "https://yourapp.com/somewhere"
    }
  }
}

Two years later they it still has this behaviour, you saved my life — SRR, Apr 05 '20 at 08:47
Such JSON Message is invalid for for the **Legacy HTTP API**. — andreszs, Dec 12 '22 at 20:59

Titan · Answer 3 · 2020-02-17T23:50:29.790

As mentioned by others, including notification in the payload stops it working on the web JS SDK, however you need it present for it to work in native apps.

The workaround I found for the web was to use the web browser native EH push to handle the event manually:

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onpush

  self.addEventListener('notificationclick', function(event) {
    console.log('SW: Clicked notification', event)

    let data = event.notification.data

    event.notification.close()

    self.clients.openWindow(event.notification.data.link)
  })

  self.addEventListener('push', event => {
    let data = {}

    if (event.data) {
      data = event.data.json()
    }

    console.log('SW: Push received', data)

    if (data.notification && data.notification.title) {
      self.registration.showNotification(data.notification.title, {
        body: data.notification.body,
        icon: 'https://example.com/img/icons/icon-144x144.png',
        data
      })
    } else {
      console.log('SW: No notification payload, not showing notification')
    }
  })

For me neither messaging.setBackgroundMessageHandler() nor messaging.onMessage() was getting called. With your workaround I finally got console messages upon receiving notification — kapil pandey, Jun 09 '20 at 06:29

score 1 · Answer 4 · answered Nov 07 '16 at 11:16

When you try to send a push message are you doing it while your app is on focus or not? Because from the documentation, it says that setBackgroundMessageHandler is only called when the Web app is closed or not in browser focus.

Based on the example code from the quickstart (https://github.com/firebase/quickstart-js/tree/master/messaging).

If your app is in focus: the push message is received via messaging.onMessage() on the index.html
If your app does not have focus : the push message is received via setBackgroundMessageHandler() on teh service worker file.

Sorry. Forgot to mention this: on focus it works well and onMessage method is called and I can do what I want with the message. When the page has no focus, the notification is displayed but I cannot customize it within the setBackgroundMessageHandler method as it is never called. — Mathias, Nov 07 '16 at 11:24

score 0 · Answer 5 · answered Mar 06 '23 at 06:49

setBackgroundMessageHandler will be called always in both ios and android In iOS, if app state is quit or killed It is refreshed after few minutes. Make sure to send content_available : true in the payload

{
     "registration_ids":["token"],
     "collapse_key" : "packageName",
     "notification" : {
         "body" : "Body of Your Notification",
         "title": "Title of Your Notification",
         "sound": "default"
     },
     "priority": "high",
     "content_available": true, // This is compulsory for background handler
     "data" : {
         "body" : "Body of Your Notification in Data",
         "title": "Title of Your Notification in Title",
         "badge": 89
     }
}

score 0 · Answer 6 · answered Apr 28 '23 at 06:51

0

messaging().setBackgroundMessageHandler(async remoteMessage => {
       console.log('Message handled in the background!', remoteMessage);
          });

This one fixed mine issue.

answered Apr 28 '23 at 06:51

Dev Gaud

676
6
10

firebase cloud messaging: setBackgroundMessageHandler not called

6 Answers6

Linked