Caching the process of retaining application code within the browser so

that the user does not have to require another download

if the browser already has the resource.

This is a core concept to working with the web.

But as websites have become more app like,

caching becomes a much more complicated issue to address.

In basic caching the browser simply looks to see if the resource exists.

It does not try to download it again.

And web caching does not store the whole app, only parts of the app.

Also standard caching does not allow apps to run offline.

This is an important distinction, as service workers will

allow the app to still operate without an internet connection.

Until the browser's cache is deleted.

Because of this,

developers have come up with new ways to store the app on your device.

One such tool is service workers.

A service worker is a small chunk of JavaScript that instructs your browser

to fetch the resources you want cached and how to cache them properly.

Just a few notes here before we get started.

Not supported by all browsers.

Chrome, Opera, and Firefox do, Edge is in development, Safari is in consideration.

appCache is the old, service workers is the new.

Do not cache polyfills.

Chances are the browsers that need polyfills won't support service workers.

Service workers offer a performance boost.

You can pre-fetch and retain resources better for your return users.

Don't be too aggressive, this will just add additional load time.

Service workers require HTTPS, this is a good thing.

Now let's look at our Date picker app and see how we can add service workers.

First thing first in order to test this locally we need to serve our localhost

app on a secure server.

A really simple tool for this is to run HTTPS server.

To install simply follow the instructions here in the readme.

Once installed and we have processed our code,

we simply launch the server from within the disk directory.

Keep in mind the server does not support gzip files or HTTP/2,

so we will be using standard minified files for this portion of the course.

With our server running, we can get our URL of the app and

open this up in the browser.

Building from the previous project, I have already built a disk directory and

started the secure server.

To check to see that we are using the secured server,

see the security tab in the inspector.

Now that we are confident that we are running in the secure server,

let's built our service worker.

A service worker is JavaScript that a supporting browser knows what to do with.

The technique files progressive enhancement.

If a browser does not support a service worker it simply ignores the request.

At this point, the cache addAll function will simply cache the root of the site.

But we need to be specific about the items that we want to aggressively cache.

So let's update this with the known resources that we want to be functional

offline.

We need the HTML, CSS, and JavaScript, needed to run the feature.

Everything else is pretty boiler plate and we don't need to change anything for

our current purposes.

But for more information be sure to take a look at the links in the teachers notes.

Now that we have our service worker set up,

we need to add this reference to our HTML view.

Open the index html file and

near the bottom we need to add this reference to test browser support.

If it passes then register the service worker.

Notice that the service worker is referenced in the root.

Placing this file in the root makes it easier and

causes less confusion with routes, and cached resources.

But remember all JavaScript files are minified and placed in the disk directory.

We can make a simple update to the gulp file to move this resource from

disk to the root.

Oops, we have a small problem.

We have a timing issue.

We have to ensure that this resource is created before we move it.

Earlier we used a wait function, but here let's use gulp sequence.

Let's add this module and

then update the default gulp task with the order of things that we need to happen.

Running gulp at this time we should see that the service worker file is now copied

to the root directory.

In Chrome to validate our new service worker, we need to open the application

tab in the Chrome Inspector and then view the service worker menu item.

At this point, we have a fully functional service worker, but

this base install we have a small problem.

The service worker is not configured to auto update when resources are updated.

Let's go back to our service worker and add two additional functions.

These additional functions will instruct our service worker on how to view from

cache and how to understand updates.

To process our updates, run gulp again.

In the browser, we can see that the service worker has been registered and

we can view the items in our cache storage.

Let's go back to the code and update the core CSS file to change the type color.

We're going to run Gulp and refresh back into the browser.

After refresh we see the UI change in the view.

We can quickly go back to the CSS,

update again, save, run gulp, refresh the browser and

see that we are getting our updates even though we have a cache service worker.

Things are working great.

Let's go back and reset our UI.

But what about offline?

The point of a service worker is to have access to the app without a solid data

connection.

Checking the offline option in this panel and

refreshing the browser, we see that our app is still fully functional.

Back in the application tab in the left menu let's select manifest.

A site manifest in conjunction with a service worker

really helps seal the deal with that app like experience.

Setup is simple and at the root of the source we have a new file manifest.json.

In this file, we put some boilerplate code to get things started.

As you see here, we need to set some icon images.

In our project, we have a new images directory that we need to process.

Remember the gulp image process we did earlier?

Let's get this back in here.

Let's get gulp image in this project, and let's create a new task called move image.

Remember, we are going to keep this an independent gulp process,

as we don't want images to be processed with each gulp update.

Another thing we need to do is move the manifest json file to the root of the disc

directory as well.

We can easily add this reference to our move dist gulp task.

Let's open the index html file and we need to add two things to the head element.

First we are going to add a new meta tag for theme color.

This is something that will help us in our lighthouse score later on.

Second we need to add the reference to our new manifest JSON file.

At this time we can run gulp move image, and then gulp again and

then check back in the browser for our results.

In the browser refresh.

And in the manifest we see that we now have application information.

At this point, we have a lot of things going for us.

Great code, minified resources, a service worker, and an application manifest.

We haven't done this in a while, but let's go back and take a look at Lighthouse and

see how we score.

First we need to close the inspector, and then using the Chrome extension, we can

run the test Again, Lighthouse is gonna put our site through a series of tests.

As you can see here, we nailed it, 100 out of 100.

I would feel confident adding this new feature to any site, and knowing full well

that we did our best to maintain performance and deliver quality code.

After all our only red check is our server.

But that's pretty easy to address later on.