Page Lifecycle API - HTTP203

what is it give me the TLDR well okay on mobile this is not gonna be tailed yup this is gonna be long okay okay any like a movie trailer yes one tab is one designer we don't have enough memory for all these tabs it doesn't matter we don't need all the times coming soon so we're browser near you the page lifecycle OPI [Music] I've been reading an article well okay so I was involved very roughly at the start of this API I didn't have time to do anything meaningful to it under Korea me yeah I'm 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 lifecycle 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 what okay on mobile this is not gonna be tailed yup this is gonna be long okay I got again so keep listening pages can be torn down right like on mobile there's nine of em they often are yeah on mobile you go away from the browser the second you play just go away from the browser or just a different tab or a different tabs as well yeah yeah yeah if you go there's I have 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 yeah exactly and it's like so it's it's worse on devices with less memory if you got more memory it's better but I think by default if the tabs not been used for five minutes on Android we'd get rid okay over mobile platforms do exactly there's the same thing right like it's your phones have less memory so it's kind of like can we get that into the specs and how can we do this a small thing so the current state of things is like the we can think of a page having like an active state in a passive state exists already an 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 loss at focus you lost focus mm-hmm and that's what we call the passive state and you get events for that you've had events that for ages on focus blur yeah on on focus on blur bring these are the only / because these are also on input elements right like when an individual internet gets focused sure literally the coders in there but that's also document level focus on blur exactly yes and so when it's in a passive state it could still you know because all run JavaScript and stuff yeah because it that's your semi mode rasp yeah some things might be reduced they tend not to be too much still visible like it could be on your second monitor you're in talking mobile here exclusively it's we're talking about both mobile and desktop yes but I mean in with phones I have split screen view you could still have this this sort of style thing and then next date is hidden oh 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 actually detect occlusion as well do you know what I knew you were going to ask this so I tested it and it does not call but do you know the browser browsers could do that yeah that would be a valid thing to do what they do are the ones I test it anyway which was the browser's on Mac Firefox Safari and Chrome I should remember that last one if you've if you switch desktops it will visibility:hidden because it's technically it's okay but also on workspace to workspace so I didn't it's well yeah I didn't test fullscreen but I presume it would work because that's still going on to a desktop that's came out with 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 going to go through those phases and it is a sort of mostly aligned right you can go it's like a active and passive a Mac you can go for passive in them back you can go from hidden to terminate 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 so that you can go from active to terminated except if you accept you can I think on mobile you can then that say that the browser goes out of memory if it's had crashes of course I've gone from active to terminated like but mostly it's a nice linear just a new bits from the hiddenness dancing like way I'll be 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 I said timeout timers we want to stop the page ring okay but we want to be able to it 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 disk 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 for going to community to find them the bf cache so yeah it's called frozen and then so you'll get a frozen events when it goes from hidden to frozen and a resume event when it goes from frozen okay hidden and the new another new states 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 on mobile because although we get it's the inner thing where the atheists save the screenshot more or less off the apps we can swipe through but if you actually act but it actually has to boot up exactly and so yeah you know Android the browser goes out of memory you were 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 they know 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 say our events yeah yeah yeah they're all events so kind of prevent default but I mean like no I don't want you to suspend me you may not know not only you can react to them but none that you can't control any of them that's interesting so you say it can react to them so there's like a grace period where I'm still allowed to run code before the actual freezing or whatever has so the recommendation is on hidden when you get into the hidden stage which is that you use the visibility change to pick that up save any data that you hid be Oliver to ID be or whatever and when it when you get the freeze events you have the length of that event really simple not anything I might be a grace period but you really for safety would treat that is like prevent f4 wait until yeah that was was discussed but I don't think anyone could agree on what the time should be and let his worries about like people would just use it to keep the page alive or something like that 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 Hardware player 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've not used in ages comes into play and that's session storage hmm so there's a bit of special behavior here none I was looking at the spec first is that 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 got yeah you saw that the tab there and when you click back to it's going to reload okay session storage will persist in because we have is still there but if I close the tab and then command shift to you real yeah that would be like going them 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 like tab but it will persist beyond discarding and there's once the page reloads there is document dot was discarded we don't if you're being restored or actually being loaded so fresh 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 he depends on the app button this ever seems unexpected right because III 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 yet or anything this is fine to use for private data the problem is someone puts like a you know a sensitive image into the app close the app and then you know they give their laptops 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 it's not not nudes no but with this this sounds like a good way of doing it right like this yes being able to save a promise um and a book when to check what you stored because it seems understandable that if there's a tab still there it's understanding from users perspective that if they go back to a tab it should be in the same state as they'd like that in fact it's almost unexpected to the opposite look at session storage ever I think it's synchronous like local storage yep it's is the 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 in certain circumstances rules change once that goes on to disk yeah so you know and although I think they sort of 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 life cycle API you said it's in chrome 60 a chrome 68 there's some nice debugging tool so 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 well 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 so I have a Chrome extension that puts them oh right so if I cannot have to have an extension but rather Chrome with itself I'm all for that and it's it you know good for memory as well because they you know that's us 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 for browsers as well Hornets I mean yes firing Firefox at 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 to online 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 afraid to go in you are a very vocal about not being a hugger yeah I'm not a great hugger I'd do it if necessary