Lesson 1 / 29

What are Progressive Web Apps?

Understand the core concept of PWAs, their benefits, and how they bridge the gap between web and native apps.

The essential idea

Progressive Web Apps combine the best of web and native applications. They work offline, load instantly, and feel like native apps. PWAs use service workers, manifest files, and modern web APIs to deliver app-like experiences directly in browsers.

PWA architecture overview

This visual shows how PWAs connect browser capabilities, service workers, and app shell to create seamless experiences.

PWA architecture diagram showing browser, service worker, app shell, and native-like features.
Figure 1.1 — Progressive Web Apps architecture layers.

A minimal PWA setup

This is the foundation: an HTML page referencing a manifest and registering a service worker.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My PWA</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <h1>Welcome to My PWA</h1>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js');
    }
  </script>
</body>
</html>

Output:

Page loads with service worker registered and manifest linked.

A common trap

Do not assume PWAs work on all browsers equally. Test on real devices and use feature detection to gracefully degrade capabilities.

Quick check

Quick check: What are the three pillars of a PWA?

  • Reliable (offline), Fast (instant load), Engaging (app-like)
  • Server-side rendering, database, API
  • JavaScript, CSS, HTML
Answer

Reliable (offline), Fast (instant load), Engaging (app-like) — PWAs are defined by reliability, speed, and engagement—they work offline, load instantly, and feel native.

Practice exercise

Build a simple PWA checklist app using the concepts learned.