In the last lecture, we registered a service worker, a quick word about that registration before we dive
deeper into the service worker file. The register method here also takes a second argument which is a Javascript
object.
There you can pass a scope property which takes a string where you can also restrict the scope,
so here I could set this to /help/ to make sure the service worker only controls pages in
the help folder.
Now normally, it would control everything in the public folder because that is where the file lives
but we can override this with the scope.
You can't do it the other way around though, if you register the service worker in help
and you want to set scope to slash,
that won't work.
I find it important to add this, though most of the time you'll just place the service worker where you want
to use it
but it's important to know this option.
It's also important to understand that service workers and the manifest.json file are not related.
Yes, there is this condition of the Chrome browser requiring a service worker to show you this app install
banner which also requires a manifest.json file
but in general you can use either of the two features independent of the other
if you don't want to have this automatic app installed banner at least, that's important too
and also important, service workers only work on pages served via https. Now correctly you would say, this
page is not using https,
it clearly isn't here,
if you inspect it here, this is not secure.
Localhost actually is an exception to enable you or to make development easier for you
basically, this is the only exception though. If you want to deploy this on a real server, you need to
serve your application through https otherwise it will not work,
this is important.
Service workers only work on https,
why?
Because service workers have a lot of power,
you can accept any request, you want to make sure that this is served on a secure host and not on any
host, you want to make sure it's encrypted and that this power isn't abused,
hence this requirement.
Now we know this extra thing with the scope and requirements for using service workers, let's dive into
the service worker file here.
Right now it's empty but we're changing this now.
As I said in one of the last lectures,
service workers are running in the background and are all about handling events.
Now therefore, we always attach event listeners to the service worker,
we simply react to events. We do this by first of all referring to the service worker with the self keyword,
this basically means well please give me access to the service worker, to this background process and
there, we can execute add event listener,
you'll see this a lot. This is the same code you know from normal Javascript, here
however you got access to separate or to special events.
You don't have access to click or anything like that, to the normal DOM events,
you don't have access there
because do you know why?
Because you don't have DOM access in the service worker but you have access to a special set of events,
the ones I outlined on a slide earlier, for example the install event which will be fired when the browser
installs the service worker. There
we execute a function, we'll get an event object,
this is passed into the function automatically by the browser
and this object gives us information about this installation event.
For now, I simply want to log something to the console,
I'll log service worker and I'll just add this prefix between the square brackets to make it easier to
see which log is coming from the service worker and which is not
and there I'll say installing service worker... and also log the event.
Now this is the install event
and as I said, this is fired whenever a new service is, well installed.
Now I'll copy this and add another event here,
the activate event. This is fired whenever a service worker is not just installed but also activated
and you'll see the difference in a second. Here
I will say activating service worker and also log the event.
There's also another line we have to add here to make sure that it works without issues,
we have to return something,
we should return self clients claim, claim is a method call.
Now this certainly looks strange,
it basically ensures that the service workers are loaded or are activated correctly. It should work without
that line
but it can fail from time to time or behave strangely,
adding this line simply makes it more robust, might not be needed in the future but it is needed right
now. With these two lines added,
let's go back to our application and reload the page.
Now we see service worker registered and we see installing service worker.
We don't see the activate event though and this is actually the to-be-expected behavior
and this now is a crucial thing
you have to understand. It's so crucial I'll put it into a new lecture so that everyone sees it because if
you don't understand this, you'll be in a world of pain
during developing with service workers.