How Do Service Workers Handle Push Notifications?

If you find this story helpful, feel free to give it a like or share it with others who might enjoy it too!

---

I’m the night watchman at a hotel. My job is to ensure that all the guests get their important messages, no matter the hour. The hotel is like a web application, constantly buzzing with activity, and I, the night watchman, am akin to the Service Worker in JavaScript.

Each night, as the guests sleep, I stand vigilant in the lobby, ready to deliver any urgent telegrams that might come in. These telegrams are like push notifications, carrying vital information from the outside world. Just like a Service Worker operates in the background, independent of the web page, I work when the guests aren’t actively engaging with the hotel’s services.

When a telegram arrives, I don’t just barge into the guests’ rooms unannounced. I’ve got a special protocol to follow: I first determine the recipient by checking the room number, much like how a Service Worker listens for the ‘push’ event to ensure the notification is intended for the right web app. Once I’ve confirmed the recipient, I gently slip the telegram under the door, ensuring it’s noticed without causing a disturbance. This is similar to how I would use the Service Worker’s self.registration.showNotification() method to display a notification to the user.

Sometimes, guests might want to respond to these messages, just as users might click on a notification to take action. I’m prepared for this too, ready to facilitate communication or provide further assistance, just like a Service Worker can handle ‘notificationclick’ events to perform actions like opening a specific page of the web app.

And so, night after night, I continue my silent vigil, ensuring that no important telegram goes undelivered and every guest is kept informed, much like how a Service Worker diligently manages push notifications behind the scenes, enhancing the user experience without ever being directly seen.

---

First, to set the stage for handling push notifications, I need to register a Service Worker in my web application. This is like hiring the night watchman:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(registration => {
    console.log('Service Worker registered with scope:', registration.scope);
  }).catch(error => {
    console.error('Service Worker registration failed:', error);
  });
}

Now, in the service-worker.js file, I, the watchman, wait for push events, ready to deliver notifications:

self.addEventListener('push', event => {
  const data = event.data ? event.data.json() : {};
  const title = data.title || 'No title';
  const options = {
    body: data.body || 'No body content',
    icon: data.icon || '/default-icon.png',
    badge: data.badge || '/default-badge.png'
  };

  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

When a push notification arrives, I check the contents (like determining the recipient and content of a telegram) and use showNotification to deliver the message. This is akin to slipping the telegram under the guest’s door.

Additionally, I handle interactions with these notifications, such as when a guest responds to a telegram:

self.addEventListener('notificationclick', event => {
  event.notification.close(); // Close the notification

  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true }).then(clientList => {
      if (clientList.length > 0) {
        let client = clientList[0];
        return client.focus();
      }
      return clients.openWindow('/');
    })
  );
});

Here, when a user clicks on a notification, I (the night watchman) ensure they are directed to the appropriate page in the application, similar to guiding a guest to the hotel’s front desk for more information.

Key Takeaways:

• Service Workers act like a vigilant watchman, operating behind the scenes to manage push notifications and other background tasks.
• Push Notifications are handled through the ‘push’ event, where we can customize the notification content and display it using showNotification.
• User Interaction with notifications is managed by listening for ‘notificationclick’ events, allowing for seamless transitions back to the web application.