Module 4: Advanced web technologies

4.2.2 Introduction to the app shell architecture

An application shell is the minimal HTML, CSS, and JavaScript powering a user interface. The application shell should:

  • Load fast
  • Be cached
  • Dynamically display content

App shell architecture separates the core application infrastructure and UI from the data. All of the UI and infrastructure is cached locally using a service worker so that on subsequent loads, the Progressive Web App only needs to retrieve the necessary data, instead of having to load everything.

An application shell is the secret to reliably good performance. Think of your app's shell like the bundle of code you'd publish to an app store if you were building a native app. It's the load needed to get off the ground, but might not be the whole story. It keeps your UI local and pulls in content dynamically through an API.

Why use the App Shell architecture

Using the app shell architecture allows you to focus on speed, giving your Progressive Web App similar properties to native apps: instant loading and regular updates, all without the need of an app store.

Design the App Shell

The first step is to break the design down into its core components.

Ask yourself:

  • What needs to be on screen immediately?
  • What other UI components are key to our app?
  • What supporting resources are needed for the app shell? For example images, JavaScript, styles, etc.


Let's say you're going to create a Weather app as a Progressive Web App. The key components would consist of:

  • Header with a title, and add/refresh buttons
  • Container for forecast cards
  • A forecast card template
  • A dialog box for adding new cities
  • A loading indicator


Was this helpful?
How can we improve it?