Namespace notificationService

Notification Service

Helper functions for notification handling

import { notificationService } from '@oneblink/apps-react'
Copy

Service Worker

To display push notifications and allow them to be clicked to open the application, add the following JavaScript to your service worker (we recommend using offline-plugin):

Example

self.addEventListener('push', (event) => {
  console.log('push event', event)

  if (!event.data) {
    console.log('Received push event without any data', event)
    return
  }
  const notification = event.data.json()

  event.waitUntil(
    clients.matchAll().then((c) => {
      if (c.length === 0 || c.every((client) => !client.focused)) {
        // Show notification
        return self.registration.showNotification(
          notification.title,
          notification.options,
        )
      } else {
        console.log('Application is already open!')
      }
    }),
  )
})

self.addEventListener('notificationclick', (event) => {
  console.log('notification click event', event)

  const pathname =
    event.notification.data && event.notification.data.pathname
      ? event.notification.data.pathname
      : '/'

  event.waitUntil(
    clients.matchAll().then((clis) => {
      const client = clis[0]
      if (client === undefined) {
        // there are no visible windows. Open one.
        clients.openWindow(pathname)
      } else {
        client.navigate(pathname)
        client.focus()
      }

      return self.registration
        .getNotifications()
        .then((notifications) => {
          notifications.forEach((notification) => {
            notification.close()
          })
        })
    }),
  )
})
Copy