 So welcome to Totally Tooling Tips. This is an episode on DevTools where we're going to talk about our newer Progressive Web App tooling. Yeah. So the reason we have to do this is we recorded an entire video episode, and then everything changed. It's Tuesday, so DevTools has changed. Right, so the resources panel has now been replaced by the shiny new application panel. So I'm currently on Progressive Web App. This is smaller pictures. And some of the newer stuff that we let you preview include your web app manifest. Yeah, so basically, web app manifest is kind of, if you've ever built web apps, so you've had to do icons for different devices and browsers, and you had to put in lots of link tags. Manifest is a JSON file where you can put all of that stuff in one separate resource, and the browser will only go and grab it when it needs it. Yep, so we summarize everything from your name, your short name, through the different theme colors and background colors that you're using. We show you your orientation chosen in your manifest file, and then just preview all the different icon sizes you might have set up. So I've got all of them because I'm crazy. You are crazy. I'm crazy. It also lets you emulate as a home screen if you click on this little link here. That's just the experience where it'll show you OK. Well, what do you want to name this thing? So the reason this is important is because whenever you click on Add to Home Screen, what it will do is it will go through all of the criteria that Chrome looks for to basically decide whether it's going to show the user the banner or not. So it'll be things like, does the web app have a service worker? Does it have a short name? Does it have theme color? And if any of those criteria aren't met, it will print out an error to the console, just saying, yep, you need to have this. And because it's not there, I can't do Add to Home Screen. Cool. So the next thing we're going to take a look at is the service worker panel. So debugging service worker has been historically really, really painful. And I think DevTools has nicely evolved over time to make that experience a little bit sweeter. Yeah, this is definitely the best version of it. It's just really hard when you're starting out to understand what is going on when you're doing this stuff for the first time. But I think it's definitely the nicest version so far. Yeah, so we're going to quickly walk through all the options here. So the first one is an offline checkbox. And basically, if we go and we refresh, you'll see that the app is working offline. This just emulates offline in the same way that the network throttling dropdown will let you do. Nice. Fairly useful when you're testing offline support with service worker. The next option is Update on Reload, which forces your service worker script to update on refresh. So the reason this is super handy is before this existed, what you'd have to do is you'd make an edit to your service worker, you'd save it, you'd go back into your browser, you'd refresh. And once you've refreshed the page, it will still be using the old service worker, because your new service worker will be grabbed by the browser. It will go through an install step. And the new service worker can't take over the page until the old one's gone. So when you check Update on Reload, what it's doing is it will unregister the old service worker, register the new one. And once the new one's ready to go, it will refresh the page so that the page is using the new service worker. So it's one checkbox, so there's kind of a lot of stuff going on behind the scenes. And it's super useful. Next up, we've got bypass for network, virtual bypass your service worker script, and load resources from the network. The reason this is handy is when you're not working on a service worker and you're working on other files, you don't want anything to be pulled from the cache. You just want to be using the files that you've just changed. Then we've got Show All. And Show All will basically show you every single service worker that's registered. Because we've got an increasing number of sites and apps using this, you might find this a little bit noisy. I'd just say you're very unlikely to ever want this until something like foreign service workers come in. We're just letting you know that it exists today, unless they change it tomorrow. But it's here today, at least. What else does this let you do? OK, so you can update your service worker. There's a push option as well. What does that do? Let's head over to your demo. I'm going to guess it's going to do something with push messages. You're so bright, Matthew. Right, so this is a push demo. Matt wrote a while back. We're going to go and we're going to enable push notifications. Your demo worked this time. Yes. Right, so what we're going to do is, if we click Push, it's going to emulate a push event. And you'll see that we get a push notification. This is kind of interesting, because this is the first time I've actually seen or tested this myself in Canary. And they basically added a new feature where it's populating a little bit of data in there, which is kind of super interesting. Slightly weird with the fact that you can't determine what the data is, but it's awesome that it's there, because it does mean that if you wanted to check what data would look like when it comes in your service worker, it's now something's there. It's awesome. Sweet. What happens if we click Send to Push via XHR? Does anything happen? It should do. It should do. Did I actually? Oh, I didn't. There we go. I don't know you did a GCM. Just took a while to kick in. So there, because there's no data, it's just like a super generic aid. Thanks for sending this message. Sweet. You can also go and click on the little name. Oh, you've got a minified service worker. Yeah, man. What do you eat? OK, let's go to someone who hasn't done that. And if we click on Source, you can go and you can check out the source to your service worker. He just doesn't care about users' data. That's expensive. So the reason this is actually super cool is the fact that you can now add breakpoints to your service worker like you would any normal JavaScript file. So when that code gets executed in the service worker, it will actually stop the service worker from running and you can start debugging stuff like you normally would with DevTools, which is noise. Sweet. So you can see that we've got these activity indicators for the status. So green means that something is active and it's running. You can stop your service workers. We can go and do that. They'll say activate and stopped. You can focus your clients. So we're currently focused. You can also hit details and it'll show you in line any of the exceptions or error messages you've been getting. So the one thing that used to exist here that's been removed is you should be able to have an inspect button that you would click and it would open up an entirely different DevTools just for service worker. I still kind of like having the two DevTools, one for the page, one for service worker. But I think the DevTools team are trying to get everyone to work just out of the one DevTools and change different contexts. So in this case, all the service worker logs would show up in the one console and you select different frames within that. So it's kind of interesting. It's the only thing that I'm anxious about, I guess. But this is quite a nice way of at least servicing just the errors. Because I'm ADD, I'm just going to click clear and now all of our problems have gone. If only life was that simple. If only life was that simple. Clear storage is basically the best thing ever. If you're developing any non-trivial progressive web app and you're trying to support offline with service workers, you're maybe using storage mechanism like indexdb, your local storage or session storage, you've probably run into this situation where you need to manually go in and clear all of your different storage mechanisms out and then head to different panels to unregister service workers. It's this whole super tedious thing. Yeah, I've ended up writing helper scripts that I just drop into the console to delete everything. It's annoying when you get to that point. So in an effort to make Matt Gaunt's redundant, there's now a clear site. Well, that escalated quickly. There's now a clear site data button. I think the label for this might be changing. The button is still there. Basically what this does is it almost resets the world for you, which is kind of really nice. It does all the things it says above, like it will unregister your service workers and your storage and clear out your cache API storage. And yeah, this does seem like an obvious feature, but at the same time it hasn't existed for the longest time. And when you start working with service workers, you realize how quickly you just get into a mess and you just want to reset everything. And the old solution for that was to just develop an incognito windows. So this is super welcome. This is so nice. We were talking about cache storage because this is was resources panel. You can still go in and debug all of your different storage mechanisms that includes the cache API. So in the case of my app, I'm using SW pre-cache, so I have all these entries. For someone like Paul Luce's voice memos app, we go in here and you'll just see that there's an entry that's got all the different files listed that he's got cached in the cache API. I wonder why the response is empty. It's all perfect. It's all perfectly perfect. And you've also got other options in here like frames. Don't just say that like it is. No one knows what frames is. I don't know what this does anymore. It's basically a breakdown of different things from your own different assets that I did. Let's assume that it does that. Maybe this gives us something to do another episode on. Next week on Totally Tallin' Minitibs, what is frames under applications tab? All right, so I feel enlightened. That is the application tab. Is there anything we're forgetting? You've got device art on the screenshot that is also new. Device art. So Canary DevTools now lets you preview device art for a few different devices. We've got the Nexus 5x in there. I think the 6 might also have device art. It does not. It does in the very, very latest version, I think. So it's coming. I think it's coming. But basically device art is awesome. It just lets you see what it would maybe look like on an actual device. And it adds in the navigation bar at the top. You can go in here and get your little navigation bar in. I have asked for us to take the theme color into account. Oh, yeah. You could do that. Yeah, that'd be really nice. And then it'll, yeah. Assume that by the time you've seen this, maybe we've convinced them. And this is already out to date. And if not, raise issues. Raise issues. Maybe we can get it. All right, so that is the application tab. Hopefully you'll find that a lot of this stuff makes it a lot easier to develop and debug your progressive web apps. That's it from us. Thanks for listening. Bye.