Web Push Notifications

Also Known As

TL;DR

Explanation

Web Push uses three components: Push API (browser API to subscribe), Web Push Protocol (RFC 8030 — standardised push delivery), and Service Worker (receives and displays notifications when the browser is closed). Flow: (1) user grants notification permission, (2) browser creates a push subscription (endpoint URL + encryption keys), (3) PHP backend stores the subscription, (4) PHP sends a push message to the subscription's endpoint via web-push library (minishlink/web-push), (5) push service delivers to browser, (6) service worker shows a notification. VAPID (Voluntary Application Server Identification) authenticates your server to the push service.

Common Misconception

Why It Matters

Common Mistakes

• Requesting notification permission immediately on page load — users deny unsolicited permission requests.
• Not handling push subscription expiry — subscriptions expire or become invalid; handle 410 Gone responses.
• No unsubscribe mechanism — users must be able to revoke permission.
• Sending too many notifications — notification fatigue causes users to revoke permission.

Code Examples

// Immediate permission request — high denial rate:
document.addEventListener('DOMContentLoaded', () => {
    Notification.requestPermission(); // Before user understands the value
    // 80%+ denial rate for unprompted permission requests
});

// Context-triggered permission request:
orderCompleteButton.addEventListener('click', async () => {
    await submitOrder();
    // Now user understands value:
    if (Notification.permission === 'default') {
        const perm = await Notification.requestPermission();
        if (perm === 'granted') await subscribeToNotifications();
    }
});

async function subscribeToNotifications() {
    const sw = await navigator.serviceWorker.ready;
    const sub = await sw.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: VAPID_PUBLIC_KEY,
    });
    await fetch('/api/push/subscribe', {
        method: 'POST', body: JSON.stringify(sub)
    });
}

References

• ↗ https://web.dev/articles/push-notifications-overview

Tags

Related Terms