Implementing a Caching Strategy

[00:00:00]
>> Kyle Simpson: We could just implement a single strategy for all inbound and outbound request. That strategy could be which isn't gonna do much but we can just verify that our router hasn't broken anything, that strategy could be we're going to first make the request and then we're going to store it in cache if we haven't already gotten it in the cache.

[00:00:21]
So what would that look like? Well we're gonna need some fetchOptions.
>> Kyle Simpson: And for example we're gonna need credentials, and I'll say omit here because this won't work for all of our requests but it spoke for a few of them. We're gonna say credentials omit will say cache:"no-store", but what if one of these inbound request is like a forum post.

[00:00:56]
So I may not be able to assume that I'm gonna do like method get maybe you can assume that maybe you know that your web page only does GETs. But if you wanted to say, use whatever request method the inbound request has, then you can say req.method.
>> Kyle Simpson: And also, it may be the case that the request has some headers that the server needs to see and you don't wanna not include those, so you may also wanna to include the headers.

[00:01:35]
>> Kyle Simpson: And depending on your scenario you may need to fine tune these fetch options a little bit differently, so.
>> Kyle Simpson: Now we know that it's possible for a fetch to fail, we're not gonna do our is online checking just yet but we're going to just say let res equals await fetch and the URL that we want to request is reqURL, and the options is fetchOptions.

[00:02:14]
Actually, rather than just in case there might be other things in the URL that we hit stripped off for our URL testing purposes, let's just go ahead and pass along the actual original URL that the browser has requested.
>> Kyle Simpson: So if this works,
>> Kyle Simpson: We will have a res, and it will be res.ok, So now, we have a response back from the server.

[00:02:49]
We don't necessarily need to pass anything about the response at this point, although, that's a valid thing that your service worker might do. It might look inside of a resource and see if it likes what it sees or whatever, but here, we're just gonna say listen, I see that we've got a good successful response from the server so I'm gonna go ahead and cache it, remember we do caching by saying await cache.put.

[00:03:16]
We're gonna use the reqURL, that's the variable we created, that's the key for it. We're gonna use reqURL and we're going to say res.clone and this one it really is important that we say res.clone, and then finally we're going to return res, why are we returning res? Because the response is coming back as the response of the router which is doing the event wait until, and actually just realized we don't wanna use wait until, because this is an on fetch what we wanna use is respond with.

[00:03:58]
That's kind of like wait until but it is actually expecting a real response, so event.respondwith the response that we got from the router. All right, so we've tried this request and we've tried, if it failed, then we tried to, I mean, if it succeeded, then we tried to put it in the cash and we returned it.

[00:04:23]
If it failed for any of the possible reasons, either we got like a network failure, or we just didn't get back a success response like the server. If we didn't get something, then what we might wanna do here is try the fallback of is it in my cache, right?

[00:04:40]
So we've tried to get it from the server, but now we want to say is it in my cache so let's do that, let's,
>> Kyle Simpson: Res = await, actually, I'm gonna need that at a, this is one of the annoying things about block scoping is that you end up having to adjust a lot.

[00:05:03]
Okay, so Res equals await and we're gonna do cache.match(reqURL), so we're asking, is it in the cache? If so,
>> Kyle Simpson: Then we're going to return, and here's another key because we wanna keep that response that's in the cache, we wanna be able to use it multiple times, the thing that we wanna return it's gotta be res.clone instead of just res.