Building Progressive Web Applications/

...

/

Implementing Push Messages

Implementing Push Messages

Explore the steps to set up web push notifications on a website.

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.

Press + to interact
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:

Press + to interact
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 ...