{
    "slug": "progressive_web_apps",
    "term": "Progressive Web Apps (PWA)",
    "category": "mobile",
    "difficulty": "intermediate",
    "short": "Web applications that use service workers, a manifest, and HTTPS to provide app-like experiences — installable, offline-capable, and push notification-enabled.",
    "long": "A PWA requires three things: HTTPS (required for service workers), a web app manifest (JSON describing the app for installation), and a service worker (JavaScript that intercepts network requests and manages caching). Capabilities: install to home screen (A2HS), offline functionality, push notifications, background sync, and access to some device APIs. PWAs are progressively enhanced — they work as normal websites for browsers without service worker support. For PHP-rendered apps, PWA techniques add mobile app qualities without a native app.",
    "aliases": [
        "PWA",
        "service worker",
        "web app manifest",
        "installable web app"
    ],
    "tags": [
        "mobile",
        "frontend",
        "performance",
        "offline"
    ],
    "misconception": "PWAs require a JavaScript framework (React, Vue) — any website served over HTTPS can be a PWA; a PHP-rendered site with a manifest and service worker is a valid PWA.",
    "why_it_matters": "PWAs provide 60-70% of native app capabilities (offline, push, install) without app store distribution or native development — a significant DX and distribution advantage for web developers.",
    "common_mistakes": [
        "Service worker that caches everything including API responses without expiry — stale data shown indefinitely.",
        "Not providing a fallback offline page — a blank screen is worse than a 'You are offline' message.",
        "Manifest without all required icons — installation prompts fail silently without the required icon sizes.",
        "Registering the service worker without scoping it correctly — it may intercept requests it should not."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "service_worker_caching",
        "offline_first_design",
        "web_vitals",
        "push_notifications_web"
    ],
    "prerequisites": [
        "service_worker_caching",
        "pwa_installation",
        "web_vitals"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps"
    ],
    "bad_code": "// Service worker caches everything forever — stale data:\nself.addEventListener('fetch', event => {\n    event.respondWith(\n        caches.match(event.request).then(cached => {\n            return cached || fetch(event.request).then(response => {\n                caches.open('v1').then(cache => cache.put(event.request, response.clone()));\n                return response;\n            });\n        })\n    );\n    // API responses cached indefinitely — user sees week-old data\n});",
    "good_code": "// Cache-first for assets, network-first for API:\nself.addEventListener('fetch', event => {\n    const url = new URL(event.request.url);\n    if (url.pathname.startsWith('/api/')) {\n        // Network-first for API — fresh data, fallback to cache:\n        event.respondWith(fetch(event.request).catch(() => caches.match(event.request)));\n    } else {\n        // Cache-first for static assets:\n        event.respondWith(caches.match(event.request).then(c => c || fetch(event.request)));\n    }\n});",
    "quick_fix": "Start with a valid Web App Manifest, register a service worker with a network-first strategy for HTML and cache-first for static assets, then add an install prompt",
    "severity": "medium",
    "effort": "high",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/progressive_web_apps",
        "html_url": "https://codeclaritylab.com/glossary/progressive_web_apps",
        "json_url": "https://codeclaritylab.com/glossary/progressive_web_apps.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": "[Progressive Web Apps (PWA)](https://codeclaritylab.com/glossary/progressive_web_apps) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/progressive_web_apps"
            }
        }
    }
}