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!

Answer 1

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.

Answer 2

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