1
00:00:00,060 --> 00:00:02,130
Hello and welcome to this video.

2
00:00:02,640 --> 00:00:09,000
In this video, I'm going to be creating and registering a service worker.

3
00:00:09,150 --> 00:00:11,010
What is a service worker?

4
00:00:11,880 --> 00:00:23,100
He said his work is basically what makes a progressive web application feel like a native mobile application

5
00:00:23,490 --> 00:00:32,520
service worker is the technology that enables your app to use many progressive web app features, such

6
00:00:32,520 --> 00:00:33,900
as offline.

7
00:00:34,920 --> 00:00:43,980
Ability to add to home screen and push notification, the service worker is basically a JavaScript file.

8
00:00:45,030 --> 00:00:50,180
I'm going to create the service worker inside my public directory.

9
00:00:50,230 --> 00:00:52,230
I'm going to highlight the public directory.

10
00:00:52,950 --> 00:01:01,620
Right click select new file and I'm going to call it S W Dot is self called.

11
00:01:01,620 --> 00:01:10,650
My service worker has to be taught as an hour presenter, and that has created an empty service worker

12
00:01:10,650 --> 00:01:11,070
file.

13
00:01:11,070 --> 00:01:21,510
So make sure it's inside the public directory so that the web server has access to it when it serves

14
00:01:22,080 --> 00:01:24,900
the content of the public directory.

15
00:01:25,470 --> 00:01:32,850
So what I'm going to do here, I'm just going to add an event, listen to that or listen out for an

16
00:01:32,850 --> 00:01:33,900
install event.

17
00:01:34,410 --> 00:01:43,380
And there I will log a message to the console that the service worker has been installed.

18
00:01:44,070 --> 00:01:49,320
I've added a block of code here into the service worker file, so I'm just going to run through the

19
00:01:49,320 --> 00:01:57,420
code to explain what's going on on line number one, we have this self don't add event listener.

20
00:01:57,690 --> 00:02:06,960
The self on line number one refers to the global scope of a context, for example, the global scope

21
00:02:07,170 --> 00:02:08,850
of a service worker.

22
00:02:09,450 --> 00:02:15,240
If the context is a window, it will refer to the window itself.

23
00:02:15,630 --> 00:02:26,910
The add event listener is a built in function in JavaScript, so it is built in and what the add event

24
00:02:26,910 --> 00:02:27,900
listener does.

25
00:02:28,620 --> 00:02:33,130
It takes the event that you want to listen to.

26
00:02:33,150 --> 00:02:38,070
In this instance, I want to listen to the install event.

27
00:02:39,030 --> 00:02:46,830
It also takes a second argument, which is called whenever they describe the event occurs.

28
00:02:47,310 --> 00:02:57,150
So what I'm saying here is that each time the install event occurs, I have a function there that will

29
00:02:57,150 --> 00:03:05,550
display some message in the console, so it will log a message to the console that says the S W, which

30
00:03:05,550 --> 00:03:08,670
stands for service worker, is installed.

31
00:03:09,270 --> 00:03:15,600
So I've now created a service worker file and added some content to the service worker.

32
00:03:16,080 --> 00:03:24,840
As the course progresses, we will add some more content to the service worker file in subsequent videos.

33
00:03:25,260 --> 00:03:30,030
So I'm just going to save the content of the service worker.

34
00:03:30,540 --> 00:03:37,230
Now that we've created the service worker, the next thing to do is to register the service worker,

35
00:03:37,620 --> 00:03:47,010
how we have to register it inside the application logic that is the JavaScript file that controls the

36
00:03:47,010 --> 00:03:47,940
application.

37
00:03:48,390 --> 00:03:53,170
So my JavaScript file is called my script Daichi.

38
00:03:53,190 --> 00:04:00,000
Yes, so this is where I need to register the service worker.

39
00:04:00,360 --> 00:04:06,810
So I want to register the service worker at the very beginning of my logic file.

40
00:04:07,450 --> 00:04:16,410
I want to tab down and then add the code that will be used to register a service worker here.

41
00:04:16,920 --> 00:04:24,930
I have either the block of code from line number one to seven to register the service worker.

42
00:04:24,990 --> 00:04:27,030
Not all web browsers.

43
00:04:27,030 --> 00:04:32,640
The visits your application will support a service worker.

44
00:04:33,120 --> 00:04:40,920
So that's why on line number one, here I've call the Eve statement here to check if the web browser

45
00:04:40,950 --> 00:04:45,900
now this is the application, does support a service worker.

46
00:04:46,830 --> 00:04:56,610
So my number one, M.S., if service worker is in navigator, that means if the browser supports service

47
00:04:56,610 --> 00:05:06,120
worker, the Navigator basically allows scripts to query and register themselves to perform some activities.

48
00:05:07,310 --> 00:05:17,750
Saline no one checks if the Web browser supports the service worker, if it does, I'm using the Navigator

49
00:05:17,780 --> 00:05:25,340
Objet online, but to which has a property that is called service worker.

50
00:05:26,210 --> 00:05:36,860
And the service worker is also an object, which itself has a method called register, which is going

51
00:05:36,860 --> 00:05:39,770
to be used to register the service worker.

52
00:05:40,310 --> 00:05:49,310
And then we have to pass in the URL location of the file that is going to be the service worker.

53
00:05:49,760 --> 00:05:57,830
So we have a Falco as a beta test, which is going to be the service worker once the service worker

54
00:05:57,830 --> 00:05:59,360
has been registered.

55
00:05:59,840 --> 00:06:04,310
He then returns a promise, a promise.

56
00:06:04,310 --> 00:06:14,600
Objet basically represents the eventual completion or failure of an asynchronous operation, and it's

57
00:06:14,600 --> 00:06:16,010
resulted in value.

58
00:06:16,970 --> 00:06:18,890
We have it then method here.

59
00:06:18,890 --> 00:06:27,260
The dead method basically is used to deal with asynchronous task, such as an API call.

60
00:06:27,620 --> 00:06:29,420
So what's happening on Line two?

61
00:06:29,420 --> 00:06:32,730
Here is what it has been registered with.

62
00:06:32,750 --> 00:06:39,530
Then log a message to the console on line number three using the console log.

63
00:06:39,530 --> 00:06:46,160
So if the registration is successful, it will display this message that says successfully registered

64
00:06:46,400 --> 00:06:47,540
in the console.

65
00:06:48,320 --> 00:06:56,570
We also want to catch any errors that occurs if the registration is not successful, so the block of

66
00:06:56,570 --> 00:07:04,490
code from line number four to five will catch any error messages and then log it to the console.

67
00:07:04,490 --> 00:07:11,300
So if there's an error, it will log this text to the console that says error while registering the

68
00:07:11,300 --> 00:07:12,350
service worker.

69
00:07:12,530 --> 00:07:19,550
That's basically the service worker registered, so I'm just going to do a file and then save all of

70
00:07:19,550 --> 00:07:20,330
the changes.

71
00:07:20,570 --> 00:07:27,020
While the server is running, it watches out for any changes in the files for the application.

72
00:07:27,470 --> 00:07:33,650
If there are any changes, it will automatically update and then refresh the application.

73
00:07:33,650 --> 00:07:41,030
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.

74
00:07:42,590 --> 00:07:50,810
So if I click on this arrow here, I can click application and then check here was this service worker.

75
00:07:51,830 --> 00:08:00,470
You can find a lot of information about the service worker in the service workers area here, and you

76
00:08:00,470 --> 00:08:02,930
can see here it says receive.

77
00:08:03,230 --> 00:08:05,030
That's when it was received.

78
00:08:05,390 --> 00:08:13,070
You can see the status here it says is activated, but it is not running, so you can click on the start

79
00:08:13,880 --> 00:08:15,030
to make it run.

80
00:08:15,050 --> 00:08:19,040
You can see now it says activated and is running.

81
00:08:19,610 --> 00:08:21,620
So you can stop it when you want to.

82
00:08:21,740 --> 00:08:23,570
You can also on register it.

83
00:08:23,960 --> 00:08:25,730
He can also update it.

84
00:08:26,330 --> 00:08:32,960
So that's it for this video In this video, I created and registered his service worker.

85
00:08:33,320 --> 00:08:34,250
Thanks for watching.

86
00:08:34,550 --> 00:08:35,330
Bye for now.