Mastering Push Notifications: Handling Push Events and Displaying Alerts

Push Events

When a push message arrives, a push event is dispatched to the service worker. The event listener looks similar to other JavaScript event listeners.

<code>self.addEventListener('push', function(event) {
  if (event.data) {
    console.log('This push event has data: ', event.data.text());
  } else {
    console.log('This push event has no data.');
  }
});
</code>

The self object refers to the global scope of the service worker, analogous to window in the browser.

Event data can be accessed via event.data.text() , event.data.json() , event.data.blob() , or event.data.arrayBuffer() . Most developers use json() or text() .

The basic example does not show a notification and does not use event.waitUntil() . The waitUntil method keeps the service worker alive until the supplied promise resolves, which is required to display a notification before the promise finishes.

<code>self.addEventListener('push', function(event) {
  const promiseChain = self.registration.showNotification('Hello, World.');
  event.waitUntil(promiseChain);
});
</code>

A more complete example combines analytics tracking and a network request to fetch additional data, then shows a notification with the fetched title and message. Both promises are combined with Promise.all() and passed to event.waitUntil() so the worker stays alive until both tasks finish.

<code>self.addEventListener('push', function(event) {
  const analyticsPromise = pushReceivedTracking();
  const pushInfoPromise = fetch('/api/get-more-data')
    .then(response => response.json())
    .then(response => {
      const title = response.data.userName + ' says...';
      const message = response.data.message;
      return self.registration.showNotification(title, { body: message });
    });
  const promiseChain = Promise.all([analyticsPromise, pushInfoPromise]);
  event.waitUntil(promiseChain);
});
</code>

Displaying a Notification

The showNotification API is called on a ServiceWorkerRegistration with a title string and an options object.

<code>registration.showNotification(title, options);
</code>

Key visual options include body , icon , image , badge , vibrate , sound , and dir . Behavioral options include tag , data , requireInteraction , renotify , silent , and actions . The timestamp option sets the notification time.

Examples demonstrate simple title/body notifications, icon notifications, badge notifications, image notifications, action buttons, direction, vibration patterns, and timestamps. Images illustrate how different browsers render these options.

Best‑Practice Tips

Choose consistent icon colors and use monochrome icons for better cross‑platform appearance.

Test icon sizes; 128 × 128 px works on Android, while 24 × 24 px is suitable for desktop Chrome.

Be aware that action icons may not appear on some platforms.

Avoid repeating the website URL in the title or body because the browser already shows the origin.

Provide meaningful content so users understand why they received the notification.

Browser Support

Chrome and Firefox differ significantly in notification support. Feature detection can be done by checking for properties on Notification.prototype , e.g., 'actions' in Notification.prototype .