{
    "slug": "push_notifications_web",
    "term": "Web Push Notifications",
    "category": "mobile",
    "difficulty": "advanced",
    "short": "Sending notifications to users even when the browser is closed — using the Push API, Service Worker, and Web Push Protocol with VAPID authentication.",
    "long": "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.",
    "aliases": [
        "push API",
        "web notifications",
        "VAPID",
        "service worker push"
    ],
    "tags": [
        "mobile",
        "pwa",
        "php"
    ],
    "misconception": "Web Push requires a native app — web push works in all modern browsers including iOS Safari 16.4+ PWAs; the same PHP backend serves both web and mobile push notifications.",
    "why_it_matters": "Re-engaging users who have closed the browser requires push notifications — without them, the only re-engagement channel is email.",
    "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."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "progressive_web_apps",
        "service_worker_caching",
        "app_shell_architecture"
    ],
    "prerequisites": [
        "progressive_web_apps",
        "js_fetch_api",
        "php_queue_workers"
    ],
    "refs": [
        "https://web.dev/articles/push-notifications-overview"
    ],
    "bad_code": "// Immediate permission request — high denial rate:\ndocument.addEventListener('DOMContentLoaded', () => {\n    Notification.requestPermission(); // Before user understands the value\n    // 80%+ denial rate for unprompted permission requests\n});",
    "good_code": "// Context-triggered permission request:\norderCompleteButton.addEventListener('click', async () => {\n    await submitOrder();\n    // Now user understands value:\n    if (Notification.permission === 'default') {\n        const perm = await Notification.requestPermission();\n        if (perm === 'granted') await subscribeToNotifications();\n    }\n});\n\nasync function subscribeToNotifications() {\n    const sw = await navigator.serviceWorker.ready;\n    const sub = await sw.pushManager.subscribe({\n        userVisibleOnly: true,\n        applicationServerKey: VAPID_PUBLIC_KEY,\n    });\n    await fetch('/api/push/subscribe', {\n        method: 'POST', body: JSON.stringify(sub)\n    });\n}",
    "quick_fix": "Use the Push API + Service Worker for web push — generate VAPID keys, store subscriptions in PHP/MySQL, and send via web-push library on the PHP side",
    "severity": "medium",
    "effort": "high",
    "created": "2026-03-16",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/push_notifications_web",
        "html_url": "https://codeclaritylab.com/glossary/push_notifications_web",
        "json_url": "https://codeclaritylab.com/glossary/push_notifications_web.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Web Push Notifications](https://codeclaritylab.com/glossary/push_notifications_web) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/push_notifications_web"
            }
        }
    }
}