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