 So in this mini-tip, we're going to be looking at service worker toolbox. I'm Matt Gaunt. I've got Adi Osmani with me Adi Osmani Esquire Be awesome to each other So yeah, service worker toolbox is a library that basically helps you with building out a service worker Is service worker toolbox useful for like runtime stuff? Yeah, it's largely for runtime stuff, but it also does some pre-caching and other bits Generally, it's like any boilerplate stuff that you would always have to write and some of the best practices This just bakes into like much easier cleaner APIs. So that's the end goal of it and The entire goal of this mini-tip is just to show you how to get it set up to use it And all we're gonna do is just cash one web page that will basically serve offline So steps are gonna be register a service worker. We then need to grab SW toolbox Then I'm gonna pre-cache our page and then we're gonna serve that page up from the cash That sounds legit. Yeah, Adi pointed out that I didn't need to put numbers next to an editor with line numbers But some people would call it redundant. Yeah, so the first step is gonna be we need to actually Check whether service workers supported which we can do with that if check if service worker navigator And if it is we need to register a service worker So we're gonna register and I'm gonna create a random file and I'm gonna call it SW.js And put it at the root Picking at the root is quite important because it means it can control any part of your web page And that will return a promise So we've got then and catch then we'll basically do the callback if the registration was successful Catch will be if there was any errors or anything like that. Okay So using promises here and there's an article by Jake. Yeah stuff from last year with you for super good super thorough Probably has a couple of poop jokes in there because Jake But yeah, we'll link to that in the YouTube comments because if you're new to promises Definitely worth checking out So I'm adding some logging because you know, I need to check whether Ashley works or not I did add in some stupid errors when I first tried this. So yeah, it's done boo No service workers registered and the reason for that is that SW. Yes. Well, doesn't actually exist So got to make it As you can tell I'm really efficient at typing and because the service worker is just normal JavaScript We can just dump in like a console log to make sure it's working and Chrome DevTools will show us that message Hello from service worker and yay it registered. So that's all good. So first step registering a service worker. We've covered that Next step is to add in SW toolbox before we can add it in we got to get it So you can get it from npm or power. I prefer npm for all the things so go grab that and the GitHub page is like an example of what you need to do which is import scripts and What import scripts does is basically for a service worker It will go and grab that file, but it'll also cache that file for you and make sure it all works So you can always rely on that being there if there's any problems with it like being pulled down or anything service worker When it's still so that's all nice and handy. So we import scripts and It's all funky. I'm gonna ignore that bit because you know reasons and once we import it We can actually use it by just toolbox So it'll be added to the service workers global scope and we can do toolbox options dot debug equals true Now this is really handy when you first start out using this and if you run into any problems with it But it does get pretty spammy pretty quick So if I refresh there you go service worker toolbox now printing out a load of different logs As you start using this more this will get full of stuff, but for now, it's really useful. We know it's working So the next step is gonna be We need to actually pre-cache our own page So what that means is when the service workers installed it will go and grab index page and save it So pre-cache is a method. It takes an array of strings and it will cash whatever's in there So that's an array of different file names that you want to pre-cache, right? Yeah, so you could do CSS JavaScript files anything you want So just doing that we can go refresh the page and then towards will it. Hey, I've got some pre-cache stuff Pre-cache list slash nice. So this stuff gets pre-cached into the service worker cache API. Yes, sweet So it's different to the HP cache is the cache that you control and if service worker or the actual web page can view What's inside it? But that won't actually do anything right now because we need to actually tell the service worker that when you see this forward slash request return Something and what that return is you can control. So here we're saying for a get request on the router and When it's a forward slash get request, I want you to use the caching mechanism toolbox fastest Okay, so it's got toolbox dot fastest. What are the other options that it supports? There's like cache only network only They're fairly self-explanatory but toolbox fastest I've used in this example because what it does is it makes one check in the cache And then it does one request to the network and whichever one is the fastest to respond Wins so normally it's always the cache but the nice thing is is once the network request comes in it will update the cache and It'll be clear why that's important in a short while because I'm gonna show you a demo why it's useful sweet So I'm doing some control shift refreshes because I need to force a refresh of the service worker and the shift basically makes it happen So we've got some extra logging you can see like strategy cache being printed now And that's because it's actually serving up the web page from the cache Awesome to make sure it's definitely working you can go to network panel click on offline Do another refresh and you'll notice that the page is working even though we're offline Awesome the font has changed because Google fonts is being used and it can't actually pull them down So you you can also set up toolbox to offline your Google font stuff as well You most certainly can because it supports cores So if I now change the HTML page and refresh the page because we're offline It's not going to change because there's nothing it can do If I change the no throttling and refresh It's gone back with the fonts, but it's still the same thing very fresh again This time because of the fastest it's updated the cache from the network and now we got a new change That's kind of nice So toolbox.fastus is like a really safe option because it means as you're going along your cache things But you'll also update them over time Which is really nice the problem is it's quite wasteful because it basically means you you're not really doing anything other than Having a cache as you're going along which you can make a lot better Yeah, so there's a couple of mechanisms and it's too much for me to cover in this mini tip But this is your way of saying you're lazy. No, I'm saying that right now. We need to find some better options for it It'll be good But generally there's a couple of options You can use things like if it's a static site maybe build date or a build version of some sort If there's a way with things like CSS and JavaScript if you're using far revisioning that's really handy because you can pre-cache just say only use the cache because I know it's going to be there and Basically once the far-vision updates your service worker updates and then basically everything will just train on from there the browser will update service worker Yeah, and then there's also SWP cash as well Which does loads of crazy stuff with your build process and basically gives you a really Efficient way of doing things and it generates your service worker with everything set up. Yep But it's kind of it's a bit more of an all-or-nothing. It's a bit more Configured the initial set up. Yeah, but it does result in something really solid at the end So you've got two options like SWP toolbox is great If you're first like tinkering with service worker tool like service workers in general, it's really nice Cool, so people should probably go check out the service worker toolbox and SWP pre-cache Build tools and libraries on web fundamentals Yes, yes, maybe yeah, we'll get hope Either