← Lessons

quiz vs the machine

Gold1500

Frontend

The Push API Notifications

Receive server pushed messages and show notifications even when closed.

6 min read · core · beat Gold to climb

Engaging users when the tab is closed

The Push API lets a server send messages to a service worker even when the web app is not open. Combined with the Notifications API, it powers re engagement like chat alerts.

  • A user must grant notification permission first
  • The browser provides a push subscription with an endpoint and keys
  • The server sends an encrypted message to the push service endpoint
  • The service worker wakes on a push event and shows a notification

VAPID and identity

Servers authenticate to the push service using VAPID keys, a public and private pair. The public key is passed when subscribing so the push service can verify the sender.

The end to end flow

The subscription endpoint is unique per user per browser. Your server stores it, then sends payloads to it. The push service relays the message, waking the worker which calls showNotification.

Key idea

The Push API delivers server messages to a sleeping service worker through a push service, authenticated by VAPID keys, which then displays a notification.

Check yourself

Answer to earn rating on the learn ladder.

1. What must happen before a web app can show push notifications?

2. What role do VAPID keys play in the Push API?

3. What wakes the service worker when a message arrives?