Web Push API: Engage Users When Your App is Closed
The Web Push API lets servers send messages to users even when your site is closed. A service worker receives these pushes, making it ideal for notifications. The main footgun: the subscription endpoint is a secret key that must be protected.
Why it exists
Web applications needed a way to deliver timely information without requiring the user to have the site open and active. The Push API brings the power of native app notifications to the web, enabling developers to re-engage users with asynchronous updates that provide real value.
The mental model
Think of it as a mailbox for your web app, managed by the browser. Your app gives your server a unique, secret address for this mailbox (the push subscription endpoint). The server can drop a message in the box at any time, and the browser's postal service (the service worker) gets notified to go pick it up, even if the user's "house" (the app) is dark.
How it works
The process requires an active service worker. First, your app requests permission from the user. If granted, the service worker calls PushManager.subscribe(). This returns a PushSubscription object containing a unique endpoint URL and encryption keys. This subscription is sent to and stored on your application server. To send a message, your server makes a request to that endpoint. The browser receives it, wakes the correct service worker, and fires a push event. Your onpush event handler then runs, allowing you to process the data and display a notification.
When to use it
Use this for time-sensitive, high-value updates that a user has opted into. Examples include breaking news alerts, new direct messages, or status updates on an e-commerce order. The goal is to bring users back to your app for a specific, valuable reason.
When not to use it
Do not use it for marketing, non-essential updates, or anything that might be considered spam, as this will cause users to revoke permissions. It is not a replacement for WebSockets for real-time communication when the app is already open. Be mindful of resource usage, especially battery drain, as waking the service worker consumes power. Some browsers impose quotas on pushes that don't result in a visible notification.
One canonical example
A user on a social media PWA enables notifications. The app's service worker subscribes and sends the unique endpoint to the server. Later, when another user mentions them, the server sends a push message to that endpoint. The browser receives it, wakes the service worker, which then calls showNotification() to display "User X mentioned you" on the user's device, even if the browser is closed.
Interview question
Why is protecting the PushSubscription endpoint crucial for Web Push API security?
- a.It acts as a unique, secret address that, if compromised, allows unauthorized parties to send messages to the user.Correct
- b.It stores the private keys required to decrypt the content of incoming push messages.
- c.It is used by the browser to authenticate the user to the push service.
- d.It contains sensitive user data like personal identifiers and payment information.
Why? this is the answer
The card states the endpoint is a "unique, secret address" for the user's "mailbox" and "must be protected." If this secret address is compromised, any party could send messages to the user. While the PushSubscription object includes encryption keys, the endpoint itself is the address, not the decryption key.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #web apis
- #service workers
- #notifications
- #pwa
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on web apis — each one lists the topics its interview covers.
See open roles