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
This video covers two important technologies used to produce an app-like experience on the web: service workers and web app manifests. You'll learn what they are and how they work together to realize many of the PWA characteristics you learned about in the previous video.
Resources
Service Workers
- Service Worker API – MDN
- Current browser support for Service Workers
- Service Workers: an Introduction
- Service Worker Recipes
- Service Worker, what are you?
Web App Manifest
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
So now I'm going to cover two
important technologies used to produce
0:01
an app like experience on the web,
Service Workers and Web App Manifests.
0:04
You'll learn what they are and
how they work together to realize many of
0:09
the progressive web app characteristics
we talked about in the previous video.
0:12
Progressive web apps need to be fast and
work reliably online, offline, and
0:16
on slow connections like most native apps.
0:20
For example, a native app can
provide offline experiences,
0:23
do periodic background syncs,
and send push notifications.
0:26
Well, Progressive Web Apps are able to
deliver these features, too, via service
0:29
workers which provide the technical
foundation for Progressive Web Apps.
0:33
In fact, Progressive Web Apps rely on
Service Workers to give users that
0:38
app like experience.
0:42
Servers workers are event driven
scripts written in JavaScript
0:43
that the browser runs in the background
separate from a web page.
0:47
They act as client side
proxies that can listen for
0:50
and handle events triggered in your app
even when it isn't open in the browser.
0:54
Since servers workers do all their
work between the network and
0:58
the browser, you can control how
network requests are handled
1:01
which gives you complete
control over the experience.
1:06
For example, you can send push
notifications to re-engage your users,
1:09
or use background sync to defer actions
that need to be sent to the server
1:14
until the user has stable connectivity,
like submitting an order.
1:18
Service workers also cache
static assets locally and
1:22
let you serve content like
your app's UI from a cache.
1:25
So that means that on repeat visits, your
app is available quickly and reliably.
1:29
Also, when offline, you can still
display useful information to users,
1:33
like data that was retrieved
in previous sessions.
1:38
A service worker can
then seamlessly fetch and
1:40
sync data when a user's network
connection is restored.
1:43
For example, earlier when I went offline
using Flipkart Lite, service workers
1:47
cached the UI and intercepted network
requests behind the scenes and
1:51
served a response from the cache.
1:55
So that's why we were
still able to use the app.
1:57
And remember, being safe is one of the key
characteristics of progressive Web Apps.
2:00
Therefore service workers require HTTPS.
2:05
While you develop the app, you can run
service workers through local host.
2:08
But when deployed to production,
if your app is not served under a secure
2:12
connection, the browser will not
load the service workers and
2:15
you won't be able to take advantage
of any app-like features.
2:18
As I'm recording this video,
service workers are supported in Chrome,
2:21
Firefox and Opera, and
coming soon to Edge.
2:25
Now Apple's Web Kit team has it
marked under consideration, so
2:28
hopefully soon they will be
supported in Safari and iOS Safari.
2:31
You can learn more about service workers,
the service worker lifecycle and
2:36
how to register and install a service
worker by reading this informative service
2:40
workers article on developers.google.com,
2:45
along with other links I've posted in
the teacher's notes of this video.
2:47
Another key technology in making your web
app more app like is the Web App Manifest,
2:52
a JSON file that describes
the configuration of your web app.
2:57
The manifest is where you add metadata
associated with your web app.
3:02
Like how your app appears to users,
icons for the home screen and
3:05
whether it should display full screen
in portrait or landscape mode.
3:09
You also include the app's name,
author and
3:13
description which are indexable via Google
and makes your app easily searchable.
3:16
Once you create your manifest file,
3:20
you simply link it to your HTML
file in the head of the document.
3:22
So in this example manifest,
3:26
you'll see many of the common
properties used in a manifest file.
3:28
For instance, the name property
provides the full name for
3:32
the application and short_name provides
a short name for the application.
3:36
Now the short name is used
where there's not enough
3:41
space to display the full name of the web
application, like on a user's home screen.
3:43
The start_url property
specifies the URL that
3:48
loads when a user launches
the application from a device.
3:51
And the description property here
provides a general description
3:54
of what the web application does.
3:58
Then we have properties that configure
how your web app appears to users.
4:00
For instance, the display property
defines the preferred display mode for
4:04
the web app.
4:09
For example, the value full screen
hides the browser Chrome and
4:10
uses all the available display area.
4:13
In this case the value stand
alone makes your app look and
4:15
feel like a standalone application.
4:19
The app can have a different window and
its own icon in the application launcher.
4:20
The browser also excludes any UI
elements for controlling navigation, but
4:25
you can include other UI
elements like a status bar.
4:29
So this is why standalone is the most
commonly used display value.
4:32
In Chrome, your app will display
a splash screen with an icon and
4:36
a background color while it's loading.
4:40
So the background color property
defines the background color for
4:42
the web application while it's loading.
4:46
For example in the Flipcart and
Flipboard apps we looked at earlier,
4:48
the background color of the splash
screens was defined with this property.
4:51
Now one of the main purposes
of the manifest is for
4:56
installing web applications to
the home screen of a device
4:59
to give users quicker access to the app.
5:02
So the manifest supports
an array of image objects
5:05
that can serve as app icons intended for
different screen sizes and resolutions.
5:08
So these are the icons that display on
a user's home screen, splash screen,
5:13
and tasks switcher.
5:17
And you can even specify
native app alternatives
5:20
in the various app stores here in
the related applications property.
5:23
For example Flipboard also has
a native app in app stores, so
5:28
when you visit the app,
5:32
it uses the related application property
in the manifest to display this banner.
5:33
Specifying the native app alternative
in the Google Play Store since we're
5:39
on an Android device here.
5:42
Go ahead and check out the link in
a teacher's note for a list of all
5:43
the properties and values you can
include in a web app manifest file.
5:46
Now as I'm recording this video,
5:51
web app manifests are fully supported
by Chrome and Opera Mobile.
5:52
And they are currently in development for
Firefox and in consideration for
5:56
Edge which means that they're also
working towards adopting them.
6:00
Now in order to make your app look and
behave like a native application on iOS
6:05
Safari, you'll need to include special
iOS configuration in your HTML file.
6:10
For example, to define the add
to home screen elements and
6:15
to turn on standalone mode in your app,
6:19
you'll add these metatags in
the head of your HTML document.
6:21
Then you specify the multiple icons for
6:25
different device resolutions
using link tags.
6:28
For a list of all
the configuration tags for iOS,
6:32
take a look at the links I
posted in the teacher's notes.
6:34
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