Check out a free preview of the full JavaScript in the Background course

The "Freezing Detection" Lesson is part of the full, JavaScript in the Background course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano discusses using the Page Lifecycle API to detect a freeze event, if there is suspension on the desktop, and demonstrates discards on Google Chrome. The Page Lifecycle API is currently only available for some chromium browsers.

Preview
Close

Transcript from the "Freezing Detection" Lesson

[00:00:00]
>> I mentioned before that there is also another app that is Chromium-based and that's freezing detection. So the Page Lifecycle API it's okay, okay? But it's also been fire when we are getting out of the app because we are going to another website. It's also been Firefox when you put another window on top.

[00:00:26]
So can we be more specific about saving data only if my app is actually going to be suspended? Well, we have this API, it's called the Page Lifecycle API and it's only available on Chromium-browsers. This feels weird but even on Android sometimes the API is not working where it's actually more useful.

[00:00:57]
So this API works for sure on Chrome on desktop. But now you're thinking, do we have suspension on desktop? That's interesting, right? So can we actually discard a tab? I will show you in a second how that works. On Chrome I'm not sure if you have ever seen that URL.

[00:01:21]
Well, it's time for doing that for the first time. So if you open Chrome and you go to Chrome discards, you will see something like this. It's not a nice UI, it's not the best UI that you will see in Chrome. What's the idea? I can open different UIs, different URLs here like Twitter and many others and you will see here all your tabs.

[00:01:53]
Let me increase the font size. So here you will see this is for debugging purposes only, it's not for the end user. You will see all your current tabs, okay? The current visibility state, okay? So that's the page visibility API, the loading state, and the lifecycle state, and discard count.

[00:02:16]
Actually in Google Chrome tabs can be discarded. It's only on very special situations for example, here to test this we have some links here at the top. For example, we can click here urgent discard a tab now is like I need memory now. So if I click here it will just take one of the tabs that are not seen so one of the hidden tabs, and it will discard the tab, okay?

[00:02:47]
So let's try it. I click it there and it seems like, here it is. Now I have this urgent discard link on both. I can select which one they wanna discard. So I can discard this one. So now that tab is discarded. How do I know? You don't actually know as a user but if I go back, let's do that with Twitter as well.

[00:03:15]
So now both are discarded. If I go back to that tab that tab will reload because it wasn't actually loaded, it was discarded, okay? So this happens on desktop only on low memory situations, on memory pressure, RAM pressure. In that case when you have 80 tabs open there will be a couple that will be discarded by Chrome.

[00:03:45]
Other browsers such as Brave, they are more aggressive with this. And they discard tabs more often than Google Chrome itself. Makes sense? There is another extension as well available, the extension, okay? It's here it's called the greater discarder, okay? So with the greater discarder you can even pin this so actually if I pin this, let's pin the greater discarder.

[00:04:21]
You can go to your tab and click discard this tab. And what will happen is that it will change tabs so that it can discard it. So actually we can discard tabs on desktop. And we have a way in Chrome only or Chromium based browsers only to know that that's happening or that that happened.

[00:04:49]
The event is called freeze, okay? So freeze means this is your last dinner. This is your last opportunity to save data. This tab is about to freeze so that means you won't be able to execute code after this. So then you save data. Remember that the other operation can happen in two ways.

[00:05:18]
When the user is going back to your app maybe your app is still in memory or maybe your app was discarded, you don't know.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now