Exploring Service Workers

Caching Q&A

Kyle Simpson

Kyle Simpson

You Don't Know JS
Exploring Service Workers

Check out a free preview of the full Exploring Service Workers course

The "Caching Q&A" Lesson is part of the full, Exploring Service Workers course featured in this preview video. Here's what you'd learn in this lesson:

Kyle fields questions about request URLs and friendly URL rewriting in relation to caching.


Transcript from the "Caching Q&A" Lesson

>> Kyle Simpson: Yes?
>> Student: So in this example, you have two images. Can you cache all images in a folder, or do you have to specify?
>> Kyle Simpson: The way we're gonna do this, you need actual URLs here. You, of course, since this is programming code, can do whatever you want.

So for example, if you had a API that you could hit on your server, and it would tell you all of the photos in the pics thing from Facebook, or whatever. And then you knew all of those IDs, and actually, later in our exercise, we're gonna do that.

We're not gonna hard code our post IDs in here, we're gonna call an API to get our post ID. And then we're gonna generate our URLs from that list of post IDs. So if you had an API for all those resources in your photos directory, for example, you could.

But the service worker needs to know what to request. I can't really request the server to just give it whatever it wants. It has to say, I want this. And part of the reason for that is that we need some unique URL to store it as the key in the cache.

So each resource that we're sticking into a cache needs to have a URL that we've requested, so we have to know that URL. We can either hard code it, or we can programmatically generate it, or we can get that data from the server, or any mixture thereof.
>> Kyle Simpson: What's that?

>> Student2: Line 15, you're missing a comma.
>> Student: Line 15, you're missing a comma.
>> Kyle Simpson: Thank you.
>> Student3: So if you've got the dot extensions on the CSS and JS, etc, but not on the HTML-
>> Kyle Simpson: Because our server is doing friendly URL rewriting for our pages. The server has this logic built in that if you ask for /offline, it goes and gets offline.html.

If you ask for /contact, it actually loads up contact.html. So I did that URL routing on the server for friendly URLs. But it doesn't do URL rewriting for our static assets, like CSS and JavaScript.
>> Kyle Simpson: So in other words, the URLs that you list here are the URLs as they would be loaded from the client, to the server, whatever that is.

If your URLs have HTML on the end of them, then you need to put an HTML here. It's not gonna do any magic of figuring that out, that's just that the server doesn't expect .html.
>> Kyle Simpson: Remember, here in our page, when we've been clicking around, and it just says /contact on the end, it doesn't say contact.html.

That's not accidental, that's URL routing logic that I have built into the server.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now