Supercharged: Live Coding Session (Chrome Dev Summit 2016)

Key Takeaways

[Music] all right so let's get started so what you see here is the thing that we have built um a while ago it is a website with no really with no important content but you get nice animations when you go to a different site and as you can see we are only requesting a partial which is just a single line of HTML that's being swapped in um and all the rest is Javascript and transition magic and this is what we want to try to make work offline oh Somebody went full screen that is not good let's not go full screen um so the first thing that I'm going to do is I'm going to register a service worker and because I'm a fast typer I'm done you cheat you big old cheat you so what I usually start with with is a string for a version because wait wait wait wait wait go back go back go back so you've got a right if service worker and Navigator let's talk about that just a that is Progressive enhancement so basically it checks if the Navigator object has the service worker call and if not we're not going to do anything if it does we can actually register a service worker so we we we don't register the service worker and we tell scope you're going to control everything from forward slash you're going to control every request everything yes right as you as you were so ver string I usually do because it is a nice place to uh force a Reload of the service worker so um the service worker file is going to be checked if it has changed if it if if it is bite equivalent correct it is not going to be reloaded if something changed a whole new service worker is going to be spun up so a verion string is a very nice place to force this kind of behavor good news if you uh set far future caching on your JavaScript files um at most the spec says you're going to wait 24 hours before uh Chrome in fact any browser that supports service workers will go and try and get a new version of your service worker but you could be stuck with a service worker version for 24 hours so typically on a service worker you want to make sure that you're serving it for example today we changed the schedule of chrome def Summit if we had been stuck for 24 hours on the same s worker that would be awkward right so there we go so the first thing you're going to do on install basically always looks the same for me I usually do a a skip waiting in here which means sell. skip waiting typo or he caught me so we're going to SK we're not going to wait for so shut down we're going to take over immediately which is also what we have to do in activate Okay so uh let's talk very quickly about the life cycles so when a service worker is downloaded it goes through an installation step um I think shakee wrote a really good article about that yeah I mean oh yeah so there's a brand new article on developers.google.com web uh slf fundamentals I think it probably is it's probably on probably on fundamentals um and I'll find it and I'll post it into the uh the slack in a moment uh but basically talks through the life cycle but in the short version you have an installation step when a a service worker has finished installing it will activate as soon as any as soon as it's a able to which largely involves any connected uh clients they're called have disconnected and it becomes available otherwise you have to wait until they've all disconnected you've got uninstall you I'm not going to skip waiting on activate I'm going to claim all my clients so my new service recer is active now but it hasn't taken care of all the open tabs if you have multiple ones self client claim says give me all the tabs that they are and I'm going to take care of them from now one okay so if you've got an existing service worker you're just basically kicking the old one out immediately and saying I the new one I will handle everything from this point on exact okay and for the on fetch for now I'm just going to say I'm just going to do a a KN service or just does a path through so I'm going to respond with the fetch so I'm basically not going to do any offline logic just any request the page does I'm going to do to the actual Network and pass it back so if we reload this site now we see the S just got installed which is good and now on reload we should see every request twice because the website does a request for example the SCV file which get to the service worker and the service worker does the actual fetch which is why it also shows up down here so everything is still working the same but we have a service worker now in between our website so it's really worth pointing out this um that little Cog there is the is the thing you're looking for and also if you have from service worker that is uh good things to watch out for but you are seeing that twostep something went to the service worker the service worker did a Fetch and then it comes back okay so a a pretty common way is to download the files that you know the user is going to need uninstall and that's exactly what we're going to do so we're going to Define an assets array and these are the fils that we need dude boom you're like today you're like the king of Snippets aren't you I was like how long has this taken you and he's like H I've practiced and I can do it in like 11 minutes I didn't realize it was all Snippets that these are actually the two Snippets I have you're done with Snippets now because it's boring typing this out I thought there's no semicolon at the end of that assets declaration know well it's not technically wrong it's just award oh oh if the linting was switched on it would have a real issue with you right now but now now now we're going to the interesting we're going to write async function oh yeah which now everybody knows will'll run synchronously exactly from the quiz until I do wait and do Cates open right static no you got to explain what's going on here exactly so async function just think about it as a function it is actually a function returns promise just that we were on the same page okay but by putting you're sort of marking it by saying it's an async function because only inside as async functions we can use a weight and we want to do that because it's cool um and that means that this function actually returns promise so everything in here will basically be kind of Rewritten into promise chain but is so much more readable now okay so we're saying we've got an async function we're going to we we're saying open the caches and so usually you do like a DOT then afterwards and you get the cash and then you can do something inside the then but now we can actually just wait it for it and this is the same as a DOT then but puts it into a variable which is so it reads like synchronous code like I want the cash and then I want to do something else and something else and something else but under the hood it's magically doing sort of promy type stuff basically so the next thing is another aade where we can do Cash add all assets so this step is going to wait until we have downloaded all the Assets in our array put it into the cache and then we will return skip waiting so the ultimate value of this promise that the async function returns is going to be self skip waiting which is what we want to pass and to wait until because we're done with our setup but before that all the other steps are going to happen and we can check this works by reloading the page because now the service record oh remind me I'm going to write a lot of async functions if I forget these two parentheses at the end shout because it's a painful debug but we need to want we want to invoke this function right away e so let's do this again sorry that was uh involuntary so s record and we see now it downloaded all the files again which reminds me when we do these it's not production code I'm not saying you're writing by code awkward I am but there is a sense in which uh we do the stuff to kind of show the approach that you take this isn't necessarily stuff that we'd say just take this copy paste and you're you're good to go uh just just that is important uh it's worth mentioning so now that we have things in our cache we know that everything from our static folder is going to be in our cache 100% because we're downloading it on install okay and this is what I want to take uh advantage of in our on fetch well can you can you go back and reload the page and then show them the cash um oh yeah inspection in devals really useful so at this point we should have all these assets in the cash right so we have the cach St on the application tab we have the cache storage and we can go and have our set cache and all the files are in here so this is really useful to see if everything actually landed you heare the response no you can't okay I still don't know why I don't know what this this thing is it should say okay but it just doesn't like you right now I am in Canary because async functions are only in Canary so this there might very well be bugs right now so okay okay but you normally see you normally see the the fact that it was an okay request kind of came through so uh we are now in the on Fetch and what I want to do is if this request is somewhere for something in static I want to don't I don't even want to bother with going to the actual Network because I know I have it ready so something that I kept finding myself doing is actually paring the URL so uh events. request. URL is the request URL but it's just a string I actually want to have it separated into like the query part the path the domain and all these kind of things so I'm just going to attach a new thing to the event which is par URL which is a nice URL object because what I can do now is event par URL path name start hope they don't add that to the spe you're going to feel really awkward a little bit right so basically what I'm checking is if the P name starts with static yeah I'll give this some special handling namely I'm going to respond with a cache. match event request so I'm looking at the cache for the request object and going to respond to that and I know it's going to be there because we are installing that so yeah so we install these assets and then when we get fetch from the page that says I want whatever URL hopefully we're going to find it if it's the if the URL starts with SL static we go find it from the cash we're pretty confident and we should be able to return otherwise we're going to stay with with fetching for now so what should happen in our Network tab is that all these service request should disappear so I'm going to reload once which is going to trigger a reinstall of the service recer so this is all the same the new service recer gets installed and if I reload again all the Ser requests are gone because we're loading from cash now yeah now here's an interesting one as well that bottom request there is uh the service worker trying to do an update for a new version trying to find see if there's been checking if it's B equivalent or not yeah so you will see that kind of going the service worker looks for the new service worker uh so that's normal so for the rest right now we're if there's a request for something that we don't have in the cat for example our index HTML it goes to the network and just gives it back to the browser and then it just disappears we don't save it anywhere right so this is the idea okay so you've got those how many is it five five assets if I request something that's not in there we go and fetch it but then we just kind of it's you know if we're offline we wouldn't have it for next time exactly and that's what we're going to change and I like to write functions for the different caching strategies so in this case I'm going to do a stale while revalidate rid there we go oh so what this means is s rev validate means if we have something in the cash return it right away even if it is stale okay and in the background fetch it from the server and update the cash so we see this on uh typically on social networking sites where they kind of go here's all the posts that I've got stored enjoy those meanwhile I'm also going to go off and get the latest set of uh posts and when I've got those bam I will update my collection for you so one n nice thing about the strategy is that we're definitely going to do both we're going to do Fetch and we're going to do check the cash because we're going to need both in either case so we G somebody's asking um on the chat and if you're not in the chat and want join in it it is the chromium dev. slack.com uh and it's we are in the general Channel um somebody's asking if the code is going to go onto GitHub totally the answer is yes we have I will post the link in the chat if somebody else doesn't get there before me we have a UI element samples repo which has the whole all the elements that we've built all the stuff we've built sorry super far all the supercharge stuff so far um for you to look through and this will be no different so it will be in there I might clean it up a little bit afterwards some comments just you know you know to remind you what I was actually doing yeah because I'm not going to write comments now like who does really come on um so we have two things that we can do now first we have to figure out what to respond with and this is something that I want to give to you in respond with try to get to the response as fast as possible and nothing else cashing you can worry about in the wait until respond with should be fast okay so now you're going to have to explain the difference between respond with okay and wait until so we have event respond with and event wait wait until so respond with expects a promise that resolves the thing that is going to be given to the browser as the response to the request so for example you could respond with the fetch yeah and a fetch is going to return a promise which will ultimately result in the content of the thing that was being fetched which is a response a response object wait until however keeps the service worker alive if you want to do some further work like opening a cash and putting stuff into that cash otherwise the service worker might get killed before you actually save it yes now this is an interesting part of service worker work is that there there's no promise given oh no I shouldn't say promise there's no guarantees given that a service worker won't be spun down okay so once say for example you've loaded the page even if the tab is open it can be spun down if if so once Su done his reload of the page the browser is well within its rights to say I no longer need this service worker get rid of it which by the way is by Def tool says now that s termination by a timeout timer was canceled because Dev tools is attached so it was going to shut down the service worker but because Dev tools is attached it said I'm not going to do that in case you want to inspect what's happened in case you just want to have a look at the service or because when you log an object from the service worker you can't expand it anymore if the service worker has been killed because the context is gone so so it's just a service from the Chrome people to us that we can do debugging and so they wait until is your programmatic way of saying don't shut down the service worker yet I have some stuff to do which in this case I assume is going to be putting things into a cach PR well in respond with no in respond with you're just going to worry about how to what the resp response is so our response in this case is going to be a promise. race because whatever we have the fetched version or the cached version I just want to return whatever is there faster so race is promise race is a function that takes an array of promises and gives back whatever promises settles first okay so okay so you got to fetch you're going to look in the cash you're going to say don't care pick one whoever get first most of the time I would expect that to be the cached version yes however if we are offline fetch Rejects and promise. Ras doesn't care if it's a reject or a fulfill it will return whatever settles first which includes both so when we're offline fetch is almost immediately going to throw and be like I'm offline I can't do anything and our promise at race is going to say okay here is your rejected promise have fun which is not really what we want so what what I do in this case is I'm just going to put a little sneaky catch to the fetched version and say if you're going to reject just turn into the cached version two nice that is well cheeky so sorry I'm totally stealing that so what's going to happen now is I and now we have to think about this so if the fetch rejects we're going to get the result of the cached version which can be a a response but it can also be undefined which is what caches do M returns if it doesn't have anything in the cash oh okay so in this case what I'm going to do is if the response is not valid so it is undefined I'm going to return the fetched version Oh So this covers all the possible outcomes because we also have to think about there is a way if we are actually online the cash could res uh resolve first but could be undefined because we don't have anything in the cach and then we want to wait for the network so so what at first glance what appeared to be quite neat and tidy you're kind of going right fetched and cached but if the fetched version decides it's offline and go we'll switch to the cached version but if the cached version doesn't work out for what ever reason we'll go to the fetched version yeah and now it gets everybody following along there's going to be a pop qu oh we're actually actually doing a pop quiz well might actually have a quiz question damn nobody's G to get the right answer so the thing is as I said before fetch can reject because when we're offline it's going to reject so there might be a way that cash responds first with I got nothing yeah see people see mat Matt GA who's one of our colleagues he just says he I was just sick in my mouth oh guy I'm going to so get back to him on that one yeah so what I'm going to do now is fetch could reject so if that happens if we're down here and fetch rejects we know nothing is in the cash and we're offline so what are we what are we going to do Panic exactly that's my code so what I'm going to do is I'm going to return a new response L offline with nothing say 44 done oh that's such a grownup way of doing it I know I just be like I am German yeah okay I would have been like yeah I don't so let's comment this out for a second reload the page get the new service worker any errors looking good looking good no 404 on the Local Host what did I do wrong now now at this point I would Pro I would try and be his rubber duck anybody heard of the rubber duck Theory yeah a few hands going up if you've not heard of it the idea is that you have a rubber duck on your desk and when you hit a bug you introduce yourself to the rubber duck hi I'm Paul here's my problem and as you explain your problem to the rubber duck in this case may um you tend to go oh oh I did the I did the thing with the thing it's fine thanks rubu and you go back and you fix your bug Often by just talking it through with somebody um apparently even an inanimate duck is enough to help so how's it going I'm 31 cached with a d it's a bug it's a type of thank you see I think if you'd had linting on you'd have you'd have got that hey plus uh so everything should totally still be working we're still fetching everything um but we're not put it in the cach yet so let's fix that okay so we have this thing done which basically does the right thing just believe me I I do I'm just okay and now we're going to talk about the caching this one is actually simple so what we're going to do is we're going to wait for is it Su simple like cuz I I'm looking at the other one so we're going to wait for the fetched version we're going to wait for our fetch we're going to open our cache caches doop I'm going to call this one dynamic because we're so we had the static stuff this is this is the stuff that we're kind of going oh we didn't have this to begin with so maybe for example this would be where you'd store your your post the stuff that changes over time right maybe user generated content incidentally if you're taking this approach make sure that you have some kind of purging strategy otherwise your cashes can grow forever more hash topical there you go um so you want to make sure that you have a way of uh getting rid of old stale data I'm just so we wait for the response we wait for our cash and then we put the response in the cash done almost so what we're going to as I said before uh the fetch can reject if your offline so we are just going to uh catch that error and just L not do anything about it and also wait did I miss anything hey you you weren't grown up anymore oh I'm so proud of you okay prefer it when it's l so this should be working right so okay so oh no it's we have actually something subtle which is why I almost forgot about it so let's imagine this the cash got nothing that means that our respond with returns our fetched version and then we get into a weight until and we want to store our fetched version so we're using fetched version twice ooh o I know this one I know this one that doesn't work because you the body of a fetch is a stream and you can only consume it once right so what we going to have to do is we're going to have to do a fetched copy so this is the same as the fetched version but the response should be cloned and then down here we can wait for the copy instead of the fetched version okay so let's reload and see if this works reload new service recer and another reload so we can still go to about we can still about to contact all good and now let's go to the applications panel and go offline reload still works about cool contact cool MK is not going to work because we haven't visited MK just yet this is just going to put our up our great spinner okay but what we we would we'd want to find a way to kind of handle that one nicely and be like sorry can't get this offline not today though no I mean it's almost like you're saying with time constraint then I keep interrupting you it's almost like it's revenge for me for all our what doesn't work though is that we cannot refresh here it just doesn't work well because you all got errors as well well yeah because I just an unknown error it's great oh okay so in the dynamic we we have the root page but we only have the partials for about and contact so that's why we can only refresh while offline on home but not about in contact because we don't have the complete page cach just yet yeah so a bit of background for you when we made this originally each individual page we served the whole thing and then on the updated version we only pulled in the bits that we actually needed for the xhr so that when you go to from home to about we only pull in the little bit that was needed and so what we're saying is that that the thing that's caching it's only caching the the changed bit rather than if you refresh it goes well I haven't got the full about page or the full MK page so we need to figure that one out so what we're going to do is and this is where it actually gets exciting we are actually going to do the templating in the C now so we're going to pull in our headup partial our footer partial and do the Assembly of these partials in the CLE the same thing we built on the server s side in the server site rendering episode wow we're going to put that into the service record so the first thing that we need is our partials so I'm just going to sneakily put those in our static cache which is header. par. HTML and also footer just so you see what these look like they're just partials the start of document with a little bit of this is the wrong document but it's similar let me check where it is there it is uh just basically the top of the document and the bottom and we put our own content in between and there's a little bit of temp templating magic which you're also going to take care of so now we have the partials in our set cache and now we need to figure out how when is this request for a web page for one of our top level pages instead of any assets or other links we might add later that seems like something that doesn't have partial on it and would have gone to the dynamic actually we solved this when we buildt the back end and we have this great regex yay that hang on are you sure you don't want to just reuse the code in a kind of isomorphic way this is almost what we are doing almost almost and I'm not going full isomorphic because I think isomorphic has the flaw that it assumes you have note in the back end which sometimes or maybe even most of the times is not the case Okay so we're going to when you want to do templating in the back end choose a template language has multiple language binding so whatever you use in the back end you can use in the service record and the back end all right so on the fatch we're going to see if our top level section regex matches our uh event par URL path name and if that's the case we can call our function that we're about to write which is going to build the site if not we're going to use the existing code that we just wrote so we going going to write build site which is going to be interesting so event respond with what is going to happen in here obviously we're going to use an async function because they're nice and I'm going to do these because I'm going to forget them so the first thing that we need is we're going to need to get a hold of our files so the files that we need are caches do match header. partial so getting those from the the static cache because we know they're there y the footer and in here we are going to basically use our stale while validate function more or less uh with the event parsed URL to string plus partial gotcha so you basically okay I see where you're going you need a comma after that one I do so actually let's and because both caches do match and everything else is going to be a promise we are going to to we're going to wrap this in promise. all so this is good but if you paid attention you know that stale while revelate doesn't actually return the promise or return anything yeah so this so what we're going to do now is basically we are going to use this function and write a little wrapper on it that actually Returns the promise and this is one of the nice and yet ugly things I no kiding so stale while revaler it's so hard request so this is the request URL and this is going to return for all we know a a promos a promos I shouldn't Mo you I've I the I make so many typos when I'm typing it's embarrassing um and there I am being unkind to you and I never mock you for it and yet you I'm just unkind AR I I feel pretty much pretty bad about that so we're going to call our our old old function which takes an event we're just going to build our own event now we're just going to pretend to be an event object even though we are not because the only things of event that we're using inside the stale while rev validate function are respond with wait until and request wow so our request is going to be request because interesting both Fetch and cach take both request objects but also strings huh so this will just work great our respond withd is going to be our resolve function so that means whatever this thing you can see where I'm pointing it on my screen I'm a genius yeah well this thing so whatever this thing resolves to is going to be passed into respond with which now is the resolve function of our new promise which up here will give back the value and also we need the actual wait until so we can't really create that so we have to pass it in so wait until so we have to put event wait until bind event e however it's going to get better because I'm never writing a service worker again service workers are hard so the thing is your service workers are hard mine don't look anything like this mine are really like and they don't work that is true they so the thing the thing is something that just got fixed feel sad now I'm just going going I'm done the thing that uh just got changed in the spec but has not in the browsers is that right now you can't call wait until Insight respond with or the other way around okay you can only do it at the top level in the same tick that the event got dispatched so we are going to have to do our own wait until and what I found out is a kind of dirty hack which I'm just going to use until this change lands I'm going to put a new promise into wait until and just save the resolve function on a variable and just use that instead so that means that the S recer will now stay alive until the my weight until will be called and all the browsers should be happy even though we're technically calling a wait until function even though it's our own inside respond with the last thing I want to fix here is that we are appending partial to the string but that isn't technically always correct because this might already be a partial request so that it would be question mark partial question mark partial which we don't want the good thing is that we already have a par your par URL a URL object which has search params oh not caps lock search params and we just going to set partial so that means if it's already set nothing happens if it's not set it will add the question mark partial to our URL and we will always get the partial thing okay so it's okay we got our files we do the last thing we're going to need is actually get the contents out of our responses so our contents are the files and of all of those we're going to get the text okay so so you're making this request for the header the footer the actual bid in the middle and now you're going to you're mapping that by saying okay each one of those get the text for each of those exactly however text is a response so once again we have to put this in a promise.all because again fetch resolves when you get the headers and the metadata but then the body is a stream so do text basically returns a promise it reads the entire stream puts it in a string and gives it back to you okay so now we have the contents our content the thing that we actually want to pass back is the contents join because it's just three strings we're going to concatenate them and then we're going to return a new response with our with our content so this is basically how we do the templating inside our service worker so let's reload this you're going to get the new service recer in or not did I miss something oh yeah that shouldn't stop it from working though thanks though H offline you check the offline box no I did I did uncheck it here oh that's service work that's an interesting bug usually those are synchronized but apparently they're not thank you uh so let's I got that but it's still not working is it okay I'm just going to unregister my service recer because something is clearly iffy here stop it does do happen sometimes with when you use Canary it can happen oh there's like three five service workers installed now we should be on the safe side uh ah interesting how's your types working so as you can see it's do text right that's exactly what it is so the default M type of response is text plane which is really not what we want so in our response we have to add headers content type text HTML reload new service record reload hooray but nothing works which is expected because I didn't do the templating oh so I still have my template expressions in here so now we actually going to load the templating library oh so we used handlebars right I don't anymore because tandle bars turns out to be like 80 kilobytes and I found a nice little tandle Library called do which I thought was really nice and is that just dot dot well it is d o capital T so I don't know how to pronounce it dot dot all right and this is this is one of the bits where I said this is a production code because in this version that keeps coming up in the chat by the way people like really clarify what what we mean by it's not production code so I basically exposed the entire node modules folder yeah why don't you why not don't do that in production please don't but in this case it's just the easiest way and you don't have to actually think about my build steps in the background how I'm actually bundling this or whatever and also um I not doing any cach cleanup so if you actually bump the version you're probably going to run run into problems because old files might still lie around so there's definitely things that I'm just skipping over for sake of brevity and because this is already complicated okay so this is what I was saying earlier about the kind of purging of caches you want to make sure that cash invalidation is hard it is yeah but it is definitely worth doing hi J hello is it because we said service worker enough times yes if you say service worker three times in the mirror I do appear it's been really difficult at some conferen is I've just been whisked to the other side of the planet um I'm just going to let you know that we we've got a a conference to do and there are other people who would like to talk fine how close are we to the end how close are we to the end um actually let me think where was I at you're doing the do oh the templating yeah it's literally two lines here we go so our D for how long has it been literally two more lines well it would have been done faster if you didn't you know uh so we're going to take a template function our template takes event request go we're going to reload oh that looked that looked that looked okay looked good and now it should go back to normal we're done and now the the the test is to go offline really we go offline it still works we can reload on all the sub Pages because we're offline and the m still doesn't work because we never went to the page so that's fine and I'm done [Applause] woo that code that that code will get a lot of uh comments and uh and we'll be pushed to GitHub and we will post the the link in the chromium de and if you have questions at Thea on Twitter at erot twist and you can mostly bug me because he didn't write it and he doesn't understand it that's true so they're laughing but they know it's true all right thank you very much have a good one round of applause to s [Music] uh