Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The internet is increasingly becoming more and more mobile. Users will be accessing your app on the go more often than not and as result developers need to guard themselves against poor connections. Service workers have performance benefits as well help make return visits even faster.
New Terms:
Service Worker -- A script that runs in the background that features to be cached without requiring a user interaction.
Tools:
Further Reading:
Is Serviceworker Ready?
Service Workers: an Introduction
Measuring Performance in a Service Worker
Service Worker Cookbook
Caching the process of retaining
application code within the browser so
0:00
that the user does not have
to require another download
0:05
if the browser already has the resource.
0:08
This is a core concept
to working with the web.
0:11
But as websites have become more app like,
0:14
caching becomes a much more
complicated issue to address.
0:17
In basic caching the browser simply
looks to see if the resource exists.
0:21
It does not try to download it again.
0:26
And web caching does not store
the whole app, only parts of the app.
0:28
Also standard caching does not
allow apps to run offline.
0:33
This is an important distinction,
as service workers will
0:38
allow the app to still operate
without an internet connection.
0:41
Until the browser's cache is deleted.
0:44
Because of this,
0:48
developers have come up with new ways
to store the app on your device.
0:49
One such tool is service workers.
0:54
A service worker is a small chunk of
JavaScript that instructs your browser
0:57
to fetch the resources you want cached and
how to cache them properly.
1:01
Just a few notes here
before we get started.
1:06
Not supported by all browsers.
1:09
Chrome, Opera, and Firefox do, Edge is in
development, Safari is in consideration.
1:11
appCache is the old,
service workers is the new.
1:16
Do not cache polyfills.
1:20
Chances are the browsers that need
polyfills won't support service workers.
1:22
Service workers offer a performance boost.
1:27
You can pre-fetch and retain resources
better for your return users.
1:30
Don't be too aggressive,
this will just add additional load time.
1:35
Service workers require HTTPS,
this is a good thing.
1:40
Now let's look at our Date picker app and
see how we can add service workers.
1:46
First thing first in order to test this
locally we need to serve our localhost
1:50
app on a secure server.
1:55
A really simple tool for
this is to run HTTPS server.
1:56
To install simply follow
the instructions here in the readme.
2:00
Once installed and
we have processed our code,
2:04
we simply launch the server
from within the disk directory.
2:06
Keep in mind the server does not
support gzip files or HTTP/2,
2:10
so we will be using standard minified
files for this portion of the course.
2:14
With our server running,
we can get our URL of the app and
2:18
open this up in the browser.
2:21
Building from the previous project,
I have already built a disk directory and
2:23
started the secure server.
2:27
To check to see that we
are using the secured server,
2:29
see the security tab in the inspector.
2:31
Now that we are confident that we
are running in the secure server,
2:34
let's built our service worker.
2:37
A service worker is JavaScript that a
supporting browser knows what to do with.
2:39
The technique files
progressive enhancement.
2:43
If a browser does not support a service
worker it simply ignores the request.
2:46
At this point, the cache addAll function
will simply cache the root of the site.
2:50
But we need to be specific about the items
that we want to aggressively cache.
2:55
So let's update this with the known
resources that we want to be functional
2:59
offline.
3:02
We need the HTML, CSS, and JavaScript,
needed to run the feature.
3:04
Everything else is pretty boiler plate and
we don't need to change anything for
3:08
our current purposes.
3:11
But for more information be sure to take
a look at the links in the teachers notes.
3:13
Now that we have our
service worker set up,
3:18
we need to add this
reference to our HTML view.
3:20
Open the index html file and
3:23
near the bottom we need to add this
reference to test browser support.
3:25
If it passes then register
the service worker.
3:29
Notice that the service worker
is referenced in the root.
3:32
Placing this file in
the root makes it easier and
3:35
causes less confusion with routes,
and cached resources.
3:37
But remember all JavaScript files are
minified and placed in the disk directory.
3:41
We can make a simple update to the gulp
file to move this resource from
3:46
disk to the root.
3:49
Oops, we have a small problem.
3:51
We have a timing issue.
3:52
We have to ensure that this resource
is created before we move it.
3:54
Earlier we used a wait function,
but here let's use gulp sequence.
3:59
Let's add this module and
4:04
then update the default gulp task with the
order of things that we need to happen.
4:05
Running gulp at this time we should see
that the service worker file is now copied
4:10
to the root directory.
4:13
In Chrome to validate our new service
worker, we need to open the application
4:15
tab in the Chrome Inspector and
then view the service worker menu item.
4:19
At this point, we have a fully
functional service worker, but
4:23
this base install we have a small problem.
4:26
The service worker is not configured to
auto update when resources are updated.
4:28
Let's go back to our service worker and
add two additional functions.
4:33
These additional functions will instruct
our service worker on how to view from
4:36
cache and how to understand updates.
4:40
To process our updates, run gulp again.
4:42
In the browser, we can see that
the service worker has been registered and
4:49
we can view the items
in our cache storage.
4:53
Let's go back to the code and update the
core CSS file to change the type color.
4:58
We're going to run Gulp and
refresh back into the browser.
5:02
After refresh we see
the UI change in the view.
5:11
We can quickly go back to the CSS,
5:15
update again, save, run gulp,
refresh the browser and
5:17
see that we are getting our updates even
though we have a cache service worker.
5:21
Things are working great.
5:25
Let's go back and reset our UI.
5:26
But what about offline?
5:36
The point of a service worker is to have
access to the app without a solid data
5:38
connection.
5:42
Checking the offline
option in this panel and
5:43
refreshing the browser, we see that
our app is still fully functional.
5:45
Back in the application tab in
the left menu let's select manifest.
5:54
A site manifest in conjunction
with a service worker
5:58
really helps seal the deal
with that app like experience.
6:01
Setup is simple and at the root of the
source we have a new file manifest.json.
6:04
In this file, we put some boilerplate
code to get things started.
6:09
As you see here,
we need to set some icon images.
6:12
In our project, we have a new images
directory that we need to process.
6:15
Remember the gulp image
process we did earlier?
6:19
Let's get this back in here.
6:21
Let's get gulp image in this project, and
let's create a new task called move image.
6:23
Remember, we are going to keep
this an independent gulp process,
6:28
as we don't want images to be
processed with each gulp update.
6:31
Another thing we need to do is move the
manifest json file to the root of the disc
6:36
directory as well.
6:40
We can easily add this reference
to our move dist gulp task.
6:41
Let's open the index html file and we need
to add two things to the head element.
6:46
First we are going to add a new
meta tag for theme color.
6:50
This is something that will help us
in our lighthouse score later on.
6:53
Second we need to add the reference
to our new manifest JSON file.
6:57
At this time we can run gulp move image,
and then gulp again and
7:02
then check back in the browser for
our results.
7:06
In the browser refresh.
7:21
And in the manifest we see that we
now have application information.
7:23
At this point,
we have a lot of things going for us.
7:27
Great code, minified resources, a service
worker, and an application manifest.
7:29
We haven't done this in a while, but let's
go back and take a look at Lighthouse and
7:35
see how we score.
7:39
First we need to close the inspector, and
then using the Chrome extension, we can
7:40
run the test Again, Lighthouse is gonna
put our site through a series of tests.
7:45
As you can see here,
we nailed it, 100 out of 100.
7:55
I would feel confident adding this new
feature to any site, and knowing full well
7:58
that we did our best to maintain
performance and deliver quality code.
8:03
After all our only red
check is our server.
8:08
But that's pretty easy
to address later on.
8:11
You need to sign up for Treehouse in order to download course files.
Sign up