EMZETT.
Login

Emzett Wiki

PWA: Manifest and installable web apps – basics

Properties1
tagsglossar, pwa, web

2 min read

PWA: Manifest and installable web apps – basics

In short: A progressive web app is a website that can be installed like an app: with manifest, service worker and HTTPS it gets an icon, full screen, offline capability and background services.

In more detail: PWAs combine web and app: one codebase, no app store needed, updates instantly. They are installable (home screen/desktop), partly work offline and can send notifications.

In Depth

The three ingredients

  1. HTTPS (except localhost).
  2. Web app manifest (manifest.webmanifest): name, icons, colours, start URL, display mode:
{
  "name": "Emzett", "short_name": "Emzett"
  "start_url": "/", "display": "standalone"
  "background_color": "#0b0b10", "theme_color": "#0b0b10"
  "icons": [{"src":"/icon-192.png","sizes":"192x192","type":"image/png"}
            {"src":"/icon-512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}]
}

In the HTML: <link rel="manifest" href="/manifest.webmanifest">. 3. Service worker: background script that can intercept requests, cache and deliver offline pages.

Service worker and caching

Typical strategies: cache first (static files), network first (current data, cache fallback), stale-while-revalidate (immediately old, anew in the background). Important: version the caches, delete old caches, update notice (“New version available”), do not cache sensitive data, do not blindly repeat POST requests. Tools: Workbox, framework plugins. Debug in the browser developer tools under Application.

Capabilities and limits

Possible: installation, offline use, push notifications (on iOS from an installed PWA), background sync, camera, location, file-system access, sharing. Limits: restrictions on iOS (storage limit, fewer APIs), no full access to device functions like native apps, discoverability without a store. Privacy: push and background sync need consent.

Checking and practice

Test with Lighthouse (PWA criteria), chrome://inspect, “Add to home screen”. Offer an offline fallback page, maskable icons, theme_color, screenshots in the manifest for the install dialog. Check updates: service worker updates take effect only after closing all tabs unless skipWaiting is set. Also read offline-first and background sync.

See also: Offline-first and background sync, Service worker, Web storage, Lighthouse