← Back to Curriculum

Progressive Web Apps (PWAs)

📚 Lesson 12 of 20 ⏱️ 40 min

Progressive Web Apps (PWAs)

40 min

Progressive Web Apps (PWAs) are web applications that use modern web technologies to deliver app-like experiences that work across all devices and platforms. PWAs combine the best of web and native apps: they're discoverable like websites, installable like native apps, and work offline with push notifications. PWAs provide a compelling alternative to native apps, especially for businesses wanting to reach users across platforms without maintaining separate codebases.

The Web App Manifest is a JSON file that provides metadata about your web application, enabling it to be installed on users' devices. The manifest includes the app name, icons, start URL, display mode (standalone, fullscreen, minimal-ui), theme colors, and orientation preferences. When users install a PWA, it appears on their home screen and launches in its own window, without browser UI. The manifest makes your web app feel like a native application.

Service Workers are JavaScript files that act as proxies between your web app and the network, enabling powerful features like offline functionality, background sync, and push notifications. Service workers run in the background, separate from your web page, and can intercept network requests, cache resources, and serve cached content when offline. They're the foundation of PWA offline capabilities and enable apps to work reliably even with poor or no network connectivity.

Offline support is a key PWA feature. Service workers can cache app shell (HTML, CSS, JavaScript) and data, serving cached content when the network is unavailable. Strategies include cache-first (serve from cache, fallback to network), network-first (try network, fallback to cache), and stale-while-revalidate (serve cache immediately, update in background). Proper caching strategies ensure fast load times and reliable offline functionality.

Installability is another crucial PWA feature. When a PWA meets certain criteria (HTTPS, valid manifest, registered service worker, etc.), browsers offer an install prompt. Once installed, PWAs appear on home screens, launch in standalone mode, and can be found in app drawers. Installation makes PWAs feel native while maintaining the web's advantages: easy updates, no app store approval, and cross-platform compatibility.

Best practices include ensuring your site works offline with service workers, providing a complete manifest with all required fields, using HTTPS (required for service workers), designing for mobile-first experiences, providing app-like navigation and interactions, and testing installation across different browsers and devices. PWAs should feel fast, reliable, and engaging, matching or exceeding native app experiences while maintaining the web's reach and accessibility.

Key Concepts

  • PWAs combine web and native app features for app-like experiences.
  • Web App Manifest provides metadata for installability.
  • Service Workers enable offline functionality and background processing.
  • PWAs are installable, work offline, and can send push notifications.
  • HTTPS is required for service workers and PWA features.

Learning Objectives

Master

  • Understanding PWA concepts and capabilities
  • Creating Web App Manifests for installability
  • Implementing Service Workers for offline functionality
  • Building installable, app-like web experiences

Develop

  • Modern web application architecture thinking
  • Understanding offline-first development
  • Creating engaging, native-like web experiences

Tips

  • Ensure your site uses HTTPS (required for service workers).
  • Provide complete manifest with icons, name, and display mode.
  • Implement service worker caching strategies for offline support.
  • Test PWA installation and offline functionality across browsers.

Common Pitfalls

  • Not using HTTPS, preventing service worker registration.
  • Incomplete manifest files, preventing installation.
  • Poor caching strategies, leading to stale or missing content offline.
  • Not testing offline functionality, leaving users with broken experiences.

Summary

  • PWAs provide app-like experiences using web technologies.
  • Web App Manifest enables installation and native-like behavior.
  • Service Workers enable offline functionality and background processing.
  • PWAs are installable, work offline, and feel like native apps.
  • Proper PWA implementation requires HTTPS, manifest, and service workers.

Exercise

Add a web app manifest to your HTML and register a basic service worker.

<!-- manifest.json -->
{
  "name": "My PWA App",
  "short_name": "PWA",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#ffffff"
}

<!-- In your HTML -->
<link rel="manifest" href="manifest.json">

<!-- Register service worker in JS -->
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js');
}

Exercise Tips

  • Add icons of different sizes to your manifest for better installation experience.
  • Implement caching strategies in your service worker.
  • Test offline functionality by disconnecting from the network.
  • Check PWA installation criteria using browser DevTools.

Code Editor

Output