Module 4: Advanced web technologies
4.2.2 Introduction to the app shell architecture
- 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.
- What needs to be on screen immediately?
- What other UI components are key to our app?
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