Hello and welcome to the part two of implementing offline access, using cash in this part of the video.
I'm going to add another event list not that will enable us to access the resources that have been cash
and get them displayed on the client side when the application is accessed offline.
I'm going to add another event listener, which is going to listen out for fetch and what this will
do.
It will enable the app to hook into the event when a URL is being fetched and then take over that event
and provide an actual 8p response that will then be displayed in the client.
There are different strategies for caching, but we will implement a cache first strategy.
What we want to do is intercept the service workers fetch event.
The service worker has a fetch event which is built into the browser's functionality.
We want to intercept and take over the request from the service worker and then provide our own response.
I'm just going to tab down after the first event listener and then add the second one about that the
block of code from line 20 to 24, which is the event listener that's going to listen out for a fetch
event.
The first thing here is to prevent the default action from occurring by using the respond with method.
So on line 21 here I've got the respond with method and we using this to prevent the default action
from occurring because we are working with a fetch event object online about 21.
The fetch event has a method which is called respond with.
So we're using this method to prevent the default action from occurring.
This is because we are working with a fetch event object, which has a method called respond with.
So what happens is that we will respond with whatever we decide to pass to this method.
The thing to remember here is that we don't actually cache the files, but we cache the responses.
So we have responses that are stored inside our cash and we get we get to pick the response or responses
from our cache, pass them to they respond with methods online to we have the caches object.
What we do is we match the provided request and then return the response.
If there is no response, we then fetch that request.
This is why it is known as a cache first strategy because we are reading from the cache first, and
if it's not in the cache, we go ahead and fetch it over the network.
So let's save the changes and then test the application for offline access from the service worker status.
You can see that the version number has changed, so I'm going to click on the Off-Line tab here and
then refresh the page.
As you can see, we are able to access the application of light.
So what I'm going to do, I'm going to try and add an entry into this to do list offline and then go
online and see if it shows up.
So I've added an item.
I'm just going to click Add and I'm going to go online.
I took off the offline and refresh.
As you can see, this is the item I added when I was offline.
It was able to synchronize itself, not online.
The data also shows up online.
Our application now has offline access, so that's it for this video.
Thanks for watching.
Bye for now.