Transcript from the "Challenge 6: Simple Service Worker" Lesson
>> 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.
>> 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: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.