Progressive web apps require a new way of thinking about

the architecture of your web app.

When building progressive web apps, it's recommended to use an application shell or

apps shell architecture to ensure fast and

reliable performance, even on a slow connection or while offline.

Championed by Google, an app shell architecture is a set of standards that

focus on providing a fast loading experience to users by rendering

a shell of your application immediately when a user visits the app,

before other assets have loaded.

Using this app shell model allows you to give your progressive web apps similar

properties of native apps, like instant loading and regular updates.

For instance, when you first load Flipkart Lite,

you immediately see the app shell containing the header UI, navigation and

loader, before any of the server data loads.

App shell architecture separates the core application infrastructure and

UI from the data.

In other words, it separates the parts of an app that change often, like the data,

from the parts that don't often change, like the UI and static assets.

The application shell itself is the minimal HTML,

CSS and JavaScript required to power the user interface of your app.

The application shell should load fast, be cached locally, and

dynamically display content.

And since all the UI and infrastructure is cached using a service worker,

on subsequent loads your app only needs to retrieve just the necessary data

instead of having to reload the entire app.

The app shell files are loaded just once over the network on first visit

then saved to the device which results in super fast startup times.

When designing your app shell,

you'll first break the app design down into its core components.

The components that need to be seen on screen immediately, like the header,

title, and navigation, for example.

As well as other UI components that are key to the app,

like a loading indicator and the layout template for your content.

Also any supporting resources needed for the app shell, like images,

JavaScript, and styles.

You include those components in your apps index.html file using regular HTML markup.

And once you've built your app shell, you'll need to cache the app shell using

a service worker so that it's always available quickly and reliably.

Now if you're familiar with native app development, the app shell is similar

to the bundle of code you'd submit to an app store when publishing an app.

It contains just the core components necessary to get the apps started

which means it usually doesn't contain the data.

Using the application shell model combined with the core technologies of progressive

web apps lead to huge wins in both performance and user experience.

And keep in mind that the principles and technologies covered in these videos

can equally enhance apps built with plain JavaScript, React, Polymer, Angular or

any other framework or library you choose for building your progressive web apps.

To learn more about application shell architecture and how to cache an app

shell with a service worker, check out the links posted in the teacher's notes.

So when should you build a progressive web app over a native app?

Well there are a few factors you'll have to consider.

First, identify your users and the most important user actions.

Even though progressive web apps work in all browsers,

to deliver the full app like experience, users will need to be using browsers

that support modern web technologies, which isn't always the case.

If certain browser features that lack cross-browser support are required for

important user actions, a native app might be the better option because it

will guarantee the same experience for users.

Now, the skill set for iOS and

Android development is very different than that of a web developer.

So you'll also take into account whether you and your team have the resources and

skills needed to build a progressive web app using modern web technologies.

Building and maintaining native apps for multiple platforms can be expensive and

they only benefit those users who install them.

Plus standing out among the millions of apps available in

app stores these days is a tall order.

Progressive web apps work on any device with a browser, so

choosing to build one could reduce costs.

You'll build a single app that works on any platform.

Now for companies with massive user bases like Instagram, Twitter,

or Uber, that expect loads of users to return to their apps frequently,

a native app is still the way to go.

Google has been publishing informative case studies from companies adopting and

benefiting from converting to progressive web apps.

And the results are very encouraging.

And since Google is leading the charge in the progressive web app movement,

they've put together a progressive web app checklist which breaks down all the things

you'll need to create the best possible progressive web app experience.

They've even built an amazing testing tool called Lighthouse that automatically

verifies whether or not your app meets all the progressive web app requirements.

You'll find the links to all of these in the teacher's notes.