Architecture based on the application shell

What is an app shell (app shell)

The app shell is the most basic HTML, CSS, and JavaScript required for the application's user interface, and a component to ensure that the application has a lot of performance. Its first load will be very fast and is cached immediately after loading. This means that the application's shell does not need to be downloaded each time it is used, but only the required data is loaded.

The structure of the application shell is divided into the core base components of the application and the UI that hosts the data. All UI and infrastructure components are cached locally using a service worker, so in subsequent loads the Progressive Web App only needs to load the required data instead of loading all of the content.

In other words, the shell of the app is equivalent to the code that was packaged in the native app that was published to the store. It's the core component that allows your app to run, but it doesn't contain data.

Why use a structure based on an application shell?

Using the app shell-based architecture allows you to focus on speed, giving your Progressive Web app and native apps similar properties: Fast loading and flexible updates, all without the need for the App store.

Design the application shell

The first step is to design the core components

Ask yourself:

Need to show immediately what's on the screen?
What are the key UI components that our application needs?
What resources are needed to apply the shell? Slices, JavaScript, style sheets, and so on.
We're going to create a weather app as our first Progressive Web app. Its core components include:

When designing a more complex application, the content does not need to be loaded for the first time, and can then be loaded on demand and then cached for the next use. For example, we can delay loading the Add City dialog until we finish rendering the first screen and have some free time.

Architecture based on the application shell