1
00:00:02,240 --> 00:00:07,040
In the last lecture, we registered a service worker, a quick word about that registration before we dive

2
00:00:07,360 --> 00:00:13,670
deeper into the service worker file. The register method here also takes a second argument which is a Javascript

3
00:00:13,700 --> 00:00:14,790
object.

4
00:00:14,900 --> 00:00:21,710
There you can pass a scope property which takes a string where you can also restrict the scope,

5
00:00:21,980 --> 00:00:28,370
so here I could set this to /help/ to make sure the service worker only controls pages in

6
00:00:28,370 --> 00:00:29,600
the help folder.

7
00:00:29,870 --> 00:00:34,390
Now normally, it would control everything in the public folder because that is where the file lives

8
00:00:34,700 --> 00:00:36,730
but we can override this with the scope.

9
00:00:37,040 --> 00:00:41,130
You can't do it the other way around though, if you register the service worker in help

10
00:00:41,330 --> 00:00:43,580
and you want to set scope to slash,

11
00:00:43,760 --> 00:00:44,770
that won't work.

12
00:00:45,020 --> 00:00:49,790
I find it important to add this, though most of the time you'll just place the service worker where you want

13
00:00:49,790 --> 00:00:50,450
to use it

14
00:00:50,450 --> 00:00:53,420
but it's important to know this option.

15
00:00:53,450 --> 00:01:00,340
It's also important to understand that service workers and the manifest.json file are not related.

16
00:01:00,650 --> 00:01:08,540
Yes, there is this condition of the Chrome browser requiring a service worker to show you this app install

17
00:01:08,570 --> 00:01:12,550
banner which also requires a manifest.json file

18
00:01:12,710 --> 00:01:16,190
but in general you can use either of the two features independent of the other

19
00:01:16,250 --> 00:01:21,330
if you don't want to have this automatic app installed banner at least, that's important too

20
00:01:21,470 --> 00:01:30,530
and also important, service workers only work on pages served via https. Now correctly you would say, this

21
00:01:30,530 --> 00:01:31,760
page is not using https,

22
00:01:31,880 --> 00:01:33,680
it clearly isn't here,

23
00:01:33,740 --> 00:01:36,760
if you inspect it here, this is not secure.

24
00:01:37,010 --> 00:01:43,650
Localhost actually is an exception to enable you or to make development easier for you

25
00:01:43,650 --> 00:01:49,490
basically, this is the only exception though. If you want to deploy this on a real server, you need to

26
00:01:49,490 --> 00:01:54,760
serve your application through https otherwise it will not work,

27
00:01:54,770 --> 00:01:55,550
this is important.

28
00:01:55,610 --> 00:01:58,990
Service workers only work on https,

29
00:01:59,050 --> 00:02:00,170
why?

30
00:02:00,170 --> 00:02:03,480
Because service workers have a lot of power,

31
00:02:03,500 --> 00:02:09,620
you can accept any request, you want to make sure that this is served on a secure host and not on any

32
00:02:09,620 --> 00:02:13,880
host, you want to make sure it's encrypted and that this power isn't abused,

33
00:02:13,920 --> 00:02:15,510
hence this requirement.

34
00:02:15,500 --> 00:02:21,770
Now we know this extra thing with the scope and requirements for using service workers, let's dive into

35
00:02:21,770 --> 00:02:23,800
the service worker file here.

36
00:02:23,870 --> 00:02:26,670
Right now it's empty but we're changing this now.

37
00:02:27,110 --> 00:02:29,840
As I said in one of the last lectures,

38
00:02:29,840 --> 00:02:35,080
service workers are running in the background and are all about handling events.

39
00:02:35,330 --> 00:02:40,430
Now therefore, we always attach event listeners to the service worker,

40
00:02:40,550 --> 00:02:47,040
we simply react to events. We do this by first of all referring to the service worker with the self keyword,

41
00:02:47,060 --> 00:02:54,350
this basically means well please give me access to the service worker, to this background process and

42
00:02:54,350 --> 00:02:57,270
there, we can execute add event listener,

43
00:02:57,320 --> 00:03:04,590
you'll see this a lot. This is the same code you know from normal Javascript, here

44
00:03:04,610 --> 00:03:09,000
however you got access to separate or to special events.

45
00:03:09,140 --> 00:03:13,370
You don't have access to click or anything like that, to the normal DOM events,

46
00:03:13,370 --> 00:03:14,510
you don't have access there

47
00:03:14,540 --> 00:03:16,620
because do you know why?

48
00:03:16,830 --> 00:03:23,510
Because you don't have DOM access in the service worker but you have access to a special set of events,

49
00:03:23,510 --> 00:03:29,910
the ones I outlined on a slide earlier, for example the install event which will be fired when the browser

50
00:03:29,980 --> 00:03:33,460
installs the service worker. There

51
00:03:33,630 --> 00:03:36,820
we execute a function, we'll get an event object,

52
00:03:36,830 --> 00:03:39,950
this is passed into the function automatically by the browser

53
00:03:40,200 --> 00:03:44,320
and this object gives us information about this installation event.

54
00:03:44,730 --> 00:03:47,700
For now, I simply want to log something to the console,

55
00:03:48,340 --> 00:03:54,330
I'll log service worker and I'll just add this prefix between the square brackets to make it easier to

56
00:03:54,330 --> 00:03:58,210
see which log is coming from the service worker and which is not

57
00:03:58,430 --> 00:04:07,240
and there I'll say installing service worker... and also log the event.

58
00:04:07,250 --> 00:04:09,110
Now this is the install event

59
00:04:09,110 --> 00:04:14,780
and as I said, this is fired whenever a new service is, well installed.

60
00:04:14,840 --> 00:04:19,010
Now I'll copy this and add another event here,

61
00:04:19,010 --> 00:04:26,700
the activate event. This is fired whenever a service worker is not just installed but also activated

62
00:04:26,870 --> 00:04:30,190
and you'll see the difference in a second. Here

63
00:04:30,350 --> 00:04:36,040
I will say activating service worker and also log the event.

64
00:04:36,050 --> 00:04:40,060
There's also another line we have to add here to make sure that it works without issues,

65
00:04:40,070 --> 00:04:41,510
we have to return something,

66
00:04:41,780 --> 00:04:46,700
we should return self clients claim, claim is a method call.

67
00:04:46,700 --> 00:04:48,290
Now this certainly looks strange,

68
00:04:48,290 --> 00:04:55,670
it basically ensures that the service workers are loaded or are activated correctly. It should work without

69
00:04:55,670 --> 00:04:56,470
that line

70
00:04:56,660 --> 00:04:59,730
but it can fail from time to time or behave strangely,

71
00:04:59,930 --> 00:05:06,410
adding this line simply makes it more robust, might not be needed in the future but it is needed right

72
00:05:06,440 --> 00:05:09,460
now. With these two lines added,

73
00:05:09,620 --> 00:05:13,010
let's go back to our application and reload the page.

74
00:05:13,010 --> 00:05:17,750
Now we see service worker registered and we see installing service worker.

75
00:05:17,750 --> 00:05:23,860
We don't see the activate event though and this is actually the to-be-expected behavior

76
00:05:23,930 --> 00:05:26,420
and this now is a crucial thing

77
00:05:26,420 --> 00:05:32,150
you have to understand. It's so crucial I'll put it into a new lecture so that everyone sees it because if

78
00:05:32,150 --> 00:05:35,450
you don't understand this, you'll be in a world of pain

79
00:05:35,510 --> 00:05:37,640
during developing with service workers.