Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introducing Progressive Web Apps!
You have completed Introducing Progressive Web Apps!
Preview
The application shell architecture is a set of standards that focus on providing a fast-loading experience to users. Using an app shell architecture allows you to give your progressive web apps similar properties of native apps, like instant loading and regular updates.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Progressive web apps require
a new way of thinking about
0:00
the architecture of your web app.
0:03
When building progressive web apps, it's
recommended to use an application shell or
0:05
apps shell architecture to ensure fast and
0:09
reliable performance, even on
a slow connection or while offline.
0:11
Championed by Google, an app shell
architecture is a set of standards that
0:15
focus on providing a fast loading
experience to users by rendering
0:19
a shell of your application immediately
when a user visits the app,
0:23
before other assets have loaded.
0:27
Using this app shell model allows you to
give your progressive web apps similar
0:28
properties of native apps,
like instant loading and regular updates.
0:32
For instance,
when you first load Flipkart Lite,
0:36
you immediately see the app shell
containing the header UI, navigation and
0:39
loader, before any of
the server data loads.
0:43
App shell architecture separates
the core application infrastructure and
0:45
UI from the data.
0:50
In other words, it separates the parts of
an app that change often, like the data,
0:51
from the parts that don't often change,
like the UI and static assets.
0:55
The application shell
itself is the minimal HTML,
1:00
CSS and JavaScript required to power
the user interface of your app.
1:03
The application shell should load fast,
be cached locally, and
1:08
dynamically display content.
1:12
And since all the UI and infrastructure
is cached using a service worker,
1:14
on subsequent loads your app only needs
to retrieve just the necessary data
1:18
instead of having to
reload the entire app.
1:22
The app shell files are loaded just
once over the network on first visit
1:25
then saved to the device which
results in super fast startup times.
1:29
When designing your app shell,
1:34
you'll first break the app design
down into its core components.
1:35
The components that need to be seen on
screen immediately, like the header,
1:39
title, and navigation, for example.
1:43
As well as other UI components
that are key to the app,
1:45
like a loading indicator and
the layout template for your content.
1:49
Also any supporting resources needed for
the app shell, like images,
1:52
JavaScript, and styles.
1:56
You include those components in your apps
index.html file using regular HTML markup.
1:58
And once you've built your app shell,
you'll need to cache the app shell using
2:04
a service worker so that it's always
available quickly and reliably.
2:07
Now if you're familiar with native app
development, the app shell is similar
2:11
to the bundle of code you'd submit to
an app store when publishing an app.
2:16
It contains just the core components
necessary to get the apps started
2:19
which means it usually
doesn't contain the data.
2:23
Using the application shell model combined
with the core technologies of progressive
2:26
web apps lead to huge wins in both
performance and user experience.
2:30
And keep in mind that the principles and
technologies covered in these videos
2:35
can equally enhance apps built with plain
JavaScript, React, Polymer, Angular or
2:39
any other framework or library you choose
for building your progressive web apps.
2:44
To learn more about application shell
architecture and how to cache an app
2:48
shell with a service worker, check out
the links posted in the teacher's notes.
2:52
So when should you build a progressive
web app over a native app?
2:56
Well there are a few factors
you'll have to consider.
2:59
First, identify your users and
the most important user actions.
3:02
Even though progressive web
apps work in all browsers,
3:07
to deliver the full app like experience,
users will need to be using browsers
3:10
that support modern web technologies,
which isn't always the case.
3:14
If certain browser features that lack
cross-browser support are required for
3:18
important user actions, a native app
might be the better option because it
3:22
will guarantee the same experience for
users.
3:25
Now, the skill set for iOS and
3:28
Android development is very different
than that of a web developer.
3:30
So you'll also take into account whether
you and your team have the resources and
3:34
skills needed to build a progressive
web app using modern web technologies.
3:38
Building and maintaining native apps for
multiple platforms can be expensive and
3:43
they only benefit those
users who install them.
3:47
Plus standing out among
the millions of apps available in
3:50
app stores these days is a tall order.
3:53
Progressive web apps work on
any device with a browser, so
3:55
choosing to build one could reduce costs.
3:58
You'll build a single app
that works on any platform.
4:00
Now for companies with massive user
bases like Instagram, Twitter,
4:03
or Uber, that expect loads of users
to return to their apps frequently,
4:07
a native app is still the way to go.
4:11
Google has been publishing informative
case studies from companies adopting and
4:13
benefiting from converting
to progressive web apps.
4:17
And the results are very encouraging.
4:19
And since Google is leading the charge
in the progressive web app movement,
4:22
they've put together a progressive web app
checklist which breaks down all the things
4:26
you'll need to create the best possible
progressive web app experience.
4:30
They've even built an amazing testing
tool called Lighthouse that automatically
4:34
verifies whether or not your app meets
all the progressive web app requirements.
4:37
You'll find the links to all of
these in the teacher's notes.
4:41
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up