Web push notifications are messages sent from a server to a user's browser through a push service run by the browser vendor. They appear as system notifications even if the website is not open, provided the user has granted permission.
Why it matters
They let sites re-engage visitors with order updates, alerts or new content, and they are one of the capabilities that make PWAs feel app-like. Two APIs cooperate: the Push API receives the message in a service worker, and the Notifications API displays it. The server authenticates using VAPID keys. Support varies by platform; Safari on iOS only allows web push for sites installed to the home screen.
Example
// in the page
const perm = await Notification.requestPermission();
if (perm === "granted") {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: PUBLIC_VAPID_KEY,
});
await fetch("/api/subscribe", { method: "POST", body: JSON.stringify(sub) });
}The server stores the subscription and later posts encrypted payloads to its endpoint.
Common mistakes
- Asking for permission immediately on page load; users tend to deny and a denial is hard to undo.
- Not removing subscriptions that return 404 or 410.
- Sending too often, which drives users to block the site.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.