what is a valid event for a service worker to emit when its registered? This is a topic that many people are looking for. amritsang.org is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, amritsang.org would like to introduce to you PWA Tutorial for Beginners #8 – Registering a Service Worker. Following along are instructions in the video below:
Then so now we know a little bit more about service workers lets create create a service worker and also register it in the browser. So first of alls create the service worker file now im going to create this in the root of this project directory. So that it has the overall scope.
It has access to all of these different files. Folders pages. Etc.
So let me create a new file. And im going to call this sw for service worker. Dot j.
s now. Im not going to write anything inside that file just yet. What i am gonna do though is register.
This service worker in the browser from another javascript file. So which javascript file should i do this from well. If we open up j s.
We have materialized. So im not in there. And we have this ui j s.
File. Now this is just for the ui of the application. So dumb interaction and stuff like that so i dont really want to put it in there.
Either what im gonna do instead is create a new file called app j s. And register. It from here so i need to link to this file from index dot html.
Ill do that right at the bottom over here so let me come down to the bottom. And just above it this script. Im going to do a new script.
And the source is going to be equal to j s. Op j. S.
Now you need to link to this from every html page. We have inside the project so inside pages. We have the about page.
So at the bottom down here. We need this as well and we also need to put this inside contact dot html as well so no matter which page we load that its going to register. This service worker ok so inside up this is where we want to register the surface worker.
So first of all we need to check. If the browser actually supports service workers because not every browser does only good modern browsers. So if we go to can i use and look at service workers.
We can see a lot of these browsers do support them. But the ones in red ie. 11.
And these ones here these do not support service workers. So we need to check that that exists service workers in the browser. Before we use it.
Now the way. We do this is by doing just a simple eve check and in here. Were gonna say if service worker in quotes.
Is in navigator can spell this right probably not navigator. Okay. So what navigator is is an object in javascript that represents the browser and information about it and were checking to see if this service worker property exists on this navigator object.
If it does it means that the browser supports service workers and we can use it so were only going to execute this code. If it supports service workers right so then how do we then use this to register a service worker well. We say navigator again and then dots service worker.
Then were going to use a method on this property called register. This is how we register a service worker and in here. We need to pass an argument.
Which is a path to the service worker. That is just s wjs. Its in the root of the project.
So its going to get this file and register. It as a service worker. Now this thing right here is an asynchronous task meaning.
It takes some time to complete. And it returns to us a promise. Which means we can tack on a dot.
Then method so inside this dot. There method we pass a callback function. Which is going to execute when the promise resolves so im going to do this function as an arrow function and then im just going to say console dot log and well say service worker registered okay so we can also tack on a dot catch method to catch any errors and inside.
Here well pass a callback function. Which will fire if the promise is rejected and were just saying here console dot log and well say service worker. Not registered okay so this right here this is promise syntax.
Its a way to deal with asynchronous tasks. And this statement at the top because its asynchronous and takes some time to do it returns to us a promise. Which is a special value in javascript and that promise says that at some point.
This task of registering a service worker is either going to finish successfully or unsuccessfully and this is known as the promise being either resolved if its successful or rejected. If its not successful now. If the promise is resolved ie.
Its successful then it fires. The callback function inside the then method. When its done if its not successful and the promise is rejected then it fires this callback function inside the catch method this catches.
Any errors okay so this is known as promise syntax. If you want to learn more about it feel free to check out my asynchronous javascript course. Ill leave the link down below.
But anyway. We have this in place now now this callback function right here. If the promise is resolved and its successful it takes in an object as a parameter and this is a registration object.
It represents the registration of our service worker and this one takes in a parameter. Which is the error. If we catch any kind of error and this was not successful okay so were registering now this service worker and then were doing this if its successful and were doing this if its not and in fact.
Well also log out next to these little statements. The registration object and the error object if there was an error. So now if i save this.
Whats going to happen well. Its going to run this code. Because its linked to our different html files.
Its going to check if service work exists in navigator. Which it does in chrome. Then its going to register.
This service worker right here when its done if its successful. Were going to log this out to the console. And were going to log out the registration object as well so lets save this and give this a whirl save it and come over to our project.
Then i want to go to console. Because this is where were logging out some kind of result and im gonna hard refresh. Now it says at the minute this site cant be reached so let me go back to my html.
File right click. And open with live server just in case that live service stopped and come back over here okay so now if we inspect again go to the console. We can see now that the service worker was registered okay and we can see the service work at registration object right here now if we expand this we can see a property called the scope and right here it says.
This is the scope. And that is the root of our domain is this up here. So its seen it basically has global scope within our project.
Its at the root directory. Now if i moved this service worker. Right here instead into a subdirectory.
So lets say i move it into the jas folder. Then i need to go to app. Jeaious and change.
Where this is registering to because now. Its inside the js folder. So j s.
Search worker is if i save this now and come back over here. We can see again. The service worker is still registered right here.
But if we open this up. We can come down here. And we can see the scope is now this thing right here in the subdirectory j s.
So now it would only be able to control the files inside this folder. Okay. So thats the scope in action.
Now. What im going to do is move this service worker back to the root of the project. So that it can access everything now if we go back over to the browser.
We can come up here and see this application tab right here now if you open this were going to see if you click on service workers over here. The service workers that we have registered and we can see this one right here s. Wjs and we can see that its activated and its running so that service worker.
Now has been registered in the browser. Its also been activated and now its running now well be coming back to this tab up here application. Quite a lot as we go throughout the rest of this course to use some of the different features over here.
Now one more thing to know service workers. Only work on pages. Where theyre served over a secure https connection.
Now localhost that we have up here is not https. But that is an exception to the rule. And its an exception.
So that we can easily develop apps using service workers. But this is important when it comes to deploying your application. Now the logic behind this is that service workers are very powerful.
They can intercept requests made by the browser. So they need to be secure. But now weve registered this serviceworker lets lock in the next video at the install event.
.
Thank you for watching all the articles on the topic PWA Tutorial for Beginners #8 – Registering a Service Worker. All shares of amritsang.org are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
By 
