Register & Install a Service Worker

[00:00:00]
>> Kyle Simpson: Okay, so to begin adding a service worker to our application, we're going to do something a little bit similar to what we did with our web workers. But it's gonna be a little bit different because now we have a bit more setup work to do with a service worker.

[00:00:16]
So the first thing I'm gonna do is make a variable that is gonna store my service worker instance, similar to the one we did with web worker. And then, I'm going to, in this code,
>> Kyle Simpson: I'm going to call a function called initServiceWorker. And it's gonna be an asynchronous function, and I just want any errors that may happen, because we'll definitely make errors, I'm sure.

[00:00:47]
Just wanna make sure all those get printed so all the catch
>> Kyle Simpson: Clause there so that we can see it. And then, we're gonna define a async function called initServiceWorker.
>> Kyle Simpson: And then, additionally, up here, we want to have a couple of other variables. Again, like we did with the navigator, we should at least try to detect are we using service workers here?

[00:01:26]
So we're gonna assume if service workers are supported, then we are using them. So we're gonna say if serviceWorker in navigator. If navigator.serviceWorker is present, then that means that we're gonna be using it. And then, we're gonna also want a variable that stores what's called a service worker registration.

[00:01:55]
So we will set up another variable there.
>> Kyle Simpson: Our initServiceWorker function, the first thing that we wanna do is assign that registration. This is what we get whenever we first start up our service worker. So this is a little different than a regular worker where you get it right back when you call new worker.

[00:02:22]
Here, you get back a registration, and then depending on what state the service worker is in in it's life cycle at that point, that's how you access the service worker. So we'll get into all of that. But we're gonna say sw, service worker registration equals await. And then we're gonna do navigator.serviceWorker.

[00:02:47]
>> Kyle Simpson: And then, we're going to pass in an object.
>> Kyle Simpson: It's actually the register method. And then, the first parameter that we're gonna pass, let me zoom out so you can see it. The first parameter we're gonna pass is the URL to our service worker, which is slas js slash sw dot js.

[00:03:10]
And then, that second parameter is the object that we're gonna pass with the configuration. The configuration that we want here is updateViaCache equals false.
>> Kyle Simpson: We'll talk more about that update stuff in just a moment.
>> Kyle Simpson: So now, we have a registration. This is what's gonna actually start up and install, essentially, it's gonna go access that service worker.

[00:03:41]
A quick note on this part, if we load it as /js/swjs which is where it's located. If we load as that, then the service worker is only gonna handle requests for files underneath that path. Now, we want the service worker to handle it for our entire document root.

[00:04:01]
So we wanna load it like this, even though we probably wanna locate it inside of the slash js. So I've already taken care of on the server doing a URL rewrite, that slash sw dot js actually loads slash js slash sw dot js. So that's a little nuance problem that you may run into.

[00:04:21]
If you locate your service worker anywhere other than the route, you probably wanna do like some sort of URL redirect set up on your server to make that happen.