CODEWITHSUNDEEP
firebasefirebase-cloud-messagingservice-worker
Mathias
Mathias

Reputation: 1106

firebase cloud messaging: setBackgroundMessageHandler not called

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!

Upvotes: 28

Views: 48689

Answers (6)

Dev Gaud
Dev Gaud

Reputation: 844

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

This one fixed mine issue.

Upvotes: 0

Manish Arora
Manish Arora

Reputation: 617

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
     }
}

Upvotes: 3

Sparm
Sparm

Reputation: 566

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"
    }
  }
}

Upvotes: 10

Titan
Titan

Reputation: 6080

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')
    }
  })

Upvotes: 3

Mathias
Mathias

Reputation: 1106

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.

Upvotes: 51

River Paul
River Paul

Reputation: 144

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.

Upvotes: 2

Related Questions