 Hello again. Long time no see. It turns out that I've been doing other bits and pieces in between working on the media app Small clue. Google. I always coming up. So that's probably what it is anyway What I wanted to do is at least talk about one feature that has been very experimental Always fun to be on their cutting edge of stuff and no different in this particular situation I've been working very closely with one of the Chrome engineers Peter Bevelu and His team as well to try and get some background fetch into the app So what is background fetch background fetch is imagine you were doing a normal foreground fetch the one you called fetch in your code, okay? That works, but if you close the tab or you go to a different URL or whatever The fetch stops. That's how doll the networking stuff normally works background fetch is different in so far as You trigger it from inside your service worker It goes off makes a load of requests that you ask it to make and then you get an event that fires in your service worker to say Hey, that that download is finished. What do you want to do with it? And you can do whatever you want with it. You can put them in the cache You can put them in the the responses in index DB. It's really up to you what you do But that makes us a much more robust Download experience and especially for something like this a media app is probably one of the the perfect vehicles for trying Background fetch out because hey, we've got big videos and what if you want to kind of go off and do something else? Well, obviously it makes sense for you to kind of keep that download going in the background So it's very early days. This is the kind of the very first implementation of background fetch that landed in Chrome So, you know, it's it there's I'm sure there's more to do. I know there is more to do But I just wanted to at least show you around this the code as it is today Just so you've seen it. All right, so let me show you what actually is different on the front is so I have on On the browser I or in the browser on the browser. What is the correct thing in on? by with From I don't know one of those with the browser Involved I have enabled Experimental web platform features in about flags which you should do if you want to test this and that means that we then Get background fetch. Let me show you in the console if I say Background fetch. There you see background fetch fetch. I love the naming of these background fetch manager. That's a thing That won't exist in Window otherwise. So if you actually wanted to feature detect it, you'd say what would you say you'd say you'd say background fetch manager in window True or in Chrome stable or whatever. It'll be false. So there you go. So The background fetch manager background fetching all those other things are Available in the window. They're also available in the service worker So when I said before the service worker does a background download, it's not partly true You can make the foreground do it. Don't don't we'll get to that. Anyway, let me show you around the code a little bit So if you've had a look at the code itself, you'll have seen there's an offline cache JavaScript file which has sort of grown over time and I think it's generally true of this app now that If you remember what way back at the start I said I know nothing about media and this has been a journey of exploration for me knowing now what I know I think I would have structured the app a little differently But that's the nature of these things. Sometimes you kind of get to the end and go, okay, I learned a lot. It's not that it's bad It's just that I know just it's sort of grown organically over time And I think I would love to kind of take a step back and go, okay That's how these pieces would normally interactive all these features have been available at the start Right background fetch. So here's here's the thing here I have it some code that says if you support background fetch, which is pretty much what I just showed you It's that background fetch manager in window. That'll be true or it'll be false if it's true Then I do a download in the background Otherwise I fall back to what I had before which if you recall is the download where we sort of see the pie chart and everything else And it's a foreground fetch. It happens in the page if you close the page Nothing I can do for you So download background what happens in there? Well, what I do is I By this point when I call download back download the background I know which files I need which is like the video file the artwork All the stuff that I wanted I would be fetching to make sure this thing is available like the HTML as well so I Wait till the service worker is ready This is a promise that resolves whenever the service worker is available So if there's no service worker available then background fetch won't be available So that's just how it is and I Fire off an event just for the UI But I also post the message over to the service worker the active service worker with An action which happens to be offline The name that I wanted to To use and the asset so the name is An important thing you tag a particular background fetch so that if you have multiple background fetches going on They have different names In there so that you can differentiate so you can actually have multiple downloads going off at the same time So on the service worker side, let me fire that up Service worker.js there we are on message perfect In the case of the offline I just pull out those values and then I call into this separate class that I've made called background fetch helper And I asked yeah, I asked it to do the fetch So that leads is very neatly on to the background fetch helper in which we can look in here and the background fetch helper The fetch call here So the first thing I do is I'm using Jake's IDB key val library because for two reasons one is IDB is the only store that's available inside a service worker because that's where this code is running Local storage isn't available and do I don't like working with IDB directly if I can avoid it and Jake has written this very small very helpful key value store that works with IDB so Well done Jake But what I do is if you bear in mind that when you start a background fetch you may also then close the tab or Any number of things can happen But what because what's happening is the fetch is being handled by some other machinery somewhere And so we need to kind of between states if you close the tab and you brought the tab back We need to know hang on a minute. There should be a background fetch in progress or or what have you And also when we get all the various responses in from the background fetch We kind of have to tie it back to the original request and that's exactly what I'm doing here So you can see what I do is I set based on the tag name I store in IDB the assets that we were requesting. Okay, and then I Set up this background fetch which you can see is that's the actual background fetch API here on the registration has now a background fetch Property which I think is the background fetch manager And or an instance of that and then you call it fetch and you give it the stuff that it needs It goes off does its thing At the end of which you can see we have I've got currently registered background fetch fail Which would be if one of the responses 404'd 500 did did did did did did did or something else And then background fetched is if all the things that I've requested come back as 200 and or just generally a okay Then we can call on background fetched So in the background fetched now what we have to do is we kind of have to consolidate because we say get We made a request for say 10 files and the background fetched. Let's say it succeeded We get back 10 responses what we have to do is we have to kind of go through and say well What do I do with these now if you recall? from previous times The videos get chunked up into various pieces and so we'll need to do the same here We basically have to go through each of our the responses figure out which response was it? We know which asset was I actually requesting and that's we look at the response URL We look at the Asset URL the one that we were requesting we kind of go all that must be that response for that thing What do I do with it? Does that one get chunked? Does that one just go into the cache as it is? What am I supposed to do with that? So that's what the the consolidation step that's that I'm doing That's what that's designed to do here You see I've got like for example if it's not chunking just put it straight into the cache If it is being chunked and being split up into various blocks, then we call caching chunks After we're done with handling that Array of responses then we can call this notify all clients, which is basically a post back to all available clients So if you're new to service worker stuff There's the idea that you've got one service worker which is shared amongst possibly multiple tabs and so rather than kind of trying to figure out exactly which One of the tabs requested the background fetch I just notify them all and just say by the way this background fetch happened Here's the the tag name and then I I have some front-end code that Consolidates that and goes oh, yes, that was that was oh, yes I should I should throw up a toast and say that that was downloaded And then there's a bit of tear down here, which is to remove that ID be You can see actually let me go down here. We delete the ID be Keyval there so that if we were to delete the downloaded videos and then hit download again Then it would all Work as expected rather than kind of going oh, I've already got something in flight there with that key Value pair inside ID be okay So with all that kind of code in place, this is let me just get rid of that This is what it actually does So for argument sake, so I'm doing the background fetch and I can go off to home and As I say in normals land there you do a notification and I think the the That this back or at least the explainer for background fetch suggests that There might be some UI work to do there about showing a notification But nonetheless when we come back in here, you can see I was on a completely different page But you can see that we've actually now got the offline copy and in fact I can show you inside of the application here Inside of the cash storage We have the Chrome channel trailer and though these are all the the chunks of video and so on so the background fetch Happened we populated the cache and then when I came back into the page I did the check that I I would have done anyway, which is do I have you know something in the cache for this video? If yes, but I'll assume that we have an offline video available to us So the the machinery that stores and chunks and everything else is kind of agnostic to the the front-end check to see whether it exists And that's actually been extremely useful It means I don't really mind whether background fetch populates the cache or foreground fetch populates the cache or Anything populates the cache so long as it's there when I load this page I will assume that all is good Because there's only so many ways it could have been populated and hopefully one of them was me in my code So there you go That's a very very speedy tour around background fetch. Have a look at the code Have a look at the explainer will pop that in the notes below That's written by Jake and turns out he's quite useful Who knew? Shocker of the day anyway also, don't forget in comment subscribe all that good stuff and Let me know how you get on and I'll see you in the round-up video for the media PWA Hey folks, thanks for watching Don't forget that there is more content that you can find kind of over here ish and if you want to subscribe There's probably a button. Oh, maybe there maybe somewhere around there click that if you've not done that brilliant