1
00:00:02,330 --> 00:00:06,030
Thus far we're caching one file, the app.js,

2
00:00:06,140 --> 00:00:12,340
now I want to pre-cache all important files to really be able to load our app offline.

3
00:00:12,890 --> 00:00:17,660
So as a first step, we can add another file to the cache

4
00:00:17,780 --> 00:00:25,200
and here I will simply load /index.html, referring to my root HTML page. Because the idea

5
00:00:25,200 --> 00:00:31,940
is if that is cached, at least we should be able to load the page offline and load the script too, the styles

6
00:00:31,940 --> 00:00:33,190
we'll miss and so on

7
00:00:33,350 --> 00:00:35,670
but the HTML code should be loadable.

8
00:00:35,690 --> 00:00:40,590
This still is not in our entire app shell but I want to get there step-by-step.

9
00:00:40,730 --> 00:00:42,640
So let's save this change,

10
00:00:42,890 --> 00:00:48,110
let's go back to our application, as always reload the app and you will get the new service worker waiting

11
00:00:48,110 --> 00:00:49,170
for activation,

12
00:00:49,220 --> 00:00:51,020
let's skip waiting and reload

13
00:00:51,620 --> 00:00:59,210
and now if we inspect our cache storage here, you'll see the index.html file is stored too.

14
00:00:59,240 --> 00:01:06,110
Now let's try ticking offline and reloading and it still fails, under network we see localhost still

15
00:01:06,110 --> 00:01:06,990
fails.

16
00:01:07,220 --> 00:01:14,470
Why does this initial request still fail even though the index.html file which is the first thing

17
00:01:14,480 --> 00:01:19,640
to be requested is stored in our static cache?

18
00:01:19,940 --> 00:01:25,430
Well there is one important reason and that is why I chose this step-by-step approach.

19
00:01:25,580 --> 00:01:29,560
You have to store the exact requests you are about to make,

20
00:01:29,570 --> 00:01:33,640
keep in mind we're storing request, response key-value pairs.

21
00:01:33,950 --> 00:01:38,130
Here we are storing a request to index.html and that's nice,

22
00:01:38,210 --> 00:01:42,640
if I do access/index.html, it indeed loads.

23
00:01:42,800 --> 00:01:44,140
The style is missing

24
00:01:44,330 --> 00:01:50,820
but the HTML is there and as a side note, you see the app.js file also is there because it was cached too

25
00:01:51,190 --> 00:01:54,170
but just slash is a different request,

26
00:01:54,170 --> 00:02:00,650
you're not requesting the index.html file. It will be loaded implicitly behind the scenes but it's

27
00:02:00,650 --> 00:02:03,190
not what you're requesting.

28
00:02:03,260 --> 00:02:08,960
So you have to also cache just slash as a request,

29
00:02:08,960 --> 00:02:15,760
think about this as requests, not as paths, you have URLs here,

30
00:02:15,890 --> 00:02:20,240
you're caching URLs, you are caching requests.

31
00:02:20,540 --> 00:02:29,140
So with that added, with slash added, if you turn off offline mode and you reload and activate the new

32
00:02:29,140 --> 00:02:31,910
service worker and refresh again,

33
00:02:32,240 --> 00:02:39,980
now offline even works on just localhost:8080 because now we cached this request too. This is so important

34
00:02:39,980 --> 00:02:40,850
to understand

35
00:02:40,970 --> 00:02:44,760
which is why I definitely wanted to show this step-by-step.

36
00:02:44,770 --> 00:02:50,990
Now this is nice for understanding it but if we add all the assets we need, all the style files and so

37
00:02:50,990 --> 00:02:52,240
on step-by-step,

38
00:02:52,430 --> 00:02:56,980
we write a lot of code here and we repeat cache add all over the place.

39
00:02:56,990 --> 00:03:01,370
Nothing wrong with that but wasn't there this useful cache addAll

40
00:03:01,410 --> 00:03:03,860
method? Let's use that in the next lecture.