Check out a free preview of the full JavaScript Performance course
The "Service Workers" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:
Service Worker is a new web technology that allows us to programmatically control caches and network requests without relying on HTTP headers.
Transcript from the "Service Workers" Lesson
[00:00:00]
>> Steve Kinney: So I would be remiss if I didn't talk a little bit about Service Worker. This is a workshop on performance. I'm not gonna go too deep into Service Worker because we've covered a lot today and Mike North and I did a two day workshop on Service Worker that I totally recommend you check out.
[00:00:17]
So I'll kinda do like the high level of what a Service Worker is and if you're like that is cool. Guess what there's ten hours of content you can watch exclusively on service worker, and I will not do nearly as much justice to it now, but I totally recommend that you check that out.
[00:00:33]
It's called was it progressive web apps in react was the name of the course.
>> [INAUDIBLE]
>> Steve Kinney: Yeah, progressive web apps is kinda of the umbrella term that Service Worker is a really cool part of, that's effectively like, imagine you can build apps that have native apps' superpowers, but in your browser.
[00:00:49]
It's effectively one of the coolest set of web technologies today, that I think is gonna change a lot of things, especially now that Safari supports it in the new betas. So, effectively when we ask for a webpage, we kinda just talked about this, browser goes to network, get me the webpage.
[00:01:07]
When you have a service worker, effectively it installs itself into the browser like an app. Instead of asking the internet for things, you ask the service worker. Which can be like I actually with Java Script, purposefully put a bunch of files away In the cache and can get them fo you.
[00:01:23]
And you can write a whole bunch of logic. With the headers that we talked about earlier like you set them, if they are kind of like those suggestions to the browser. You set them in the header and you hope the browser respect some. With service worker you can write JavaScript you can be like, I want to put you in the cache, I want to check this before I pull something out of the cache, and you can do a whole bunch of really interesting things.
[00:01:43]
And so because you have that control you can have applications that work offline. Because by definition, if it can work offline it means that you can control the network pretty well to get incredibly fast load times even when you are online, right? Versus, like, setting that response header where it's like hey, maybe don't check, you're in control, I don't know that's going on.
[00:02:05]
So we have some stuff in cache, some stuff on the network. Every time a network request is made it goes to service work, it's like hey, talk to the cache, right? Or talk to the cache, if it's not in the cache talk to the network. Or you can really do cool stuff, like talk to the network and get the fresh version, and then put it in the cache.
[00:02:23]
And if they're offline, go to the cache and get it, right? It gives you a lot of programmatic control over what you do with a network. And if you can theoretically, one pattern that I'm investigating right now is for deploying with those files that have the unique identifiers.
[00:02:41]
It means whenever I deploy a new version of the app, I'm destroying all the caches and everyone has to download everything again, right. Like, great, I've shipped customer value and features. Bad, I am wiping out the cache repeatedly, right? Which means If they had all these false cash, I deploy a new version, they have to pay the cost of getting them again, right.
[00:03:01]
That's a fact of life, there is no real way about that. But what you could do with the service worker in this case is have the service worker, give them the old version the very next time they visit. Show me old version, in the background, well, they're not paying attention.
[00:03:16]
Download the new version, replace the cached one, and next time they still get instantaneous load times no matter what. There's a bunch of really cool stuff that you can do with service worker In the nature of time and the fact there are ten hours of content on this.
[00:03:30]
I going to punt on that one for a little bit. It's in here because I'm also like super excited progressive web app and service work, and I think it's really cool.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops