Hello and welcome to this video.
In this video, I'm going to be creating and registering a service worker.
What is a service worker?
He said his work is basically what makes a progressive web application feel like a native mobile application
service worker is the technology that enables your app to use many progressive web app features, such
as offline.
Ability to add to home screen and push notification, the service worker is basically a JavaScript file.
I'm going to create the service worker inside my public directory.
I'm going to highlight the public directory.
Right click select new file and I'm going to call it S W Dot is self called.
My service worker has to be taught as an hour presenter, and that has created an empty service worker
file.
So make sure it's inside the public directory so that the web server has access to it when it serves
the content of the public directory.
So what I'm going to do here, I'm just going to add an event, listen to that or listen out for an
install event.
And there I will log a message to the console that the service worker has been installed.
I've added a block of code here into the service worker file, so I'm just going to run through the
code to explain what's going on on line number one, we have this self don't add event listener.
The self on line number one refers to the global scope of a context, for example, the global scope
of a service worker.
If the context is a window, it will refer to the window itself.
The add event listener is a built in function in JavaScript, so it is built in and what the add event
listener does.
It takes the event that you want to listen to.
In this instance, I want to listen to the install event.
It also takes a second argument, which is called whenever they describe the event occurs.
So what I'm saying here is that each time the install event occurs, I have a function there that will
display some message in the console, so it will log a message to the console that says the S W, which
stands for service worker, is installed.
So I've now created a service worker file and added some content to the service worker.
As the course progresses, we will add some more content to the service worker file in subsequent videos.
So I'm just going to save the content of the service worker.
Now that we've created the service worker, the next thing to do is to register the service worker,
how we have to register it inside the application logic that is the JavaScript file that controls the
application.
So my JavaScript file is called my script Daichi.
Yes, so this is where I need to register the service worker.
So I want to register the service worker at the very beginning of my logic file.
I want to tab down and then add the code that will be used to register a service worker here.
I have either the block of code from line number one to seven to register the service worker.
Not all web browsers.
The visits your application will support a service worker.
So that's why on line number one, here I've call the Eve statement here to check if the web browser
now this is the application, does support a service worker.
So my number one, M.S., if service worker is in navigator, that means if the browser supports service
worker, the Navigator basically allows scripts to query and register themselves to perform some activities.
Saline no one checks if the Web browser supports the service worker, if it does, I'm using the Navigator
Objet online, but to which has a property that is called service worker.
And the service worker is also an object, which itself has a method called register, which is going
to be used to register the service worker.
And then we have to pass in the URL location of the file that is going to be the service worker.
So we have a Falco as a beta test, which is going to be the service worker once the service worker
has been registered.
He then returns a promise, a promise.
Objet basically represents the eventual completion or failure of an asynchronous operation, and it's
resulted in value.
We have it then method here.
The dead method basically is used to deal with asynchronous task, such as an API call.
So what's happening on Line two?
Here is what it has been registered with.
Then log a message to the console on line number three using the console log.
So if the registration is successful, it will display this message that says successfully registered
in the console.
We also want to catch any errors that occurs if the registration is not successful, so the block of
code from line number four to five will catch any error messages and then log it to the console.
So if there's an error, it will log this text to the console that says error while registering the
service worker.
That's basically the service worker registered, so I'm just going to do a file and then save all of
the changes.
While the server is running, it watches out for any changes in the files for the application.
If there are any changes, it will automatically update and then refresh the application.
So you can see here on the bottom here we've got his W-2 or GST, so it has picked up the service worker.
So if I click on this arrow here, I can click application and then check here was this service worker.
You can find a lot of information about the service worker in the service workers area here, and you
can see here it says receive.
That's when it was received.
You can see the status here it says is activated, but it is not running, so you can click on the start
to make it run.
You can see now it says activated and is running.
So you can stop it when you want to.
You can also on register it.
He can also update it.
So that's it for this video In this video, I created and registered his service worker.
Thanks for watching.
Bye for now.