Check out a free preview of the full Progressive Web Applications and Offline course:
The "Service Worker Demo" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates using conditional logic with a Service Worker that can intercept network request.

Get Unlimited Access Now

Transcript from the "Service Worker Demo" Lesson

[00:00:00]
>> Steve Kinney: The example I just showed you is silly right? Why would you ever do that, right? If you wanted to respond on the page, why wouldn't just respond with that page, right? The interesting part is like, okay, a user made a request, figuring out what exactly we wanna send them is where I think things get a little bit interesting.

[00:00:19] So we're gonna take a look at an example together, this one's called intercepting fetch. And we'll,
>> Steve Kinney: This is intercepting-fetch@glitch.me, and we'll go ahead and,
>> Steve Kinney: Let me biggerize everything for you, that's a technical term, biggerize.
>> Steve Kinney: Cool.
>> Steve Kinney: If we go in here, we take a look at the code, we have a fetch event in here.

[00:01:09] We have some URLs, and these are mostly stored in variables right now cuz they're on Glitch's CDN. But they're very long, and you can assume that one is a URL of a picture of the Beatles. The other one is a URL of a picture of Oasis, like same thing, right?

[00:01:33] And we have this other remote image. And you can see, in this fetch event, we'll console log the request. We'll say, hey, if the event's request URL equals the Beatles, if they're looking for a picture of the Beatles. In that case, we will intercept the request and we'll respond with sending a network request to go get a picture of Oasis instead and giving them that.

[00:02:03] So if we go back over, I do need to clear out this service work. You can see that this is a picture of Oasis.
>> Steve Kinney: If we go to the index@html we are definitely asking for a picture of the Beatles, right?
>> Steve Kinney: We intercept with the request. We said, I know what you asked for, let me go get this other thing from the network and give it to you.

[00:02:28] If we threw in some different picture, if we threw in,
>> Steve Kinney: A picture of,
>> Steve Kinney: I can edit right now, log in later. If we place another image, well, that wouldn't hit our IF statement, and it would go through to the network. But we have the ability to write conditional logic.

[00:02:50] Hey, if it has this very particular URL, like they want a picture of the Beatles, we're not giving a picture of the Beatles, we're giving them a picture of Oasis, right? And you could write, you have the full power of the JavaScript programming language with you. If you wanna say, if it contains the word Beatles, guess what, and it is an image, you're getting a picture of Oasis, right?

[00:03:09] You can take the troll level very high with this and write all this conditional logic to check, but we can basically take any request that comes through. Either let it go through to the network or, b, intercept it with something else. Right now we are making a different network request and we're basically redirecting it and responding with the thing that was redirected to.

[00:03:30] In a little bit, we'll talk about, hey, last time you were online or when we load it, we cached a bunch of things. Well, let's try to do the request, if we can't do the request, here's a cached version, right? We can write this logic that says, we want the most recent image, but if we can't, here's one that we already have, right?

[00:03:51] And a bunch of different things, there's a lot of strategies around this. It's like, yeah, get me a thing, if I can't get a thing, get the one from cache. That is one of the very straightforward use cases, right? At one part we're gonna show you all the different ways.

[00:04:03] Depending on what you're trying to build for your app and depending on which part of your application, you want to use a different strategy and we'll talk about that in a little bit.