What is it that the App shell helps with

QUESTION

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

The correct answer is:

Making transitions between pages faster

What is it that the App shell helps with
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.

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.

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

(Visited 6 times, 1 visits today)