Search code examples
node.jsreactjsservice-workerweb-push

Push notification shows object Object even though i am setting the right value


I am trying to implement push notifications with react and nodejs using service workers. I am having problem while i am showing notification to the user.
Here is my service worker code:

self.addEventListener('push', async (event) => {
  const {
    type,
    title,
    body,
    data: { redirectUrl },
  } = event.data.json()
  if (type === 'NEW_MESSAGE') {
    try {
      // Get all opened windows that service worker controls.
      event.waitUntil(
        self.clients.matchAll().then((clients) => {
          // Get windows matching the url of the message's coming address.
          const filteredClients = clients.filter((client) => client.url.includes(redirectUrl))
          // If user's not on the same window as the message's coming address or if it window exists but it's, hidden send notification.
          if (
            filteredClients.length === 0 ||
            (filteredClients.length > 0 &&
              filteredClients.every((client) => client.visibilityState === 'hidden'))
          ) {
            self.registration.showNotification({
              title,
              options: { body },
            })
          }
        }),
      )
    } catch (error) {
      console.error('Error while fetching clients:', error.message)
    }
  }
})

self.addEventListener('notificationclick', (event) => {
  event.notification.close()
  console.log(event)
  if (event.action === 'NEW_MESSAGE') {
    event.waitUntil(
      self.clients.matchAll().then((clients) => {
        if (clients.openWindow) {
          clients
            .openWindow(event.notification.data.redirectUrl)
            .then((client) => (client ? client.focus() : null))
        }
      }),
    )
  }
})

When new notification comes from backend with a type of 'NEW_MESSAGE', i get the right values out of e.data and try to use them on showNotification function but it seems like something is not working out properly because notification looks like this even though event.data equals to this =>

type = 'NEW_MESSAGE',
title: 'New Message',
body: ,
data: { redirectUrl: }

Here is how notification looks:
notification


Thanks for your help in advance.


Solution

  • The problem was i assigned parameters in the wrong way. It should've been like this:

    self.registration.showNotification(title, { body })