← Lessons

quiz vs the machine

Gold1490

System Design

The Progressive Web App Architecture

Build installable offline capable web apps with a service worker.

5 min read · core · beat Gold to climb

What a PWA is

A progressive web app is a web app that can install, work offline, and behave like a native app, powered mainly by a service worker.

  • A service worker is a background script that intercepts network requests.
  • It caches assets so the app loads without a connection.
  • A web app manifest lets the app be installed to the home screen.

How the service worker intervenes

The service worker sits between the page and the network, serving from cache or fetching as needed.

Core capabilities

  • Offline first strategies serve cached content then update in the background.
  • Background sync defers actions until connectivity returns.
  • Push notifications re engage users even when the tab is closed.

Practical notes

  • Version your caches and clean old ones on activation.
  • Choose a strategy per resource, such as cache first for assets and network first for data.
  • Test update flows so users do not get stuck on a stale service worker.

Key idea

A PWA uses a service worker to cache assets and intercept requests, giving installable offline capable experiences from ordinary web technology.

Check yourself

Answer to earn rating on the learn ladder.

1. What component makes a PWA work offline?

2. What does the web app manifest enable?