How Do Web Push Notifications Work?
Learn how web push notifications work end to end: subscriptions, push services, VAPID, and Service Worker delivery.
Expected Interview Answer
Web push notifications work by having the browser generate a unique subscription endpoint tied to a push service, which the app’s server later calls with an encrypted payload to trigger a notification, delivered and displayed by the browser’s Service Worker even if the site is not open.
The flow starts with the app requesting notification permission and calling `registration.pushManager.subscribe()`, which returns a `PushSubscription` containing an endpoint URL (owned by a browser-vendor push service like FCM or Mozilla’s push service) and encryption keys. The app sends that subscription to its own backend, which stores it against the user. To send a notification, the server encrypts a payload using the subscription’s public key following the Web Push protocol (VAPID for server identification) and POSTs it to the endpoint URL; the push service then relays it to the browser, which wakes the Service Worker and fires a `push` event even if no tab for the site is open. Inside that event, the Service Worker calls `self.registration.showNotification()` to actually display the notification, and a separate `notificationclick` handler defines what happens when the user taps it, like focusing or opening a specific URL. Because the push service is a third party the browser vendor controls, the server never talks to the browser directly — it always goes through that intermediary, and payloads must be end-to-end encrypted since the push service should not be able to read them.
- Re-engages users without requiring the site to be open in a tab
- Encrypted payloads mean the push service provider cannot read notification content
- Works across platforms via the standardized Web Push protocol, not a proprietary SDK
- Service Worker lifecycle means notifications can be received and shown reliably in the background
AI Mentor Explanation
Web push is like a stadium giving each fan a private pigeon-hole address at the post office when they sign up for score alerts, instead of the stadium calling each fan directly. When there is a wicket, the stadium sends a sealed, coded note to that pigeon-hole; the post office delivers it to the fan’s home mailbox, which then opens the sealed note and displays the alert on the fan’s door — even if the fan is not home. The post office never reads the sealed contents itself. That subscribe-through-a-relay, deliver-encrypted-to-the-device model is exactly how web push notifications work.
Step-by-Step Explanation
Step 1
Request permission and subscribe
The app asks for notification permission and calls `pushManager.subscribe()`, returning an endpoint plus encryption keys.
Step 2
Send subscription to the server
The client posts the `PushSubscription` object to the app’s backend, which stores it against the user.
Step 3
Server sends an encrypted push
The backend encrypts a payload and POSTs it, signed with VAPID keys, to the subscription’s endpoint (the browser vendor’s push service).
Step 4
Service Worker receives and shows it
The push service relays the message; the Service Worker’s `push` event fires and calls `showNotification()`, even if no tab is open.
What Interviewer Expects
- Understanding of the subscription flow and the role of the third-party push service
- Ability to explain that the Service Worker (not the page) receives and displays pushes
- Awareness of payload encryption and VAPID for server authentication
- Mention that notifications work even with the site fully closed
Common Mistakes
- Assuming the app server talks directly to the browser instead of via a push service
- Forgetting the `push` event must be handled in the Service Worker, not the page script
- Sending unencrypted payloads, which the Web Push protocol does not allow
- Not implementing `notificationclick` to handle user interaction with the notification
Best Answer (HR Friendly)
“Web push notifications work by the browser giving your app a special address it can send alerts to, even when your site is not open. When something happens, the server sends an encrypted message to that address, and the browser’s background process wakes up just long enough to show the notification on the person’s device.”
Code Example
// In the page: subscribe to push
async function subscribeToPush() {
const reg = await navigator.serviceWorker.ready
const subscription = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: VAPID_PUBLIC_KEY,
})
await fetch('/api/push/subscribe', {
method: 'POST',
body: JSON.stringify(subscription),
})
}
// In the Service Worker: show and handle the notification
self.addEventListener('push', (event) => {
const data = event.data.json()
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: '/icon.png',
})
)
})
self.addEventListener('notificationclick', (event) => {
event.notification.close()
event.waitUntil(clients.openWindow('/inbox'))
})Follow-up Questions
- What is VAPID and why does the push service require it?
- Why must push payloads be encrypted before reaching the push service?
- How would you handle a subscription that has expired or been revoked?
- How do web push notifications differ from native mobile push (APNs/FCM)?
MCQ Practice
1. What actually receives and displays a web push notification while the site tab is closed?
The Service Worker persists independently of open tabs and handles the `push` event to show the notification.
2. Who does the app server actually send the push payload to?
Push payloads always route through the third-party push service tied to the subscription endpoint.
3. Why must Web Push payloads be encrypted?
End-to-end encryption keeps the third-party push service from reading notification contents.
Flash Cards
What returns the push subscription endpoint? — `pushManager.subscribe()`, called from the page against the Service Worker registration.
Who relays the push from server to browser? — A third-party push service run by the browser vendor.
What handles a push event while the tab is closed? — The Service Worker’s `push` event listener.
What authenticates the server to the push service? — VAPID keys.