Firebase Push Notifications Click Does Not Work

I am having problems to implement notifications using firebase. The click event does not work. I am using the HTTP 1 version sending the bearer token. { 'message': { 'token':

Solution 1:

Turns out I was passing an entire URL to webpush.fcm_options.link = "https://google.com", all I had to do was to pass only the relative path like webpush.fcm_options.link = "/mypage".

So the request to send would be like this:

{"message":{"token":"8888****usertoken****8888","notification":{"title":"Background Message Title","body":"Background message body"},"webpush":{"fcm_options":{"link":"/mypage"}}}}

I don't see in the docs say it is only the relative path. It even states that HTTPS is required. I spent a few hours on this one, I hope it helps somebody else.

https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages#WebpushFcmOptions

Solution 2:

I was having the same issue. I added a notificationclick event handler. You can use the data param in the notification event to open a new tab or focus an already opened one.

The code you already have is fine, now adding the listener looks like this:

// messaging.onBackgroundMessage(...);function handleClick (event) {
  event.notification.close();
  // Open the url you set on notification.data
  clients.openWindow(event.notification.data.url)
}
self.addEventListener('notificationclick', handleClick);

This resources might be helpful

• similar question on SO
• showNotification
• notificationclick

Solution 3:

Notifications are working using legacy API but unfortunately clicking the notification still does nothing. This is my code for sending the notification.

var notification = {
  'title': title,
  'body': body,
  'icon': 'hourglass.png',
  'click_action': router.resolve(route).href
}
var payload = {
  'notification': notification,
  // 'webpush': {//   'fcm_options': {//     'link': '/' + router.resolve(route).href//   }// }
}
if(registrationIds.length == 1) {
  payload['to'] = registrationIds[0]
} elseif( registrationIds.length > 1){
  payload['registration_ids'] = registrationIds
}
returnnewPromise((resolve, reject) => {

  if (registrationIds.length) {
    fetch('https://fcm.googleapis.com/fcm/send', {
      'method': 'POST',
      'headers': {
        'Authorization': 'key=' + key,
        'Content-Type': 'application/json'
      },
      'body': JSON.stringify(payload)
    }).then(function(response) {
      resolve(true)
    }).catch(function(error) {
      console.error('sendNotification error', error);
      reject(false)
    })

  }
  else {
    console.log('This timer has no registered clients.')
    reject(false)

  }

})

Edit: I think most of my confusion stemmed from finding examples with the V1 API and mixing them up with the legacy API. I needed click_action instead of the fcm_options.link in the payload. I updated my code and is now working as intended.