# App shell model — Progressive Web Apps

Source: https://www.geekswithgeeks.com/en/pwa/pwa-app-shell

> 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.

```html
<!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.