The Push API is a powerful tool that allows web applications to receive messages pushed by a server, even when the app is not actively open in the browser or running on the device. This opens up possibilities for delivering notifications and content updates, leading to a more engaged audience.

Is it well supported?

The Push API is currently supported by Chrome (Desktop and Mobile), Firefox, Opera, and Edge (since version 17). However, it is not supported by Internet Explorer. Safari has its own implementation of push notifications.

Approximately 60% of desktop users have access to Push API supported browsers, making it a safe choice for implementing push notifications.

How it works

The Push API works by allowing a web app to register a Service Worker that listens for Push Events. When a user visits the web app, they can be prompted to allow notifications. If the user grants permission, the Service Worker receives a push event and can trigger a notification.

Getting the user’s permission

In order to use the Push API, you need to obtain the user’s permission to receive notifications. This involves several steps:

  1. Check if Service Workers are supported.
  2. Check if the Push API is supported.
  3. Register a Service Worker.
  4. Request permission from the user.
  5. Subscribe the user and get the PushSubscription object.
  6. Send the PushSubscription object to your server.

How the Server side works

On the server side, you need to handle client subscriptions and sending push messages.

To register a new client subscription, you need to create an HTTP POST endpoint that receives the PushSubscription object details in JSON format. You can then save this information to your database.

To send a push message to a client, you can fetch the subscriptions from your database and use the web-push library to handle sending the push message.

Receive a Push event

When a push event is triggered, your Service Worker can listen for the event and handle it accordingly. The data sent by the server can be accessed through the event.data object.

To display a notification, you can use the Notifications API within the push event listener in your Service Worker. You can customize the content and appearance of the notification.

By following these guidelines, you can take advantage of the Push API to engage your audience with push notifications and keep them updated with new content.