App Shell Model

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 किया जाता है।

<!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 करें।