 So Matt, what's the one feature that keeps you coming back to native apps? Probably offline support. It's it's that whole thing of you know You're gonna be somewhere with flaky network and you just want it to work. Yeah, that's probably it So offline is probably the one thing that keeps me going back to native apps as well I like there's a bunch of apps that I need offline support in like news readers and things like that But there's probably I don't know kids today use a ton of apps that I don't like dating apps back in my day You have to run through the city with like a megaphone screaming what I just know I'd want me You're probably doing it wrong. I'm just gonna say probably um So offline User goes to your webpage. They probably are going to run into a situation where they have a flaky network Maybe they're on the train. Maybe they're you know at a conference or in a hotel Right now in the past we've had capabilities like app cache, which weren't really that reliable and sort of a nightmare Yeah, no one really used it and there's that classic jake Plug post Caches a douchebag. Yeah. Yeah. These days. We're in a slightly better position We've got new apis like service worker now service worker is like a script that's run by your browser in the background Um, and it opens up like the door to lots of new capabilities. Yeah, so there's there's push There's offline support. There's background sync And there's like a whole host of other features coming down the pipeline Yeah, but it's like this really nice low level api that lets you intercept network requests and just take control of what's going on with caching Yeah, so you've got your webpage service worker in the middle before it gets to the network so we can kind of manipulate and Basically outgoing traffic or just keep stuff from going to the network and just return for like a cache So the first step um to getting your app working with service worker is to register a service worker script Um, that allows sort of background functionality Without the webpage necessarily having to be open Yeah, you're just making the browser aware that this is my special service worker javascript file How about we take a look at some code? So the first thing you're always going to want to do is just check whether service worker is actually supported So if service worker navigator Assuming it is you then just call navigator dot service worker dot register and you pass in the path through your service worker file And here we're just using promises. So then in cache to just see whether it worked or not And that's literally it and the kind of the important thing to point out here is It's a it's a progressive enhancement, right? So if you're in a browser doesn't support service worker That never gets called you're just exactly the same land as you would have been without service worker So you get you a same non offline experience without service worker. What about what's inside the service worker script? So the minute that kicks off What the browser will do is it would just go and grab your service worker file and then just start running it in the background of the page Um, so in this case the first thing you're going to want to do is manage the install event So in this case self dot add event listener. So you're just saying in this service worker had this event Um, and you want to open up a cache so caches to open you give it some name That's kind of important because over time you're going to add a different version of a different name space, right? Yep and Once you've got your cache object you just call cache dot at all This is a super helpful little method because you literally pass in an array of Pass and everything inside that array. It will just go and fetch from the network and cache So here you're interacting with the cache api. Yes, so that's different from the htp cache This is a cache that you control so nothing will get deleted or replaced or added to it unless you explicitly do it um But yeah, so the only real caveat to all of this is In the cache dot at all if you add in like some random file that your server like errors out on and returns an error code That will make the install event fail the install event fails That means the service worker won't install which means the web page will never use it It's kind of just a safety mechanism if something bad happens in the install event service worker Just won't affect your page whatsoever. It will retry But it won't actually affect the page. So that's the install event That won't actually give you offline support because it's not actually getting used nothing saying use this use the cache To respond to a network. That's why you've got the fetch event Tada now fetch is using the new fetch api, right in this example We are but the it's slightly unfortunate the fact there's the fetch event And then there's the fetch api because of obviously the name is exactly the same They are slightly different So the fetch event will fire and basically this will happen whenever a page that's controlled by a service worker Makes a request so for the page itself images styles anything It will run through this event and here what we're saying is caches dot match This is a super helpful little method that just says for this request Is there anything in the cache that can actually do like respond with it? Um, so here in the following thing we say if there is a response then just return it Otherwise return the fetch. So here that's where the actual fetch api comes in and this is basically the same as an xhr So it'll go off to the network find it and return it and then that'll pump it up to the browser Those two steps alone will then just give you offline support if you cache everything Okay, so once you've got all of this set up and you want to test that your service worker setup is working correctly You've got to dive into dev tools. Yep. Um, so serve up your app. Check that it works. Um, go to network throttling And just toggle offline Don't and if you refresh your page And yes, we can do the annoying air horn annoys Um, that doesn't just work like on desktop, right? That should still work on phones as well. So It's the best thing ever But yeah, so now, you know, it works offline, which is super awesome And this is kind of super high level There is a much better place to get all of this information in terms of like stepping through service worker Also covers some of the caveats as well as the activate step, which we haven't covered Yeah, if you want to learn more check out the service worker offline codelab over on web fundamentals