Standalone Service Workers for Desktop Notifications

Standalone Service Workers and Desktop Notifications

Desktop notifications are a powerful tool for engaging users and delivering timely information, similar to phone notifications. With the help of service workers, it is now possible to receive desktop notifications without installing any apps on your PC.

What are Service Workers?

Service workers are JavaScript files that can control the web page/site's behavior even when the browser is closed. They run in the background, intercepting and modifying network requests, caching assets for offline access, and managing push notifications. Service workers are a key component of the Progressive Web Apps (PWA) technology.

Desktop Notifications

Desktop notifications are messages displayed on the user's desktop, allowing websites to engage users with timely information. They are similar to mobile notifications but are delivered through the web browser. Desktop notifications can be used to display alerts, updates, or reminders, enhancing user engagement and experience.

Enabling Desktop Notifications

To receive desktop notifications, the user must grant permission to the website. This can be done by using the Notification API in JavaScript. Here's an example of how to request permission:

if ('Notification' in window) {
  Notification.requestPermission().then(function(result) {
    if (result === 'granted') {
      // Now we can use the Notification API
    }
  });
}

Using Service Workers for Desktop Notifications

Service workers can be used to manage desktop notifications in the following ways:

• Caching notification payload for offline access
• Scheduling notifications to be displayed at specific times
• Handling notification interactions, such as button clicks

To use a service worker for managing desktop notifications, you need to register the service worker and listen for the push event. Here's an example:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      registration.pushManager.subscribe({
        userVisibleOnly: true
      }).then(function(subscription) {
        // Send the subscription.endpoint to your server and use it to send push notifications
      });
    });
  });
}

In the service-worker.js file, listen for the push event and display the notification:

self.addEventListener('push', function(event) {
  var title = 'New Notification';
  var body = 'You have a new notification';
  var options = {
    body: body,
    icon: 'icon.png',
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: '2'
    },
    actions: [
      {action: 'explore', title: 'Explore this notification'},
      {action: 'close', title: 'Close this notification'}
    ]
  };
  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

With the help of service workers, it is now possible to receive desktop notifications without installing any apps on your PC. Service workers can cache notification payloads, schedule notifications, and handle notification interactions. By using the Notification API and service workers together, you can create engaging web experiences that rival native apps.

References

• MDN Web Docs - Notifications API
  https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API

• MDN Web Docs - Service Workers
  https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

• Google Developers - Push Notifications on the Web
  https://developers.google.com/web/fundamentals/push-notifications