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
Preview
Start a free Courses trial
to watch this video
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.
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 up