1 00:00:02,190 --> 00:00:07,330 To start using the cache API, we have to decide what we want to cache. Now attached to this video, you'll 2 00:00:07,350 --> 00:00:10,380 find an updated version of our course project, 3 00:00:10,380 --> 00:00:15,470 let me quickly walk you through what I changed and what we need to change. 4 00:00:15,510 --> 00:00:18,900 Now obviously, you can already see that this card here in the middle is new. 5 00:00:19,190 --> 00:00:24,960 Now it's some semi-dynamic content, later in the course, we will make this fully dynamic and you will even 6 00:00:24,960 --> 00:00:27,030 have a chance of adding your own content. 7 00:00:27,300 --> 00:00:29,430 So for now, what I changed is in the feed.js 8 00:00:29,490 --> 00:00:37,050 file. I added this create card method where I just create a couple of HTML elements and assign some 9 00:00:37,050 --> 00:00:43,740 classes using classes from that material-design-lite styling package I use in this course. 10 00:00:43,890 --> 00:00:50,270 By the way, I call upgrade element here at the end to allow that package, the material-design-lite package to 11 00:00:50,310 --> 00:00:53,540 do some behind the scenes work to make this really look good. 12 00:00:53,880 --> 00:00:56,320 So this is what Create Card does here, 13 00:00:56,370 --> 00:00:59,780 I added this function and I added this fetch call. 14 00:00:59,790 --> 00:01:03,060 Now here I don't fetch any actual data I use, 15 00:01:03,060 --> 00:01:06,190 I reach out to HTTP bin, make a get request, 16 00:01:06,210 --> 00:01:10,250 so this is a real request but I never use the response data. 17 00:01:10,290 --> 00:01:16,770 Instead inside create card, I use some hardcoded dummy text or dummy values like the image which is 18 00:01:16,790 --> 00:01:20,700 hardcoded and the title here as well as the location. 19 00:01:20,940 --> 00:01:25,380 As I said later in the course, we will replace this with some content which is really fetched from a 20 00:01:25,380 --> 00:01:26,300 server. 21 00:01:26,400 --> 00:01:27,490 For now, this will do though, 22 00:01:27,500 --> 00:01:33,420 the key thing is this is content which will not work if we have no internet connection. 23 00:01:33,420 --> 00:01:36,050 Now there are a couple of other things I want to do together with you. 24 00:01:36,210 --> 00:01:43,350 For one, let's get rid of all these log messages here, all these log messages whenever we're fetching something. 25 00:01:43,380 --> 00:01:44,690 So in the sw.js 26 00:01:44,720 --> 00:01:48,170 file, make sure to remove that log statement. 27 00:01:48,180 --> 00:01:54,430 For now, I'll just respond with the fetch event we made and in the app.js file, there 28 00:01:54,440 --> 00:01:57,860 I also want to get rid of all our promise code and so on. 29 00:01:57,930 --> 00:02:02,330 It was nice having it and I still leave to code here to include the polyfill 30 00:02:02,610 --> 00:02:09,100 but I don't want to use all that dummy code down there where we create a promise and send a fetch request, 31 00:02:09,180 --> 00:02:12,180 so I will remove all of that to clean up the app.js 32 00:02:12,210 --> 00:02:16,980 file. The image here by the way was also added in the images folder, 33 00:02:16,980 --> 00:02:24,240 that's the image we're loading in this create card function. With that if I save this, make sure that 34 00:02:24,270 --> 00:02:29,550 under network in your developer tabs, the cache is disabled and make sure that your development server 35 00:02:29,550 --> 00:02:31,930 is running. With that you can reload, 36 00:02:31,950 --> 00:02:33,580 of course we still get the logs 37 00:02:33,690 --> 00:02:38,880 but if you go to the application, we can activate the new service worker by skipping waiting 38 00:02:39,000 --> 00:02:43,410 and now if we reload, we should see no more fetched logs. 39 00:02:43,410 --> 00:02:46,170 So this is the state of the application I want to work with 40 00:02:46,350 --> 00:02:51,030 and now with that, let's think about what about this component we actually want to cache.