What are Progressive Web Applications (PWAs)?

TL;DR

Progressive Web Applications (PWAs) are web applications enhanced with capabilities such as installation, offline behavior, background work, and notifications. Which capabilities are available—and the exact installation criteria—vary by browser and operating system. A web app manifest supplies installation metadata, service workers commonly provide offline and push behavior, and powerful features require a secure context.

PWA request path

A service worker can mediate requests for a controlled page and combine cache and network responses according to an explicit strategy.

Offline behavior is not automatic: it depends on what the service worker caches and how it handles misses, updates, and failures.

What are Progressive Web Applications (PWAs)?

Definition

Progressive Web Applications (PWAs) are web applications that combine the best of web and mobile apps. They are built using standard web technologies such as HTML, CSS, and JavaScript but offer enhanced capabilities that make them feel like native apps.

Key characteristics

• Progressively enhanced: The core web experience should work where optional platform capabilities are unavailable.
• Responsive: They fit any form factor, whether it's a desktop, mobile, or tablet.
• Connectivity independent: They can work offline or on low-quality networks using service workers.
• App-like: They provide an app-like experience to users with app-style interactions and navigation.
• Updateable: Service workers have an update lifecycle, but cache strategy and update UX must be designed correctly to avoid serving stale assets.
• Safe: They are served via HTTPS to prevent snooping and ensure content hasn't been tampered with.
• Discoverable: They remain linkable web applications and can expose installation metadata through a manifest.
• Re-engageable: Where supported and permitted by the user, they can receive push notifications.
• Installable: Supporting browsers can install eligible sites into an app-like window or home-screen entry; criteria and UX vary by platform.
• Linkable: They can be easily shared via URL and do not require complex installation.

Core technologies

Service workers

Service workers are scripts that run in the background, separate from the web page, enabling features like offline functionality, background sync, and push notifications.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function (error) {
      console.log('Service Worker registration failed:', error);
    });
}

Web app manifest

The web app manifest is a JSON file that provides metadata about the application (name, icons, start URL, etc.) and allows it to be installed on the user's home screen.

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon/lowres.webp",
      "sizes": "48x48",
      "type": "image/webp"
    },
    {
      "src": "icon/hd_hi.ico",
      "sizes": "72x72 96x96 128x128 256x256"
    }
  ]
}

HTTPS

Service workers and many other powerful capabilities require a secure context, normally HTTPS (with localhost exceptions for development). A site can still use a manifest without a service worker, and current installation criteria are browser-specific.

Benefits

• Performance opportunities: Caching and offline strategies can improve repeat-load resilience, but the PWA label itself does not guarantee fast loading.
• Increased engagement: Features like push notifications and home screen installation help keep users engaged.
• Potentially shared implementation: One web codebase can cover multiple platforms, though capability gaps and platform-specific UX can still add work.

Further reading

• Google Developers: Progressive Web Apps
• MDN Web Docs: Progressive web apps (PWAs)
• Web.dev: What are Progressive Web Apps?

Exercises