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!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
What makes PWAs different from normal websites are 10 distinct characteristics. These app-like characteristics, when fulfilled, will boost the experience of your web app by providing most of the capabilities of native apps.
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
In the previous video, you learned that
progressive web apps provide a native
0:00
app experience using
modern web technologies.
0:04
Fundamentally, progressive web apps are
not much different from regular websites
0:07
that are built with HTML, CSS, and
JavaScript, and displayed in the browser.
0:10
What makes progressive web apps
different from normal websites
0:15
are ten distinct characteristics.
0:19
These app-like characteristics,
0:21
defined by developers at Google, when
fulfilled, will boost the experience of
0:23
your web app by providing most of
the capabilities of native apps.
0:27
First up, being progressive means
that a web app must work for
0:31
every user on all devices,
regardless of the browser being used.
0:35
Progressive enhancement lies at the heart
of progressive web app development.
0:39
The native app experience should be
available to users with browsers
0:44
that support the technologies for
progressive web apps and
0:47
take advantage of any features
available on the user's device and
0:50
browser, but still deliver a standard
experience to users on older browsers.
0:53
A progressive web app is also responsive,
meaning it should fit any form factor,
0:59
a desktop, mobile, or tablet device.
1:04
Like you saw in the Flipkart Light and
Flipboard apps, progressive web apps
1:06
provide a fully immersive experience, so
they should fill the screen of a device
1:10
perfectly, using the principles and
techniques of responsive web design.
1:15
Now one important characteristic
is connectivity independence,
1:19
progressive web apps should work in areas
of low connectivity or, like I showed you
1:23
on Flipkart Light, even when there
is no Internet connection available.
1:27
A user can launch the app and
1:31
still display useful information
no matter the connection, this is
1:32
accomplished by enhancing your app with
a browser feature called service workers.
1:36
The browser runs service worker
scripts in the background
1:41
to load your content almost instantly
in an online connection and
1:43
still display content so that your app
works offline or in low-quality networks.
1:47
You'll learn about service
workers in the next video.
1:52
A progressive web app needs to
feel like an app to the user,
1:54
with app-like interactions navigation and
1:57
minimal page refreshes, the app should
respond quickly to user interactions.
1:59
When there's motion on the screen,
like scrolling, transitions,
2:05
or animations, users shouldn't
experience any stuttering or
2:07
choppiness, the experience
should be silky smooth.
2:11
Earlier, you saw how launching
an app from a home screen icon
2:14
displays the app full screen, without
the browser Chrome, meaning no URL bar or
2:17
the forward and back buttons
usually provided by the browser.
2:22
The app is built using an architectural
model called Application Shell,
2:25
which I'll cover in a later video.
2:28
Next, a progressive web app should always
be up to date, using service worker
2:29
updates when new content is published and
the user is connected to the Internet,
2:34
that content should be
made available in the app.
2:39
An app should be safe, so
every progressive web app has to be served
2:41
through an HTTPS connection
to prevent snooping and
2:45
ensure content hasn't been tampered with.
2:48
You see, progressive web apps work
with native APIs, service workers, and
2:51
technologies that deal
with sensitive data, so
2:55
this should be handled with caution.
2:57
Now, a free and easy way to run
your app in a secure environment
3:00
is via GitHub pages,
which can host directly over HTTPS.
3:03
Next, a progressive web app is on the web,
so users should be able to discover
3:07
the app in search engines, this is one of
the biggest advantages over native apps,
3:12
native apps lack the searchability
of progressive web apps.
3:16
And later we'll cover the features
that make progressive web apps
3:20
easily searchable in search engines.
3:23
Progressive web apps
make re-engagement easy
3:25
through features like push notifications,
just like on native apps.
3:28
Using service workers and the push API,
progressive web apps can deliver
3:31
asynchronous notifications and
updates to users that opt in,
3:35
which results in better engagement
with timely new content.
3:39
Now, a progressive web app can be
installed on the device's home screen,
3:42
making it readily available to users, so
3:47
when they launch it, it will feel just
like any other app on their device, and
3:49
when in use, it even appears as a top
level app in a device's tasks switcher.
3:52
Finally, progressive web apps
are easily shared via URLs,
3:57
users simply click a link to access
the content they're looking for.
4:01
There is zero friction, so
4:04
there's no complex installation and anyone
with a web browser has access to the app.
4:06
So with the right set of capabilities in
a browser, a progressive web app can be
4:11
as performant, reliable and
as engaging as a native app.
4:15
Up next, you'll learn more about
the technologies that go into
4:19
progressive web app development.
4:22
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