"notificationclick" not triggering in Chrome Foreground

[talha5389]

Browser: Chrome
Browser version: 70.0.3538.102
Operating system: Windows 10
Operating system version: v1803
firebase-app.js: 5.5.8
firebase-messaging.js: 5.5.8

What is the expected result?

When push notification is clicked, its event handler gets called irrespective of whether page is in foreground or background.

What happens instead of that?

I observed following behaviour with "notificationclick"

• Edge Foreground working
• Edge background working
• Firefox foreground working
• Firefox background working
• Chrome background working
• Chrome foreground not working

Details

I want to redirect user to a specific url on notification click. For that, I have implemented "notificationclick" event in service worker as below

self.addEventListener('notificationclick', function(event) {
  console.log('On notification click: ', event.notification);
  // event.notification.close();
  var redirectUrl = null;
  if(event.notification.data) {
    if(event.notification.data.FCM_MSG) { //seems that background notification shown by system sends data this way
      redirectUrl = event.notification.data.FCM_MSG.data ? event.notification.data.FCM_MSG.data.click_action : null
    } else {  //show manually using showNotification
      redirectUrl = event.notification.data ? event.notification.data.click_action : null
    }
  }
  if(redirectUrl) {
    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(clients.matchAll({
      type: "window"
    }).then(function(clientList) {
      for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == redirectUrl && 'focus' in client)
          return client.focus();
      }
      if (clients.openWindow) {
        const res = clients.openWindow(redirectUrl);
        return res;
      }
    }));
  }
});

I am showing notification using following code

               messaging.onMessage(function(payload) {
                    console.log('Message received. ', payload);
                    var notificationTitle = payload.data.title;
                    var notificationOptions = {
                      body: payload.data.message,
                      data: payload.data    //seems necessary for firefox foreground clicks
                    };
                    return swRegistration.showNotification(notificationTitle, notificationOptions);
                });

It doesn't seem to be getting called or printing any logs.

Things I have tried

• Making sure that service worker always gets properly updated
• Sending data only fcm payloads (payload without notification key). From How do I handle the notification click event using FCM? #194
• Using legacy fcm api
• Made sure that FCM payload has "click_action" field set in "data" property.
• Moving "notificationclick" event handler before and after importing firebase libraries as suggested in notificationclose fired but notificationclick dose not fire #102
• Adding "actions" while using "showNotification" method (looking at source of firebase, it seems to be ignoring all internal click handling to action buttons)
• Tried attaching debugger in service workers. It gets called when notification is triggered while current site is unfocused but doesn't get triggered while site is in foreground.

It only seems to be not working in Chrome when site is in foreground. I have tried Edge and firefox. After some tweaking I was able to get desired results on them but not able to found why it isn't working in chrome.

[kroikie]

@talha5389 you could use the click_action field in the web push notification payload.

[talha5389]

Doesn't seem to work. Also, I tried calling serviceWorkerRegistration.showToken(...) with hardcoded values without having to send Push notification from FCM. In that case, "notificationclick" does get called.

[talha5389]

For some reason, changing

 messaging.onMessage(function(payload) {
                    console.log('Message received. ', payload);

                        var notificationTitle = "Test";
                        var notificationOptions = {
                            body: "Body",
                        };
                        console.log(notificationTitle, notificationOptions);
                        swRegistration.showNotification(notificationTitle, notificationOptions);

                });

to

 messaging.onMessage(function(payload) {
                    console.log('Message received. ', payload);
                    setTimeout(() => {
                        var notificationTitle = "Test";
                        var notificationOptions = {
                            body: "Body",
                        };
                        console.log(notificationTitle, notificationOptions);
                        swRegistration.showNotification(notificationTitle, notificationOptions);
                    }, 100);
                });

causes notificationclick event to trigger correctly even in chrome foreground. I am not sure why adding timeout could cause it to work

[kroikie]

I'm not sure why that would help but glad you found a solution. This does look like an issue with browser notifications though and not FCM so I'll close this.

[sibelius]

@kroikie does firebase add FCM_MSG to notification payload? or should server add this to it?

is there any example of payload that works?

[dewraj]

I tried adding timeout but still notification click event did not trigger. Please can someone advice.

[dewraj]

here is code using in service worker to add notificationclick event...works fine in Edge.

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

[laurentbetti]

@talha5389 Not sure it will help, but have a look at this doc from google. In my case it was lifesaving!

[echofrost38]

@talha5389 I have got same issue, Btw when browser is closed, in other words app is on the background, i get push notification twice, If you have any experience and solve this problem, please help me. Thanks.

[Anamcoollzz]

in android chrome not working redirect to url, i don't know have to do. if you have any experience and solve this problem, please help me. Thanks.

[dmitryuk]

It has been resolved in this comment
#102 (comment)

[freerider7777]

Still not working correctly...
firebase/firebase-js-sdk#3271