Thus far we're caching one file, the app.js,
now I want to pre-cache all important files to really be able to load our app offline.
So as a first step, we can add another file to the cache
and here I will simply load /index.html, referring to my root HTML page. Because the idea
is if that is cached, at least we should be able to load the page offline and load the script too, the styles
we'll miss and so on
but the HTML code should be loadable.
This still is not in our entire app shell but I want to get there step-by-step.
So let's save this change,
let's go back to our application, as always reload the app and you will get the new service worker waiting
for activation,
let's skip waiting and reload
and now if we inspect our cache storage here, you'll see the index.html file is stored too.
Now let's try ticking offline and reloading and it still fails, under network we see localhost still
fails.
Why does this initial request still fail even though the index.html file which is the first thing
to be requested is stored in our static cache?
Well there is one important reason and that is why I chose this step-by-step approach.
You have to store the exact requests you are about to make,
keep in mind we're storing request, response key-value pairs.
Here we are storing a request to index.html and that's nice,
if I do access/index.html, it indeed loads.
The style is missing
but the HTML is there and as a side note, you see the app.js file also is there because it was cached too
but just slash is a different request,
you're not requesting the index.html file. It will be loaded implicitly behind the scenes but it's
not what you're requesting.
So you have to also cache just slash as a request,
think about this as requests, not as paths, you have URLs here,
you're caching URLs, you are caching requests.
So with that added, with slash added, if you turn off offline mode and you reload and activate the new
service worker and refresh again,
now offline even works on just localhost:8080 because now we cached this request too. This is so important
to understand
which is why I definitely wanted to show this step-by-step.
Now this is nice for understanding it but if we add all the assets we need, all the style files and so
on step-by-step,
we write a lot of code here and we repeat cache add all over the place.
Nothing wrong with that but wasn't there this useful cache addAll
method? Let's use that in the next lecture.