- [Instructor] We have a ServiceWorker, we know how it works, how to update it, how to install, how to listen for events, but it's not yet a network proxy, and we have mentioned that that's the most important of anything. So, we are here in 0301 begin in the serviceworker.js file, and we're going to listen for the most important event here, that's Fetch. So, self, that's the ServiceWorker, addEventListener, "fetch." So, fetch will refire every time a webpage, a PWA, an iframe, or a worker, and my scope, I'm the ServiceWorker, is making a request to the network.
Not matter if that request is going to my server or if it's going to a cross-origin server. In any case we will get that fetch event handler fired. For example, here we can do a console.log saying "Fetch event fired." I will save this, and now we can refresh. We need to check in the app tools that we have update and reload enabled.
Remember, for development purposes it's a good idea to have that update and reload, so every time we reload the page it will force an update of the ServiceWorker file so we will always be working with the latest version of the ServiceWorker, that's the idea. So, if I refresh now I can open the console, I can see my events, Install event!, Activate event!, and let's see what happens, for example, if I open a new window like there and I go to localhost:5000.
You can see that fetch event was fired. Okay, so even if I go to any URL, even URLs that are currently not existing will also fire that fetch event. That's pretty cool. What else can we do here? Going back to the code, we can take that event and inside event there is a request object, and in the request object we do have the URL.
So, I will change the quotes, so we are going to use a template string, and instead of this we are going to say 'Fetch,' and we're going to take from event.request the URL, fetching that URL. So, I'm saving this, I'm going back here, I'm reloading, and let's see what happens. If I open a new window... Now from here I can go to localhost:5000 and we can see Fetching and the URL.
Now if I try anything else, for example, let's say /pwa, we can see that that URL is being fired, so which is pretty cool. Going back to our code, let's add a new file to our project. I'm going to create the very basic styles.css file. This will change just the background color of the body with a color known as antique white, and I'm going to link to that style sheet.
Styles.css with a rel of stylesheet. So, if I go back here and I refresh I'm getting that background color, and we can see in the console that the ServiceWorker is reading that fetch to that CSS file. I'm going back to the code now in the serviceworker.js file. I'm going to do something else, not just doing console.log, because this is the first ability to see everything that's passing through from the browser to the network, but it's not just seeing.
Okay, so I'm saving this and I'm going to the browser. I'm refreshing, and look at this... Now we are seeing Fetching and the URL in the browser like an HTML, so that's currently my response from the server. So, if I try anything in the URL, any URL, I'm seeing this. So, what's going on here, because we cannot even see our HTML anymore.
Now we have registered and activated a ServiceWorker that is seeing every request and is responding with a text. Basically, the website is not getting that from the real network. It's getting that from the ServiceWorker, so we can kill a website pretty easily with this because now I cannot access my website anymore if I don't unregister my ServiceWorker. What happens in the Network tab? So, if I refresh the Network tab, here, that's the preview, that's the response.
We can see the headers, okay, but it's not really receiving this from the real server. In fact, what we can see is that in the size column there is a mention that this is coming from the ServiceWorker. So, it looks like a network response, but it's not. It was generated by the ServiceWorker.
- Service worker life cycle
- Registering service workers
- Handling service worker events
- Updating service workers
- Acting as a network proxy
- Configuring cache storage
- Communicating with clients
- Optimizing web performance