Lesson 7 / 29

App shell model

Architect your PWA using the app shell model for instant loads and smooth navigation.

App shell architecture

The app shell is the minimal HTML, CSS, and JS skeleton of your app. Cache it aggressively so it loads instantly, then dynamically load page-specific content. This pattern creates perceived speed and offline readiness.

App shell example

This HTML is the app shell—it loads instantly from cache while content is fetched dynamically.

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <link rel="stylesheet" href="shell.css">
</head>
<body>
  <header>My App</header>
  <nav><!-- Navigation cached as part of shell --></nav>
  <main id="content">Loading...</main>
  <footer>Footer</footer>
  <script src="shell.js"></script>
</body>
</html>

Output:

App shell loads immediately from cache; content is loaded dynamically.

A common trap

Do not include dynamic content in the shell. The shell should be static and cacheable; load content separately.