To start using the cache API, we have to decide what we want to cache. Now attached to this video, you'll
find an updated version of our course project,
let me quickly walk you through what I changed and what we need to change.
Now obviously, you can already see that this card here in the middle is new.
Now it's some semi-dynamic content, later in the course, we will make this fully dynamic and you will even
have a chance of adding your own content.
So for now, what I changed is in the feed.js
file. I added this create card method where I just create a couple of HTML elements and assign some
classes using classes from that material-design-lite styling package I use in this course.
By the way, I call upgrade element here at the end to allow that package, the material-design-lite package to
do some behind the scenes work to make this really look good.
So this is what Create Card does here,
I added this function and I added this fetch call.
Now here I don't fetch any actual data I use,
I reach out to HTTP bin, make a get request,
so this is a real request but I never use the response data.
Instead inside create card, I use some hardcoded dummy text or dummy values like the image which is
hardcoded and the title here as well as the location.
As I said later in the course, we will replace this with some content which is really fetched from a
server.
For now, this will do though,
the key thing is this is content which will not work if we have no internet connection.
Now there are a couple of other things I want to do together with you.
For one, let's get rid of all these log messages here, all these log messages whenever we're fetching something.
So in the sw.js
file, make sure to remove that log statement.
For now, I'll just respond with the fetch event we made and in the app.js file, there
I also want to get rid of all our promise code and so on.
It was nice having it and I still leave to code here to include the polyfill
but I don't want to use all that dummy code down there where we create a promise and send a fetch request,
so I will remove all of that to clean up the app.js
file. The image here by the way was also added in the images folder,
that's the image we're loading in this create card function. With that if I save this, make sure that
under network in your developer tabs, the cache is disabled and make sure that your development server
is running. With that you can reload,
of course we still get the logs
but if you go to the application, we can activate the new service worker by skipping waiting
and now if we reload, we should see no more fetched logs.
So this is the state of the application I want to work with
and now with that, let's think about what about this component we actually want to cache.