Add “badge notification” for progressive web application (PWA)

Adding Badge Notifications to Your Progressive Web App

Badge notifications, those small numbers that appear on app icons, are a powerful way to grab users’ attention and encourage them to engage with your PWA. This guide will walk you through the process of implementing badge notifications.

Understanding the Concepts

Web Push API

The foundation for badge notifications lies in the Web Push API, a technology that enables your PWA to send push messages to users’ devices even when the app isn’t running. These messages can be text-based, or contain a payload to trigger other actions, including updating the badge count.

Service Workers

Service workers act as intermediaries between your PWA and the user’s browser. They handle push message subscriptions, manage background tasks, and enable features like offline functionality. To use badge notifications, you’ll need to register and interact with a service worker in your PWA.

Implementation Steps

1. Setting Up Your Service Worker

Start by creating a service worker file, typically named “sw.js.” This file will contain the logic for managing push subscriptions and badge updates.

// sw.js
self.addEventListener('push', function(event) {
  const payload = event.data.json();
  console.log('Received push notification:', payload);
  self.registration.showNotification('New Message', {
    body: payload.message,
    badge: '/path/to/your/badge.png' 
  });
  // ... other logic to update badge count
});

In this example, we listen for push events, extract the payload, and use `showNotification` to display the message. The `badge` property specifies an image to use for the badge.

2. Registering the Service Worker

From your main HTML file, register the service worker using JavaScript.

// index.html
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./sw.js')
    .then(registration => {
      console.log('Service Worker registered:', registration);
      // ...
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

3. Requesting Push Notifications

Provide a mechanism for users to opt-in to receive push notifications. You’ll need to request permission to send them.

// index.html
function requestNotifications() {
  if ('Notification' in window) {
    Notification.requestPermission().then(function (result) {
      if (result === 'granted') {
        console.log('Notification permission granted.');
        // ... proceed to subscribe to push notifications
      } else {
        console.log('Notification permission denied.');
      }
    });
  }
}

4. Subscribing to Push Notifications

If permission is granted, use the Push API to subscribe the user to receive push notifications.

// index.html
function subscribeToPushNotifications() {
  navigator.serviceWorker.ready.then(registration => {
    registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: 'YOUR_VAPID_PUBLIC_KEY' // replace with your key
    })
    .then(subscription => {
      console.log('Push subscription successful:', subscription);
      // ... send subscription endpoint to your server
    })
    .catch(error => {
      console.error('Push subscription failed:', error);
    });
  });
}

5. Managing the Badge Count

When new content arrives, use the `showNotification` method in your service worker to update the badge count.

// sw.js
// ...
self.addEventListener('push', function(event) {
  const payload = event.data.json();
  // ...
  self.registration.showNotification('New Message', {
    body: payload.message,
    badge: '/path/to/your/badge.png',
    data: { count: 1 }
  });
});

The `data` property in the `showNotification` object is used to store additional information. This can be retrieved later when updating the badge count.

6. Handling Badge Updates in the Browser

In your main HTML file, listen for push notifications and update the badge count accordingly.

// index.html
navigator.serviceWorker.addEventListener('notificationclick', function(event) {
  console.log('Notification clicked:', event);
  event.notification.close(); // close the notification
  const count = event.notification.data.count;
  // ... update UI elements based on 'count'
  updateBadgeCount(count);
});

Example: Simple Counter App

HTML

  


  Enable Notifications
  
0

  
  

Service Worker

// sw.js
// ... (service worker code from previous steps)

This example demonstrates how to use the `showNotification` method to trigger a badge update and how to handle it in the main browser window. It also includes a simple UI element (`#badge`) to display the updated count.

Important Considerations

• User Privacy: Be transparent with your users about how you are using push notifications and badge updates.
• Push Subscription Handling: Implement a system for storing and retrieving push subscription data on your server.
• Cross-Browser Compatibility: Ensure that your implementation works across different browsers, as support for features like badges can vary.

Conclusion

Adding badge notifications to your PWA is a great way to improve user engagement and bring your app closer to native app functionality. By understanding the concepts and implementing the steps outlined above, you can leverage the power of the Web Push API and service workers to enhance your PWA with a valuable feature.