- [Narrator] Now it's time to register our first service worker. To register a service worker, we need to call the register function inside navigator.serviceworker. The simplest way for the function, is to set the URL as the first argument. So it's pretty simple. Let's create an HTML file and call that function from it. I'm here in my editor, I will use Visual Studio Code.
I will open a folder. And I'm going to create an HTML file from here. Let's call it index HTML. It will be a very basic HTML, so it will have the doctype, a title called First Service Worker, and some content, an H1 with Service Worker Test. Finally, you're going to create an output element, where we're going to send some text regarding the service worker registration.
The next part is to create a script tag. In this tag, we're going to register our service workers. It's going to be navigator.serviceWorker, capital W, be careful with that, register and the name of the service worker script as the first argument. So it should be in string, and for example I will call it serviceworker.js. Typical file names are serviceworker.js or sw.js.
Any name will work, but because there will be only one per scope, so per wrap, it's important to use a name that you would recognize pretty soon. So service worker seems like a good idea. Of course we need the file, so I'm going to create that file, serviceworker.js and for now it's going to be empty. The next part is to understand what service worker is returning. The register function is returning a Promise of a Service Worker Registration.
Because it's a promise, I'm going to use then, this is not mandatory, but I want to see what's going on, so I'm going to receive the registration option, that has information about the current service worker and also I'm going to catch possible error. In this case, I'm going to change the contents of the output element with some text explaining if it was registered or not. I will do document query selector, I will take my output and change it's inner HTML with Service Worker registered properly.
I'm going to do something similar on the catch with Service Worker not registered. In the case of the error, it can be because our website is not being served in HTTPS, or maybe from the file protocol we cannot install or register service workers in the file protocol. Just double clicking the file, we really need a web server. Also, maybe the file is not in the server, so the server is giving you 404. In that case, you will also receive execution in the catch handle.
Finally, because we might have out there, browsers without support for service worker, we don't want to call the register on an undefined option for those situations. So typically we're going to ask with the condition, if service worker property is available in the navigator option. If service worker is available in navigator, then we are going to register. If not, we will just say that service workers are not available.
The API is not available, or maybe the user is in a situation, it's loading the HTML in a local file system, or it's loading in HTTP, not HTTPS.
- Service worker life cycle
- Registering service workers
- Handling service worker events
- Updating service workers
- Acting as a network proxy
- Configuring cache storage
- Communicating with clients
- Optimizing web performance