1 00:00:00,090 --> 00:00:02,080 Hello and welcome to this video. 2 00:00:02,100 --> 00:00:08,790 In this video, I'm going to be implementing offline access to our app using cash. 3 00:00:08,970 --> 00:00:11,670 This is going to be a two part video. 4 00:00:11,680 --> 00:00:19,080 I'm going to be using the service worker to implement the caching for the application. 5 00:00:19,140 --> 00:00:26,990 The first thing I'm going to do is to create a variable that is going to store the name for the cache. 6 00:00:27,000 --> 00:00:35,130 I'm going to create another variable that is going to store all the URL for the application that contains 7 00:00:35,280 --> 00:00:37,840 the resources we want cached. 8 00:00:37,860 --> 00:00:42,180 So I'm going to create the variables are both the event list, not online. 9 00:00:42,180 --> 00:00:50,790 Number one is the name I want to call the cache of Kodi to do App Dash of light. 10 00:00:50,940 --> 00:00:57,090 It's going to be stored in a variable called cache name, which is a constant. 11 00:00:57,270 --> 00:01:01,260 That means I don't expect it to change on line number two. 12 00:01:01,410 --> 00:01:07,770 I've got another constant called pre cache, and this is going to be an array that's going to store 13 00:01:07,770 --> 00:01:11,310 all the URLs for the resources I want to cast. 14 00:01:11,340 --> 00:01:14,730 So line number three here is the root of the application. 15 00:01:14,730 --> 00:01:18,450 So some of this is the root of the application that we want that cached. 16 00:01:18,540 --> 00:01:21,460 I want the indexed HTML cached. 17 00:01:21,480 --> 00:01:23,490 I want they say it has file cache. 18 00:01:23,490 --> 00:01:29,240 I want the script to JavaScript file cached and also on the manifest file cached. 19 00:01:29,250 --> 00:01:33,100 Now that I've defined what I want to be cached. 20 00:01:33,120 --> 00:01:39,930 We need to implement the caching inside the event listener. 21 00:01:40,110 --> 00:01:48,740 So after Line 14 here, I'm just going to tab down and add the block of code that will do the caching. 22 00:01:48,750 --> 00:01:56,490 So I've added a block of code from line 14 to line 16 that will do the caching event. 23 00:01:56,490 --> 00:02:01,210 Listeners are mainly asynchronous in operation. 24 00:02:01,230 --> 00:02:11,820 So we have to tell the event listener to wait until all the URLs that we have specified have been fully 25 00:02:11,940 --> 00:02:12,570 cached. 26 00:02:12,720 --> 00:02:21,150 We want it to be fully cached before the event listener exits the operation on line number 14. 27 00:02:21,240 --> 00:02:32,130 We have the event object, which basically has a method that is called wait until and we have to pass 28 00:02:32,130 --> 00:02:40,530 in a promise that will execute completely before our event listener exits. 29 00:02:40,560 --> 00:02:49,290 This is because we want all the resources to be fetched from the server and cached completely before 30 00:02:49,290 --> 00:02:51,610 the event listener exits. 31 00:02:51,740 --> 00:02:52,920 Online, May 15. 32 00:02:53,100 --> 00:03:00,690 We have an object that is called caches, and we use that object to open up. 33 00:03:00,930 --> 00:03:09,030 The cache is in the name of the cache, and once it is open, we will work with that cache by adding 34 00:03:09,270 --> 00:03:15,330 the URLs to the cache using the method called add or. 35 00:03:15,420 --> 00:03:17,790 And inside the method called Add. 36 00:03:17,790 --> 00:03:27,060 Or we pass in the variable that contains all the URLs of the resources we want to cache to that little 37 00:03:27,060 --> 00:03:27,750 block of code. 38 00:03:27,750 --> 00:03:34,050 There should do some caching for the application, so I'm going to save what I've done. 39 00:03:34,200 --> 00:03:40,500 So I've opened up the application inside the Chrome developer tool from the menu items. 40 00:03:40,500 --> 00:03:45,480 Here, I'm going to click on the application option and then click on storage. 41 00:03:45,600 --> 00:03:53,070 And if you look on the storage, on the the storage option, here we can see we have two sets of storage. 42 00:03:53,100 --> 00:03:58,170 We have the cache storage and then we have the service worker. 43 00:03:58,190 --> 00:04:04,080 So if I browsed down, where is court cache, I expand that. 44 00:04:04,590 --> 00:04:09,070 You can see the name of the cache I've specified. 45 00:04:09,090 --> 00:04:16,470 That's the name of my cache and that is the URL that it is caching from. 46 00:04:16,500 --> 00:04:23,670 So if I click on the link for the cache, we can see everything that it has cached. 47 00:04:23,730 --> 00:04:26,470 These are all the URLs that had been cut. 48 00:04:26,490 --> 00:04:29,250 You can see the responses, you can see the content. 49 00:04:29,580 --> 00:04:34,320 And this is the content length and all the information. 50 00:04:34,320 --> 00:04:41,310 So if I click on one of the cached resources you can see in, you can see a preview of what has been 51 00:04:41,310 --> 00:04:41,760 cached. 52 00:04:41,790 --> 00:04:46,860 You can also take a look at the header if you click on the service workers here. 53 00:04:47,490 --> 00:04:56,500 The service worker version number should always change when there has been an update to the application. 54 00:04:56,520 --> 00:04:59,850 So on the next update, my service will. 55 00:05:00,150 --> 00:05:06,120 Should be to nine eight now that our resources have been cashed. 56 00:05:06,150 --> 00:05:09,650 Let's see if we can access them offline. 57 00:05:09,660 --> 00:05:16,860 So from the application, tap where we've got service worker, we can check this offline box when you 58 00:05:16,860 --> 00:05:22,350 check that the same for network comes on, which means that you no longer on the network. 59 00:05:22,710 --> 00:05:27,690 So if we click on the network, tap here we can see that it's turned off lights. 60 00:05:27,690 --> 00:05:31,050 If I click on the dropdown, there are different options. 61 00:05:31,200 --> 00:05:38,580 You can also trot all that is emulate with different speeds, for example, 3G or 3G. 62 00:05:38,580 --> 00:05:46,620 But once you took the offline button on from the application menu here on the the service worker, it 63 00:05:46,620 --> 00:05:50,990 also switches it off in the Network tab. 64 00:05:51,180 --> 00:05:54,210 So those are the two ways you can go offline. 65 00:05:54,240 --> 00:05:59,040 Now that the offline check is on, let's refresh the page and see. 66 00:05:59,070 --> 00:06:03,750 As you can see here in the emulator, he's saying no internet. 67 00:06:04,280 --> 00:06:10,920 And we also cannot see any data from the application on the dropdown here. 68 00:06:10,950 --> 00:06:15,660 There are different devices you can use to emulate your app. 69 00:06:16,080 --> 00:06:22,980 So the default here is Moto G4, so you can try it on different devices if you wish to do so. 70 00:06:23,400 --> 00:06:26,460 And also add your own custom one. 71 00:06:26,580 --> 00:06:35,940 The reason we can't access the content of the application offline despite the resources being cast, 72 00:06:36,540 --> 00:06:44,490 is because we have not told the service worker what to do after caching the resources. 73 00:06:44,970 --> 00:06:53,100 So what we want to do inside the service workout, we want to add another event listener that will listen 74 00:06:53,100 --> 00:06:54,450 out for fetch. 75 00:06:54,930 --> 00:07:04,380 This will enable the application to hook into the event when a URL is fetched and take over that event 76 00:07:04,860 --> 00:07:13,080 and then provide an actual HTTP response that will be displayed in the client. 77 00:07:13,620 --> 00:07:17,490 We will implement that in the next video. 78 00:07:18,060 --> 00:07:19,140 Thanks for watching. 79 00:07:19,500 --> 00:07:20,370 Bye for now.