Edit in GitHubLog an issue

Application shell

PWA Studio uses an application shell architecture to shorten the time it takes to load a branded experience in the UI instead of a blank page.

Overview#

The application shell pattern involves heavily caching the minimal amount of HTML, CSS and JS to load the basic UI of the page before fetching the rest through an API.

Application shell rendering is instantaneous on repeat visits because the majority of the page is in the cache. It also prevents unnecessary data usage because it removes the need to download static content more than once.

The following is a simple example of an application shell:

Copied to your clipboard
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 <link rel="stylesheet" type="text/css" href="assets/css/shell.css" />
8 <title>Document</title>
9 </head>
10
11 <body>
12 <header>
13 <h1>App Shell</h1>
14 </header>
15
16 <div class="nav"></div>
17
18 <div class="content"></div>
19
20 <div class="spinner"></div>
21
22 <script>
23 if (process.env.SERVICE_WORKER && "serviceWorker" in navigator) {
24 window.addEventListener("load", () => {
25 navigator.serviceWorker
26 .register(process.env.SERVICE_WORKER)
27 .then((registration) => {
28 console.log("Service worker registered: ", registration);
29 })
30 .catch((error) => {
31 console.log("Service worker registration failed: ", error);
32 });
33 });
34 }
35 </script>
36 </body>
37</html>
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.