Answer

What is the app shell architecture?

Short answer

The app-shell architecture separates a PWA into two parts: a minimal "shell" of static UI (navigation, layout, styles) that a service worker caches and loads instantly on repeat visits, and dynamic content fetched separately from the network. This makes the app feel instant even before data loads.

By InstantPWA engineering·Reviewed July 25, 2026

Why it matters

By precaching the shell, the second visit renders navigation and layout from cache with near-zero latency, while content streams in afterward.

How it is built

The service worker precaches shell assets at install time using the Cache Storage API, then serves them cache-first while using network-first or stale-while-revalidate for content.

Trade-offs

App-shell works best for app-like, single-page interfaces; it is less useful for content sites where every page is mostly unique, unique content.

Sources

web.dev — The App Shell Model

Do PWAs work offline?

PWAs can work offline, but only for content their service worker has explicitly cached. Registering a service worker does not automatically make a site offline-capable — you decide what to cache (app shell, API responses, images) and what strategy to use (cache-first, network-first, stale-while-revalidate).

What is a PWA?

A PWA (Progressive Web App) is a regular website that meets three technical criteria — HTTPS, a Web App Manifest and a service worker — so browsers let visitors install it on their home screen. Once installed, it launches like a native app, works offline and can send push notifications.

What is the difference between a PWA and a regular website?

Technically, a PWA is just a regular website that additionally serves over HTTPS, links a Web App Manifest, and registers a service worker. Nothing about the HTML, CSS or JS changes — the difference is entirely in those three additions, which unlock installability, offline caching and push notifications.

How do you test a PWA with Lighthouse?

Open Chrome DevTools, go to the Lighthouse panel, select the categories you want (Performance, PWA-related checks live under "Best Practices" in modern Lighthouse) and click "Analyze page load". Lighthouse reports whether your manifest is valid, whether a service worker is registered, and whether the page is served over HTTPS.

What is Workbox?

Workbox is a collection of open-source JavaScript libraries, maintained by Google, that wraps common service-worker patterns — precaching, runtime caching strategies, background sync, expiration — behind a simple API, so developers do not have to hand-write low-level Cache Storage and fetch-event logic.