1 00:00:02,280 --> 00:00:07,110 In the last lecture, we started adding parts of our app shell to the cache, 2 00:00:07,110 --> 00:00:15,090 now let's make this a bit easier by using addAll. addAll actually takes an array of strings where each 3 00:00:15,090 --> 00:00:18,620 string represents a URL of the request we want to send 4 00:00:18,720 --> 00:00:25,850 and again just as add, the service worker will go ahead make the HTTP request and store the request response 5 00:00:25,860 --> 00:00:30,340 key-value pair in the cache storage, in the given cache we're opening here. 6 00:00:30,720 --> 00:00:38,160 So let's add all the URLs we already have here to that and let's all the other URLs you 7 00:00:38,160 --> 00:00:38,990 want to store, 8 00:00:39,000 --> 00:00:40,320 now there are a couple of those. 9 00:00:40,500 --> 00:00:48,560 Besides these files here, we also have a /src/js/feed.js file which makes sense 10 00:00:48,570 --> 00:00:52,460 storing. We probably also want to store our polyfills, 11 00:00:52,470 --> 00:01:03,740 so let's store js/promise.js and let's store src/js/fetch.js or do we? 12 00:01:03,870 --> 00:01:08,040 What's your take on these two requests being stored? 13 00:01:08,040 --> 00:01:12,100 Think about it for a second and then I'll give you my opinion on that. 14 00:01:15,280 --> 00:01:19,730 Does it make sense to store these polyfills in our cache? 15 00:01:20,740 --> 00:01:26,340 In my opinion, it doesn't because we use these polyfills for older browsers. 16 00:01:26,450 --> 00:01:33,580 Now these browsers won't support service workers anyways, so there's no value in storing these files 17 00:01:33,640 --> 00:01:34,940 in the cache. 18 00:01:35,290 --> 00:01:41,160 If we store them there, we only load them for browsers which don't need them, 19 00:01:41,440 --> 00:01:43,900 so we can also remove them from there, 20 00:01:43,960 --> 00:01:46,750 it doesn't hurt if we don't have them cached. 21 00:01:46,750 --> 00:01:52,510 Now from a performance perspective, storing them in the cache might still be worth it because even modern 22 00:01:52,510 --> 00:01:57,960 browsers have to load these files because we simply import them in the HTML file. 23 00:01:58,060 --> 00:02:03,400 Now that is something you can optimize in your build workflow if you have one, to only include or to 24 00:02:03,400 --> 00:02:08,090 conditionally load these polyfills only on browsers where you need it. 25 00:02:08,250 --> 00:02:14,770 Now here, I will add them to the cache for the performance reason so that we can quickly load them 26 00:02:15,010 --> 00:02:21,130 but I want to give you or I want you to keep that in mind, that these are only needed on browsers which 27 00:02:21,130 --> 00:02:22,680 don't support service workers 28 00:02:22,780 --> 00:02:29,380 but since we have to load the files on all browsers, caching them might still make sense, only because 29 00:02:29,380 --> 00:02:33,370 we don't have a build workflow where we would conditionally load this though. 30 00:02:33,580 --> 00:02:38,770 If you have such a workflow or have any other set up, this might not make sense, here 31 00:02:38,770 --> 00:02:40,660 it does however. 32 00:02:40,840 --> 00:02:46,210 So with that, we loaded these Javascript files, there's one other file we should store, source Javascript 33 00:02:46,420 --> 00:02:52,270 and that's the material.min.js file, a file required by that package I'm using, the material 34 00:02:52,270 --> 00:02:54,890 design lite package. 35 00:02:54,980 --> 00:02:56,970 So these are Javascript files, 36 00:02:57,100 --> 00:02:58,740 what about CSS? 37 00:02:58,760 --> 00:03:00,970 Let's have a look at these files too. 38 00:03:01,010 --> 00:03:12,910 There I'll store src/css/app.css and src/css/feed.css, 39 00:03:13,330 --> 00:03:16,130 what about help.css and the index.html 40 00:03:16,130 --> 00:03:18,190 file in the help page? 41 00:03:18,190 --> 00:03:24,290 We could pre-cache that but I want to store the bare minimum app shell we have 42 00:03:24,490 --> 00:03:31,200 and also parts we need to make our front our first page run, like the feed.js file. 43 00:03:31,210 --> 00:03:37,130 This is why I don't pre-cache the files from the other parts of the app, 44 00:03:37,180 --> 00:03:43,290 however you'll soon learn how to dynamically add files to the cache once the user visited a given page, 45 00:03:43,300 --> 00:03:46,860 so that you can provide them on future visits too, 46 00:03:46,870 --> 00:03:49,210 for now I won't pre-cache them though. 47 00:03:49,780 --> 00:03:53,430 So these are the Javascript, HTML and CSS files 48 00:03:53,440 --> 00:04:01,270 but we also got some files which are loaded over the wire and we get images. Now in our index.html 49 00:04:01,270 --> 00:04:01,960 file, 50 00:04:01,960 --> 00:04:07,690 right now we only use one of these images, except for the one which we load dynamically which isn't important 51 00:04:07,690 --> 00:04:10,050 here because this won't work anyways, 52 00:04:10,060 --> 00:04:12,500 we don't have internet connection to do so. 53 00:04:12,500 --> 00:04:15,430 The image we're using however is this main-image.jpg 54 00:04:15,470 --> 00:04:19,040 file, so pre-caching that makes sense too. 55 00:04:19,120 --> 00:04:24,090 We don't have to but for the best user experience, we should probably add this too, 56 00:04:24,220 --> 00:04:31,350 so let's add /src/images/main-image.jpg. 57 00:04:31,360 --> 00:04:34,290 Now what about the icons here? 58 00:04:34,890 --> 00:04:41,970 Well the icons, you don't really need to pre-cache those in my opinion because yes, you won't be able to add 59 00:04:41,980 --> 00:04:45,720 it to the homescreen if you don't pre-cache 60 00:04:45,770 --> 00:04:48,250 the icons here because the browser can't fetch it 61 00:04:48,360 --> 00:04:54,270 but that shouldn't be an issue here because offline support shouldn't be the permanent state of our 62 00:04:54,270 --> 00:04:55,500 application. 63 00:04:55,530 --> 00:05:00,330 Feel free of course to cache some of the icons if you need them in your application, 64 00:05:00,340 --> 00:05:05,660 I will decide against it and stick to the core assets of my main page and not focus on any other assets 65 00:05:05,760 --> 00:05:07,760 in this application. 66 00:05:07,990 --> 00:05:15,520 Other things I want to pre-cache though are the things I get from CDNs, like the styling package here 67 00:05:15,720 --> 00:05:19,750 from material-design-lite or the Google fonts and image 68 00:05:19,770 --> 00:05:23,520 icon sets. So to pre-cache those, 69 00:05:23,560 --> 00:05:32,420 I'll just copy that link here to the roboto font and I will add it to my cache. Here 70 00:05:32,430 --> 00:05:36,370 however I need the full URL, not just /css and so on 71 00:05:36,420 --> 00:05:42,110 because of course it's not loaded from my localhost, not from my domain here but from a different server 72 00:05:42,180 --> 00:05:43,630 but and this is important, 73 00:05:43,740 --> 00:05:49,530 you can also cache files loaded from other service over a CDN, this is perfectly fine, 74 00:05:49,530 --> 00:05:54,500 doesn't have to be your own server. So this is one thing I will pre-cache here. 75 00:05:54,900 --> 00:05:56,600 One important restriction though, 76 00:05:56,790 --> 00:06:03,690 if you don't want to get an error here, the servers you are pre-caching from should set the CORS headers 77 00:06:03,750 --> 00:06:07,330 to allow cross-origin-access to these files, 78 00:06:07,380 --> 00:06:10,460 if they don't, this will throw an error. 79 00:06:11,040 --> 00:06:14,070 So storing the font here is only one thing, 80 00:06:14,080 --> 00:06:16,590 I also want to store the icons, 81 00:06:17,010 --> 00:06:21,200 so let's add this URL to the cache too 82 00:06:21,750 --> 00:06:28,710 and finally let's also add the link to that CSS file we are using, to our theme, 83 00:06:28,740 --> 00:06:36,140 let's add that too. And with that, I think we're pre-caching everything we need, so we can remove these two caching 84 00:06:36,140 --> 00:06:40,900 lines down there and now see if that works as it should. 85 00:06:41,120 --> 00:06:46,790 Let's go back to our application and reload to fetch the new version of the service worker, activate it 86 00:06:46,820 --> 00:06:49,260 and reload the page 87 00:06:49,460 --> 00:06:53,100 and now click on network 88 00:06:53,340 --> 00:06:56,340 and let's see where the files are getting loaded from. 89 00:06:56,340 --> 00:06:58,760 A lot of stuff is coming from the service worker 90 00:06:59,040 --> 00:07:06,510 and we don't see that many requests coming from the network thereafter, the get request and this cryptic 91 00:07:06,550 --> 00:07:08,030 request. 92 00:07:08,080 --> 00:07:11,490 Now this cryptic requests are our actual fonts, 93 00:07:11,500 --> 00:07:13,020 let me show you what I mean. 94 00:07:13,210 --> 00:07:17,000 If we tick offline and we reload, you 95 00:07:17,130 --> 00:07:17,810 see a lot 96 00:07:17,810 --> 00:07:19,520 works here, looks pretty good, 97 00:07:19,520 --> 00:07:21,830 we have the general styling of the image. 98 00:07:22,010 --> 00:07:26,420 We have the font here but the icon is missing, right, 99 00:07:26,440 --> 00:07:28,680 we have some text here. 100 00:07:28,720 --> 00:07:34,340 The reason for this is that the icons here are fetched differently. 101 00:07:34,360 --> 00:07:41,440 We're pre-caching this link but if we carefully evaluate this link here in our network tab, it's this 102 00:07:41,440 --> 00:07:44,180 one and we have a look at the response, 103 00:07:44,380 --> 00:07:49,810 we see that we get back some font definitions where in the end the fonts are loaded from a different 104 00:07:49,840 --> 00:07:55,080 URL, here it's this cryptic URL with 2fcr. 105 00:07:55,390 --> 00:08:00,520 Well if you have a look at the requests, this is this request which is then again sent over the wire. 106 00:08:00,730 --> 00:08:03,480 So we are pre-caching the font definition, 107 00:08:03,480 --> 00:08:11,410 this works, we're fetching this from cache but the actual icons still are fetched over the wire unfortunately. 108 00:08:11,650 --> 00:08:13,920 So this doesn't work yet, 109 00:08:13,990 --> 00:08:17,410 we'll fix this with dynamic caching in the future, 110 00:08:17,650 --> 00:08:22,570 what does work though is, even though it's not super beautiful because the icons are missing, 111 00:08:22,570 --> 00:08:24,400 the application is generally working, 112 00:08:24,400 --> 00:08:27,340 even the Javascript otherwise we couldn't open that menu here. 113 00:08:27,520 --> 00:08:28,440 So this is working, 114 00:08:28,450 --> 00:08:34,570 we can open our own menu, just the icons are missing and if we navigate to help of course, the app breaks 115 00:08:34,720 --> 00:08:36,640 because we're not caching that. 116 00:08:37,180 --> 00:08:43,660 Now it would be nice if we could cache pages or if we could dynamically add assets to the page, 117 00:08:43,690 --> 00:08:48,970 for example if the user visits this page, maybe we want to cache the things we need to display this cache 118 00:08:49,240 --> 00:08:53,030 thereafter, so that future visits are also possible offline. 119 00:08:53,230 --> 00:08:56,860 The same for these icons which still have to be fetched from the wire. 120 00:08:57,070 --> 00:09:02,620 Maybe it would be nice if we could catch that response and dynamically add it to the cache so that we 121 00:09:02,620 --> 00:09:06,140 have it available for future requests too. Dynamic 122 00:09:06,150 --> 00:09:08,850 caching is what I'll have a look at next.