Check out a free preview of the full Progressive Web Applications and Offline course:
The "Challenge 6: Simple Service Worker" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students implement a service worker.

Get Unlimited Access Now

Transcript from the "Challenge 6: Simple Service Worker" Lesson

[00:00:00]
>> Mike North: I'm gonna take you through a little Simple Service Worker for a second here, and you can actually access it here as well. And then what you're gonna do is you're going to set up a Service Worker, not unlike the way you set up that Web Worker before.

[00:00:15] And what we're gonna do is simply have it maybe Console.log on it's installation or activation. And then I'm thinking every time one of those is invoked, we'll just kinda keep track of that number. And the reason that I want you to do this is you'll be able to see that you can have it update a number and console.log it, right?

[00:00:41] And that's cool. You'll see numbers incrementing as you refresh, neat. But what you'll notice is that you'll be able to close all the tabs, come back, do it again and the number's in the same place because your service worker outlived you. Outlived your tabs, hopefully it doesn't outlive you.

[00:01:01] It might. [LAUGH] There's some slightly perilous situations.
>> Speaker 2: Only if you use Elixir, then your service worker outlives you, right?
>> Mike North: Is this Elixir propaganda?
>> Speaker 2: [LAUGH]
>> Mike North: All right, so I have this page over here and it's a super simple service worker. In fact, it doesn't really do anything.

[00:01:19] That just happens to have a picture of The Beatles, there's no real reason for that at this point.
>> Mike North: But you can see that I'm logging all this stuff to the console, from service-worker.js. And this is a glitch, which means you can click on this remix. And you can see, I have a server and some code, but you see client.js is way too small for anyone to read.

[00:01:49]
>> Mike North: It's the basic service worker that we saw before. So we have serviceWorker navigator, start by saying, okay, cool, you support serviceWorker, go ahead and register it. If the registration is successful, we'll say that and we'll show the registration. If not, we'll say something went terribly wrong. In the serviceWorker, you can see I have three events that I'm listening for.

[00:02:10] On install, I say, something is installing, that seems good. On activate, I say, I am now the service worker in charge, thank you very much. And then anytime a fetch is made, now again, if this was a movie, we'd have a flashback to Mike saying, every network request, even images, are fetches under the hood.

[00:02:37] All right, we're back into the current time again. And we can see that actually, if you look at all the fetches happening, you'll see that image triggering a fetch, right? You'll see fetching the JavaScript triggering a fetch. You will actually see getting the index.html triggering a fetch, right?

[00:02:56] Which is interesting, because normally, we load the HTML, the HTML loads the JavaScript and the images. Here even the getting the HTML page goes pass to the service worker that existed long before that HTML page was ever asked for, right? And it was already present to intercept that.

[00:03:14] But this is also a really good boilerplate for what the world's simplest service worker looks like. As well as what the world's simplest, too noisy in all these cases, but world's simplest version of what a server worker registration looks like. Your job is to bring this in to front-end grocer.

[00:03:35] At this point, all we wanna do is register a service worker. Logging into the console is totally fine. And what we wanna do is maybe increment a number of how many times it's been installed, or how many times it's been activated. How you do that is up to you.

[00:03:48] You would do that in the service worker file itself, because that is the one that will exist outside of the page. And you just increment those numbers each time.