PWA Tutorial for Beginners #12 - Fetch Events

Key Takeaways

okay then so far we've seen these two different events from a service worker install and activate but there's another event that a service worker can listen to fetch events now fetch events occur whenever we try to get something from a server now that could be for example a CSS file like this or a JSON file or JavaScript file these are all fetch requests and it could be an HTML page like these or an image or even from a JavaScript file if we were to make some kind of HTTP request that would be a fetch request and all these with fire fetch events that we can listen to inside our serviceworker and then do something with them okay there so we have an indexed or HTML file running in the browser which was initially fetched from a server in our case a local development server at the moment and normally when the app makes a request for a resource like a stylesheet or images or some other page it sends a request from the browser to the server gets the resource and then that resource is sent back to us in a server response to the browser so that then we can use it in the app now we also have a serviceworker sitting right here in the background potentially listening for fetch requests from our app when they happen now this service work essentially acts as a proxy between our app and the server now when our app makes a request for example for an image or CSS file or something else it goes through our serviceworker like this and at this point a fetch event is emitted and the serviceworker can listen for and react to that event now at that point we could intercept the fetch request we could do nothing and later on as normal to the server and back or we could modify the request before it carries on or even stop the request and return a custom response to the app but why would we do all this why intercept the request at all well eventually our serviceworker will be handling cached assets and at some point when a fetch request is made from the browser we might want to stop that request in its tracks so that we get whatever it was requesting from the cache instead so doesn't have to go to the server and back and then return it to the browser right here and this makes for a really quick experience and good offline behavior and this is at the heart of what a serviceworker can do so we'll talk about cached assets a little bit more later on for now let's try it and listen to a fetch event in our serviceworker okay there so in our serviceworker file we want to now add an event listener to the serviceworker to listen for fetch events so i'm going to say self to add event listener like so and inside we want to now listen for the fetch events now we want to fire a callback function when this happens and that callback function takes as a parameter the events objects so information about that fetch request so what I'm going to do in here is console.log fetch events so we know that's occurred and then comma EVT the event object that we get back right here every time there is some kind of fetch events so now let's save this and because we're saving it and changing the code what's going to happen is it's going to reinstall the serviceworker and this is going to fire but it's not automatically going to activate remember it becomes a serviceworker in waiting so let's just go to the browser after saving this we can see over here that we now have all these fetch events and it did activate automatically in my case because if I go to application I've got this checked updates on reload so when I save and it reloads over here it's updating the serviceworker on reload if you don't have that checked you should have to click skip waiting down here or something like that then we Frisch the page ok anyway now we can see all of these different fetch events logged to the console loads of them so that's for every kind of resource our app is trying to get so the CSS files the images or some kind of HTML file and all of those are logged here now if we go to the network it matches up to all of these different requests right here so this should be the same amount really now if we go back to the console and just expand one of these a random one and we go down we can see this request object right here this is information about the request so we can see that this one is a get request to get this thing right here up is so this request ran through the serviceworker and we listened to that fetch request and we can get information about that request likewise all of the other ones as well if we expand this and come down to request we can see this material icons and if we do another one we can come down here this is manifest Jason so all of these different requests for different things now are being heard by our service worker this one styles dot CSS now later on we're going to use this ability of listening to all these different fetch requests when they're being made to good use when we start using caching with the Service Worker on our app but for now I just wanted to show you how to set up an event listener to listen for these fetch events when they happen