Search⌘ K
AI Features
Home
Courses
Building Progressive Web Applications

Implementing Push Messages

Explore how to implement push messages in progressive web applications by subscribing users for notifications, managing PushSubscription objects, and sending push messages securely from the server. Understand the role of VAPID keys, permission requests, and service worker event handling to deliver push notifications effectively.

We'll cover the following...

The Push API enables us to subscribe and unsubscribe users for push messages. It also handles receiving push messages sent from the server in the service worker.

Here are the main steps to set up web push messages on a website.

Subscribing the user

First, we need to subscribe the user to receive push messages on the client side. This process can be divided into further steps.

Requesting permission from the user

By requesting notification permission, we also implicitly request push notification permission.

Node.js
Notification.requestPermission(status => {
  if (status === 'granted') {
    subscribeUser();
  }
})

Getting the PushSubscription object

If permission is granted, we call serviceWorkerRegistration.pushManager.subscribe() to create a subscription object for that user.

Here’s the code to get the subscription object:

Node.js
let publicKey = "PUBLIC_VAPID_KEY";
function subscribeUser() {
  // get the active service worker registration
  navigator.serviceWorker.ready
    .then(registration => {
      // get existing subscriptions from the push manager
      return registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: publicVapidKey,
      });
    })
    .then(function(subscription) {
      storeSubscription(subscription);
    });
}

The subscribe() method returns the old subscription if it’s already subscribed. Otherwise, it creates a new subscription. It also takes a configuration object as an ...