Building a Website #Day11

Key Takeaways

well aren't we just finishing up the site that's pretty much where I'm at I think uh sort of okay let me let me list what's at least to do um there's basically putting in the final sessions and I'm still waiting on those there's uh Push Messaging and notifications if I can get to it in time and I think there might be one of the thing that's escaping me at this exact moment if it's important I'll remember it I if not I I won't I have a to-do list somewhere it'll probably be on there um but since I last recorded a video um it's been a few days and the reason it's been a few days is because I have been working on the service worker part and I wanted to try and get that just right and it's it's working I mean I've had a service worker in place from the start but um I don't know if you remember but it basically was like a pass through service worker it didn't do anything particular uh all requests just went through it and it was a fetch uh to go and get the resources and uh the the next step for me was to actually you know have it populate a cash of uh items and um you know actually respond from the cash and and do a couple of other bits and pieces so let's actually have a look at the code because I think that will illuminate things firstly though we'll go into the python because I um I have got to the point now where we basically hot swap the homepage um oh actually well hot swapping the homepage is related to this item I now have a a Json file of the the actual sessions which is currently filled out with nonsense sessions that I have just made up uh for now and you can see that it's sort of the date is the first key and then each the time of each in and this is in uh PST uh because that's the time zone of the of chrome Dev Summit it's in San Francisco uh which will be PST uh which means it's I think 7 hours behind UTC or GMT is you might call it depending on um how you refer to time zones I mean who doesn't just sit there referring to time zones I know I do so I've got the Json file and the Json file is loaded in by the python and that's actually important because I do things like I basically start to kind of SE step through and I basically this is the the the sessions file is now the kind of uh source of all sorts of bits and pieces in the in the site for example um I've moved the filters out as well out to their own file so so we've got things like uh getting the current session and so we get the the current UTC time and we step through all the individual sessions from that Json file I have to add seven hours on which is that there um this is a bit of a funny way to do date passing normally you'd pass it um things but because I need to adjust the time I don't know I might go back to this now that I've actually got it working and just tidy it up because I could ask to pause it based on you know I could make it string and then ask it to pause it properly rather than doing it this way it's a bit of a funny way uh to do it but we have things for get in the current session getting the next session and there are some uh interesting bits and pieces in there like you have to make sure that the next session is has a different day to the current day and uh bits and pieces like that but it's all Dynamic and also on the uh when it comes to the actual homepage which is this if templates nonone as in the homepage we have to make a decision based on uh the time of as the as the server thinks it is but that's okay because all these things are in UTC anyway mostly basically if the number of days between the first day of the conference and today is zero um adjusting for PSD then it's the live day one if it's the uh second day live day two um because these will I think have different YouTube embeds so I have to have you know different effectively different files for those uh different templates and then um the final one is we're on neither day of the conference so show the homepage uh this works just fine uh in fact let me just show you what happens I will do this without any service workers so we'll just directly if you hit command shift R if you're working on service work St command shift R will actually cause your page to load you can see it in the network sack cause it to load without any service work and no none of those requests are going through the service work and so that's kind of kind be a really good way to sort of test that is my server actually responding with the right things uh before I introduce uh the service worker let me um also while we're here let me just change the date and time so I've set it to yesterday if you like um so let's send it to the first day of the conference and then hit command shift R and you can see that uh it's uh not only is it let me just move this out of the way um I'll do that actually we'll come back to that in a little bit uh so you can see this I've I've actually chosen the developer diary day one so I know this is actually the day one it was just like oh okay it's definitely doing the right template it's day one and you'll see that up next and this has been adjusted for local time uh if I disable JavaScript for a moment down here up here disable JavaScript there you are command shift R you you see it's 8: a.m. PST um oh it doesn't have the title in there oh I'm going to have to go back and fix that and if we uh reenable JavaScript it's the same content once I've got the title back in there but it's been adjusted for the local time which is just done in the JavaScript I have a I have a bit of JavaScript that constantly or not constantly but kind of watches for changes in uh the schedule which I can I can show you um if this video doesn't get too long and um anyway the the theory then is this is day one and you can see that coming up at 4:00 local time for me which is in about what 5 hours there thereabouts 5 hours it'll be registration of breakfast um you know obviously as we get into the other sessions uh it'll make more sense open date and time so let's say it is in fact um 6:00 uh in the UK you can see now we've G the current session is Alex Russell and good we've gone we've gone from breakfast pretty much straight to lunch I this time traveling thing is working out just fine so anyway there's you can see here I've got this refreshing listing in oh just less than a minute we could we could wait see what happens next I might get them to time-lapse this still waiting there it goes by it happened you can see that the the one that was up next becomes live and and now the next one has appeared in the listing so that will be you know as the video is playing we'll be I'll be basically be swapping the session so that's kind of what happens with the the live stuff uh which is which is all very very cool and the code for that is kicking around in the components there's a live session info which basically goes through it's kind of uh sort of in in many ways it's a duplicate of those filters on the server side because it's got to do similar kinds of things it's got to look through that session Jason so they share that Jason the server side and the client side both look at that same Jason and make some decisions on you know what the the next session switch time will be which is basically look for the next session and find out uh what the time is and then set a timeout to basically go and do a check for that which is it works just fine um well it seems to work just fine anyway so that is all working if you you know JavaScript it swap sessions all that now if we reload and look at the network these all these requests are actually coming from the service worker let me show you the service worker the service worker from the top import scripts and then I I'm sure you recall the adash uh remark filter thing that basically is going to make sure that if this file changes that this import scripts line is going to to actually be different so if we look at the service worker itself you can see that it's cache. manifest and then there's a there's the long alpha numeric hash string that goes in there so if I change whatever the contents are of this cash manifest then this will get updated the service worker will update it'll run its install and it activation and go through its life cycle if by the way you have not come across the service worker life cycle uh there is a brand new document uh guide article thing on Google web fundamentals which we will link to in the description and possibly they'll even put one of those fancy annotations on this video as well who knows so what goes into the cash manifest glad you asked the cash manifest is here and you'll see that it's basically a list of all the things that want caching and good news I don't create those myself or this myself what I do is I go to I've made this file called build resource list and I have a bunch of things that I want it to ignore and I have a bunch of resources that like URLs that I know I definitely want like the various sections of the site um this partial flag means that I actually don't have the server bake in any of this session information it just means that those the they come through empty because I know the JavaScript is going to populate them um later on I also get the session information and I go through each session and I get its URL because I know I want to cach that offline and then I walk through the static file so I go through dot do/ static so basically the static file here which has the images the Json the javascripts uh excluding the service worker itself uh the Styles and any third party stuff and manest and whatever else that as I say results in this big long file here and in the service worker once that's you know that gets imported and whatever else the install essentially steps through each of those and it makes a request for each of those and it will wait until the caches have been opened and we've added all those items and then it does the skip waiting which basically means go straight to the activated stage so the life cycle is sort of it's installing and then it waits until all the clients that are connected to the service worker have disconnected as in you do like a force refresh or you close the tab when all the those all the tabs to the Chrome Dev site have closed it would normally then switch the service worker across to uh activating but in this case I'm telling it to just go straight to the activating stage don't worry about anything that's already connected I'm hoping that will work out fine I'm hoping there won't be any breaking changes by doing that the activation itself looks through previous uh installation caches so every time we install the service worker it populates the cash I'm saying find all those other other caches that aren't this one the one that we've just uh populated through the install and get rid of them delete those caches so that we're not building up space and space and space over time this probably could do with a little bit of improvement in that I think it should possibly have a couple of caches caches for things that are less likely to change and caches for things that are more likely to change like the JavaScript or the CSS I'm likely to find minor things in there Min of bugs that I just want to tweak or change or whatever and so rather than invalidating the whole cache and downloading everything every time uh better version of this would be the things that I think are likely to change those should have their own cach that I can just delete and repopulate and the things that I think are pretty static and unlikely to change put them in their own cach as well again this is It's a function of of time to see how um you know how we get on and this client claim if I understand it correctly on activation when this is uh the service work has been activated it basically says okay I will now respond to all future requests from this point on so if the page then asks for an image or a URL I will handle it and basically pushes the old service worker off to wherever service workers go when they're not needed anymore oh on message this is an interesting little thing I mean I think it's an interesting little thing I wanted to do this I was like how do I how do I decide whether to notify somebody like if the service worker changes it might be a minor change and I don't really want to kind of put a little thing that's like hey new version because it might just be really minor it just might be like a a typo or something and I'm like ah it can cope for next time what do is the version that's baked in here which is from the package.json if it gets a message asking for version and then that message will come from the page and I'll show you that code in a moment it basically posts a message back saying here's my Virgin in the service worker install the where are you where are you yeah if we've got an active service worker WE Post message going what's the version when that comes back if we've not already kind of had a version then we store that and then if there's one that's updating as in we get so you've imagine the situation you've got one service worker it's installed it's running it's activated it's doing its thing and then a new one comes in and it's like okay I'm taking over well we've asked the first one what's your version and it said not10 cuz it's sver let me just do that let's let's say 1.0.0 that would have been a better one and so we've got that version back and then the new one gets installed and we ask it what's your version and it comes back and says I'm 2.0.0 I've basically said I split the current and the new version on dots and I basically said if the major version is the same just log it out to the console going yeah I updated the service worker if it's a major version change like 1.0 to 2.0 then we push this toast that's like really you know you should refresh the site and again these are things that I might just improve over the coming days uh we'll see how we go so you can see actually if I go to package.json and I change that to 2.0.3 hopefully when I refresh the page Tada you see site updated refresh to get the latest whereas if I do 2.3 Point 2.0 four but I look in the console you can see we just get this service working move from 2.0.3 to 2.0.4 so it's a way for me to kind of decide how much do I want to bother the person at the at the other end okay I don't want to wait uh take up too much more of your time but I do think it is worth looking very finally at the fetch itself this is the uh function that's going to be called whenever you make a request to the page uh one thing is if uh the image ends in at 1X I always respond with a 1.5x uh this means that I can I only have to cat the 1.5x and I will just hot swap it it doesn't matter you you've asked for the 1X you get the 1.5x it's in in my case it's always background size cover so I can respond with a bigger image and it means I don't have to cach the 1X and the 1.5x offline it's handy if the request itself doesn't end with uh Dev Smit then I just say stick to the current request um but if however you have asked for the homepage I go through the sessions and I basically look at each day and I adjust for PST and then I say if you're inside the first day respond with live day one from the cache if you're inside day two respond with live day two from the cach and if not you're going to respond with the dev Summit slome and then there are any errors just respond with Dev devit slome so that means that what we get is we basically call this first so we we're saying either we're just going to leave the request as it is or if it's a request for the homepage we we might remap it just like the server was doing in the python we have to replicate that that behavior in the service work and I guess if you had a JavaScript server you might actually use the isor ISO I'm as bad as Jake he couldn't say isomorphic either isomorphic JavaScript there we go to do the same logic here of going kind of going is this on conference day one day two if not respond with whichever page whatever so we're doing the same kind of uh remapping and rewriting and if we didn't do that then on the conference days you might get the old home page and you'd have to kind of force refresh to see the live stream which we don't want so we potentially remap the request if it's needed if not we'll just leave it as is check for the cach uh if the cash has got that request which for all of the files apart from say like YouTube thumbnails uh uh anything for analytics or basically any third party stuff it won't exist in the cach and we'll just fetch it um and for everything that we we do have from the cach we'll just respond if we've got it so goodness me that was a lot of information wasn't it uh but it has been a few days since I've had a chance to record a video so there you go that's what happens if I don't record them often at this point I think the site is pretty much shippable and this will probably probably be the last Dev diary that I'm going to record and maybe if there's something that comes up in the next little while that's like oh I must tell you then I'll be back but for now all I want to say is uh thank you so much for coming on this journey with me thank you for all the comments all the feedback uh all the chatter and uh I hope you've enjoyed coming along this journey with me I've enjoyed having you along and uh you know what let's do this again sometime but maybe you can do the coding yes what a concept to [Music] n