Web Push Notifications

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

• Service worker
• PWA
• Web app manifest
• Webhook

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.