# App Shell Model — Progressive Web Apps

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

> App shell model का उपयोग करके अपने PWA को instant loads और smooth navigation के लिए architect करें।

## App Shell Architecture

**App shell** आपके app का minimal HTML, CSS और JS skeleton है। इसे aggressively cache करें ताकि यह instantly load हो, फिर page-specific content को dynamically load करें। यह pattern perceived speed और offline readiness बनाता है।

## App Shell Example

यह HTML app shell है—यह cache से instantly load होता है जबकि content को dynamically fetch किया जाता है।

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

## एक आम गलती

Shell में dynamic content को include न करें। Shell static और cacheable होना चाहिए; content को अलग से load करें।