What is it that the App shell helps with
Making the full page load faster
Creating a fully optimized site
Making transitions between pages faster
Improves elements of the UX
Explanation:
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
Read more here: https://support.google.com/partners/answer/7336597
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.
Example
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
https://www.youtube.com/watch?v=ndFWqYmGg7M