 What is it give me the TLDR. Well, okay on mobile. This is not gonna be TLDR. This is gonna be long Okay, you know like a movie trailer One tab is one desire. We don't have enough memory for all these tabs. It doesn't matter. We don't need all the tabs Coming soon to a browser near you the page life cycle API I've been reading an article Well, okay, so I was involved very roughly at the start of this API, but I didn't have time to do anything meaningful to it I'm doing this a career mate. Yeah I'm just saying that the start seems like it lends me some credibility, but it really doesn't but Phil Walton has sort of been involved from this with this from the start and he wrote an article That will link to as well. This is the page life cycle API. Oh Yes, is a new thing that dropped in Chrome 68 Very exciting. I think it's exciting. Okay. So what is it? Give me the TLDR. Well, okay on mobile This is not gonna be TLDR. This is gonna be long That you know makes it like an Audigans keep listening pages can be torn down, right? Yeah on mobile. There's not enough money off now Yeah on mobile you go away from the browser the second you pages go away Browser or just different tab or a different tabs as well. Yeah. Yeah, if you go to like I'm gonna type something in Oh, I need to look up what the code was on the other tab. Go back. Go back. Everything is gone Exactly, and it's like so it's it's worse on devices with less memory if you got a bit more memory It's better, but I think by default if the tabs not being used for five minutes on Android We get rid okay Mobile platforms do exactly there's the same thing right like it's you know phones have less memory So it's kind of like can we get that into the specs and how can we do the sensible thing? So the current state of things is like that we can think of a page having like an active state in a passive state This exists already active is you're using that page. You're clicking around you're doing stuff brilliant It's like and then passive is It's blurred You've got a lot of focus you lost focus And that's what we call the passive state and you you've got events for that you've had events that for ages on focus blur Yeah on on focus on blur bring these are the only per because these are also on input elements, right? Like when an individual input and it gets focused sure you need the code is in there But that's also document level focus and blur exactly. Yes And so when it's in a passive state it could still you know because it'll run JavaScript and stuff Yeah, cuz it that's your set time out raps. Yeah, some things might be reduced They tend Not to be too much because it's still visible Like it could be on your second monitor You're in a talking mobile here exclusively. It's we're talking about both mobile and desktop Yes, but I mean in with phones that have split-screen view you could still have this this sort of style thing and Then the next state is hidden Ah, that's visibility API isn't it visibility API? So you got the visibility change event and this is when you switch to another tab That's not desktop actually detect occlusion as well Do you know what I knew you were gonna ask this so I tested it and it does not call But do you know that the browser browsers could do that? Yeah, that would be a valid thing to do what they do or the ones I tested anyway, which was the browsers on Mac, Firefox, Safari and Chrome I should remember that last one if you if you switch desktops It will visibility hidden because it's technically it's a full-screen, but Also on workspace to workspace So it's got you I didn't it's work. Yeah, I didn't test full screen But I presume it would work because it's still going on to a desktop. That's now out of you So you get events for that as well And then you can go from hidden to like terminated right and that's you close a tab It's gonna go through those phases and it is a sort of mostly a line, right? You can go yeah, it's like a active and passive and back you can go from passive hidden them back You can go from hidden to terminated you can't go back from that one but true, but you can't go from hidden to Active active in one step. There has to be the url visible step in between So it's like a nice hierarchy of states that you can be in exactly and same that you can't go from active to terminated Except if you except you can I think on mobile you can and that's like if the browser goes out of memory if a tab crashes Of course, you've gone from active to terminated like but mostly it's a nice linear system new bits From the hidden thing like why are we doing new bits? Well, so Because you want to hook into these that's and we have a couple of events So we want this new state called frozen Okay, and this is where you've got like we want to start turning off timers We want to start like essentially like set time out timers. We want to stop the page running. Okay, but We want to know yeah, we want to be able to bring back. It's still gonna use memory Mm-hmm, or I mean, I suppose you could write that memory to this because I guess you want to freeze it That would be a good name for it. Yes, exactly So this is the new state and it's also what browsers that have a back forward page cache are going to use to define under BF cache So yeah, it's called frozen and then so you'll get a frozen event when it goes from hidden to frozen and a resume event when it goes from frozen okay hidden and the new another new state from frozen it can go to discarded Okay, and this is specifically for that. We've you know, it's gone but There might still be UI representing it and this is what you have a mobile because although we get it's the Android thing Whether it basically is safe this the screenshot more or less off the app So you can swipe through but if you actually activate it actually has to boot up Exactly, and so yeah, you know Android the browser goes out of memory You open it up to all those tabs are there some of them like through screenshots try and pretend that they're still active Okay, but like they're not they're going to do a full reload. So, you know, this is like a new Thing you've got events for all of these and including these new ones all of these and the old ones as well You said our events. Yeah. Yeah, they're all events. So can I Prevent default and be like no, I don't want you to suspend me. You may not Know none of like you can react to them, but none that you can't control any of them That's interesting. So you say I can react to them So there's like a grace period where I still have to run code before the actual freezing or whatever so the recommendation is On hidden when you get into the hidden stage, which is like, you know use the visibility change to pick that up save any data that you like to IDB or whatever to IDB or whatever and When it when you get the freeze events, you have the length of that event really sync No, I think I might be a grace period, but you really for safety would treat that Wait until yeah, that was that was discussed But I don't think anyone could agree on what the time should be and like there's worries about like people would just use it Just keep the page alive or something like that Yeah, okay, I mean that might still happen in some ways because like, you know heuristics like if sound is playing It's not going to freeze a tab so you get that Where play an empty sound and you use everyone's battery, but you get to stay alive So yeah, but on on freeze you get that that length of time and This is like an API which I have not used in ages comes into play And that's session storage So there's a bit of special behavior here and I'm I was looking at the spec Versus the like this doesn't seem well written in the space. It's kind of as an example But the the suggestion is that if a tab is discarded So the page is essentially unloaded. It's gone. Yeah, you've still got the tab there and when you click back to it It's going to reload. Okay, session storage will persist Because the tab is still there, but if I close the tab and then command shift here you open Yeah, that would be then it's gone. So it's a nice safe place to put data. That's you know For maybe legal reasons or for usability reasons that you don't think should persist like beyond the life. Yeah Yeah, but it will persist beyond discarding and there's once the page reloads. There is document dot was discarded Well for you to know if you're being restored or actually being loaded so fresh So if the user closes the tab to the app and they go back to it, you know we could using web storage like show them put the app into the same state it was before and It's I've always been really unsure about that because it depends on the app But in this ever seems unexpected, I guess right because I think one of the You know the benefits of doing something like image compression on the client is you can say like we're not sending it to the server Yeah, or anything. This is fine to use for private data But the problem is someone puts like a you know a sensitive image into the app close the app and then you know Yeah, give their laptop to someone else or something that or they open it like on stage and suddenly there's Let's let's say a receipt with import But with this this sounds like a a good way of doing it right like this Yeah, being able to have a proper semantic like when to check what you stored and because it seems understandable Like if there's a tab still there It's understanding from a user's perspective that if they go back to that tab It should be in the same state as they left it. In fact, it's almost unexpected to the opposite Look at session storage ever. I think is it synchronous like local storage. Yep. It's it's same same kind of API the the benefit of it in Legal terms I think is that the storage is held in memory. Yeah I think in certain circumstances rules change once that goes on to disk. Yeah So you know and although I think historically you would be using cookies or something But that would actually go on to the network. You don't want that so right and that's on disk as well Yeah, and on the network. I think it's just local storage. So so life cycle API. You said it's in Chrome 68 from 68 There's some nice debugging tools if you go to Chrome call on discards There's a nice little API there where you can Put pages into certain states because we have ambitions to do this on desktop Yeah, I would hope so because you I mean I don't know about the amount of tabs you have I have many of them and I've the great suspender because I have so many tabs and they all stay active, right? I have a Chrome extension that puts them Right, so if I cannot have to have an extension but rather Chrome do it itself I'm all for that and it's it you know good for memory as well because they you know that stuff But this is just to be clear. This is a standard, right? Yes. This is a web standard. It's on the YCG page life cycle Yeah, it's you know things like back-forward cache have been built into it. So it's not just with Chrome in mind It's with yeah of the browsers as well Cool. It's a web you know Safari and Firefox have the back-forward cache. Yeah, I I think it's really good I think it's it's not just good for mobile. I think it's gonna be good for desktop downline as well cool I'm not entirely comfortable of the idea of human contact. I don't think it's right I mean that it's not surprising to you are a very vocal about not being a hugger. Yeah, I'm not a great hugger I'll I do it if necessary