1 00:00:02,090 --> 00:00:07,160 So in the last lecture, we tweaked our configuration to not precache all static files, 2 00:00:07,160 --> 00:00:14,930 now let's dive a bit deeper and let's start implementing routing. Now routing sounds difficult 3 00:00:14,960 --> 00:00:15,890 or strange, 4 00:00:15,890 --> 00:00:21,150 in the end I mean I want to define that for certain URLs to which a request is sent, 5 00:00:21,380 --> 00:00:26,450 I want to cache a response and we already did this in our own service worker. There 6 00:00:26,540 --> 00:00:32,550 if we go back down to fetch, we already check for a URL and do something special upon this URL. 7 00:00:32,750 --> 00:00:40,730 Now we didn't use this to precache our fonts and our CDN response, though that's not entirely true, 8 00:00:40,760 --> 00:00:47,300 the material icons for example yielded another request if you remember and we manage that with our 9 00:00:47,390 --> 00:00:53,410 else fallback where we use the cache then fallback strategy. 10 00:00:53,540 --> 00:00:56,100 So we already kind of did this dynamically, 11 00:00:56,120 --> 00:01:03,700 now we will also implement it dynamically with workbox though in a highly managed and predictable way. 12 00:01:03,800 --> 00:01:04,990 What do I mean with this? 13 00:01:05,120 --> 00:01:06,310 Well let's have a look. 14 00:01:06,530 --> 00:01:12,260 First of all, we need to adjust our configuration and we want to take advantage of the fact that we can 15 00:01:12,290 --> 00:01:20,840 also build up on an input service worker file because I don't really want to alter the output file because 16 00:01:20,860 --> 00:01:23,690 that will be overwritten whenever I generate a new one. 17 00:01:23,690 --> 00:01:27,020 So I will create a new service worker file and I'll name it 18 00:01:27,100 --> 00:01:29,680 sw-base.js for example. 19 00:01:29,810 --> 00:01:35,420 Now later, we'll remove our old service worker file so that we don't clutter this all with service 20 00:01:35,420 --> 00:01:43,760 worker files. Now sw-base is a file which I can use in conjunction with a variation of the workbox generation 21 00:01:43,760 --> 00:01:44,540 command. 22 00:01:44,870 --> 00:01:51,300 Thus far, we use the generate-sw command to generate a brand new service worker, that worked great and 23 00:01:51,300 --> 00:01:56,100 it analyzed all our files and added them automatically for precaching. 24 00:01:56,330 --> 00:02:02,240 Now if we want to build up on an existing service worker file as we do here, we can't use that because 25 00:02:02,270 --> 00:02:07,790 generate-sw will always generate a brand new file which only does precaching. 26 00:02:07,790 --> 00:02:12,850 So what I want to do instead is I want to create inject manifest. 27 00:02:12,880 --> 00:02:20,510 This basically means take an existing file, analyze all my assets and create this manifest you generate 28 00:02:20,520 --> 00:02:21,410 here already, 29 00:02:21,470 --> 00:02:24,230 by the way, not to be mistaken with the manifest.json, 30 00:02:24,230 --> 00:02:25,620 not related at all, 31 00:02:25,910 --> 00:02:30,920 so take this array and then inject it into my manually created file. 32 00:02:30,920 --> 00:02:36,770 Now of course for this to work, we have to give workbox some additional information. 33 00:02:37,070 --> 00:02:43,790 Specifically we have to add this import in our custom file too because otherwise, it tries to inject it 34 00:02:43,790 --> 00:02:46,120 but it's not able to handle it in this file. 35 00:02:46,280 --> 00:02:47,140 So let's add this 36 00:02:47,130 --> 00:02:52,600 import and additionally, we have to add this code 37 00:02:52,610 --> 00:02:54,220 here though a bit altered. 38 00:02:54,360 --> 00:02:58,000 So let's copy it into the base.js file here, 39 00:02:58,040 --> 00:03:00,320 the sw-base.js file 40 00:03:00,420 --> 00:03:04,140 and here we initialize workbox which is required for it to work. 41 00:03:04,140 --> 00:03:11,530 We have to replace file manifest here with an empty array though and when we run this inject manifest 42 00:03:11,530 --> 00:03:18,870 command here through our generate-sw script, workbox will automatically have a look at the configuration 43 00:03:19,140 --> 00:03:26,190 and see that we want to build up on an existing file because we're going to add it here, sw-source, 44 00:03:26,190 --> 00:03:34,220 we want to build up on public, sw-base.js. So it'll see this line and see 45 00:03:34,260 --> 00:03:41,820 OK I should use this file as I input, it will then have a look at this file and see this hook 46 00:03:41,820 --> 00:03:43,700 so to say. It sees 47 00:03:43,790 --> 00:03:45,540 here's my precache command, 48 00:03:45,600 --> 00:03:46,610 I will enter, 49 00:03:46,620 --> 00:03:51,750 I will inject my created file manifest instead of this empty array. 50 00:03:52,110 --> 00:03:53,310 Let's see it in action. 51 00:03:53,490 --> 00:03:59,880 Let's delete the old service-worker.js file which was generated by workbox and let's rerun this 52 00:04:00,210 --> 00:04:03,860 generate-sw command. 53 00:04:03,860 --> 00:04:09,170 Now to us, the command hasn't changed, we still execute the same script but behind the scenes, we're now 54 00:04:09,170 --> 00:04:10,800 using inject manifest. 55 00:04:11,090 --> 00:04:17,690 So if I hit enter here, you will see that I still get the service-worker.js file and it still generates 56 00:04:17,690 --> 00:04:18,840 this manifest, 57 00:04:18,860 --> 00:04:21,260 however it doesn't store it in extra constant, 58 00:04:21,350 --> 00:04:24,240 it added it to precache and that's what I meant, 59 00:04:24,290 --> 00:04:26,500 it replaced this empty array. 60 00:04:26,510 --> 00:04:32,060 This gives us the chance of defining our own code right before we use precache 61 00:04:32,210 --> 00:04:37,880 but after we initialize workbox because I want to take advantage of some other features it offers. 62 00:04:38,030 --> 00:04:42,790 So that is what we'll now do in the next lecture when we'll finally get to implementing that routing.