1
00:00:00,150 --> 00:00:08,550
Hello and welcome to the part two of implementing offline access, using cash in this part of the video.

2
00:00:08,730 --> 00:00:18,030
I'm going to add another event list not that will enable us to access the resources that have been cash

3
00:00:18,030 --> 00:00:24,420
and get them displayed on the client side when the application is accessed offline.

4
00:00:24,570 --> 00:00:33,240
I'm going to add another event listener, which is going to listen out for fetch and what this will

5
00:00:33,240 --> 00:00:33,660
do.

6
00:00:33,690 --> 00:00:43,800
It will enable the app to hook into the event when a URL is being fetched and then take over that event

7
00:00:43,950 --> 00:00:51,600
and provide an actual 8p response that will then be displayed in the client.

8
00:00:51,690 --> 00:00:59,350
There are different strategies for caching, but we will implement a cache first strategy.

9
00:00:59,370 --> 00:01:05,460
What we want to do is intercept the service workers fetch event.

10
00:01:05,460 --> 00:01:11,790
The service worker has a fetch event which is built into the browser's functionality.

11
00:01:11,970 --> 00:01:20,520
We want to intercept and take over the request from the service worker and then provide our own response.

12
00:01:20,550 --> 00:01:27,570
I'm just going to tab down after the first event listener and then add the second one about that the

13
00:01:27,570 --> 00:01:36,390
block of code from line 20 to 24, which is the event listener that's going to listen out for a fetch

14
00:01:36,540 --> 00:01:37,260
event.

15
00:01:37,470 --> 00:01:47,110
The first thing here is to prevent the default action from occurring by using the respond with method.

16
00:01:47,130 --> 00:01:56,490
So on line 21 here I've got the respond with method and we using this to prevent the default action

17
00:01:56,490 --> 00:02:03,800
from occurring because we are working with a fetch event object online about 21.

18
00:02:04,290 --> 00:02:11,220
The fetch event has a method which is called respond with.

19
00:02:11,730 --> 00:02:18,300
So we're using this method to prevent the default action from occurring.

20
00:02:18,330 --> 00:02:26,850
This is because we are working with a fetch event object, which has a method called respond with.

21
00:02:26,970 --> 00:02:35,430
So what happens is that we will respond with whatever we decide to pass to this method.

22
00:02:35,550 --> 00:02:43,680
The thing to remember here is that we don't actually cache the files, but we cache the responses.

23
00:02:43,680 --> 00:02:54,270
So we have responses that are stored inside our cash and we get we get to pick the response or responses

24
00:02:54,450 --> 00:03:03,340
from our cache, pass them to they respond with methods online to we have the caches object.

25
00:03:03,730 --> 00:03:11,250
What we do is we match the provided request and then return the response.

26
00:03:11,430 --> 00:03:15,210
If there is no response, we then fetch that request.

27
00:03:15,360 --> 00:03:24,810
This is why it is known as a cache first strategy because we are reading from the cache first, and

28
00:03:24,810 --> 00:03:31,030
if it's not in the cache, we go ahead and fetch it over the network.

29
00:03:31,050 --> 00:03:39,720
So let's save the changes and then test the application for offline access from the service worker status.

30
00:03:39,750 --> 00:03:46,890
You can see that the version number has changed, so I'm going to click on the Off-Line tab here and

31
00:03:46,890 --> 00:03:48,180
then refresh the page.

32
00:03:48,330 --> 00:03:54,390
As you can see, we are able to access the application of light.

33
00:03:54,420 --> 00:04:00,690
So what I'm going to do, I'm going to try and add an entry into this to do list offline and then go

34
00:04:00,690 --> 00:04:03,530
online and see if it shows up.

35
00:04:03,540 --> 00:04:05,490
So I've added an item.

36
00:04:05,760 --> 00:04:10,740
I'm just going to click Add and I'm going to go online.

37
00:04:10,810 --> 00:04:14,570
I took off the offline and refresh.

38
00:04:14,580 --> 00:04:19,680
As you can see, this is the item I added when I was offline.

39
00:04:20,070 --> 00:04:24,660
It was able to synchronize itself, not online.

40
00:04:24,690 --> 00:04:27,420
The data also shows up online.

41
00:04:27,450 --> 00:04:32,800
Our application now has offline access, so that's it for this video.

42
00:04:32,820 --> 00:04:33,900
Thanks for watching.

43
00:04:34,110 --> 00:04:35,010
Bye for now.