We have a SPA PWA that is highly-sensitive to tab freezing. Because of this, we need to respond to freeze events.
I set up a listener:
document.addEventListener('freeze', (event) => {
console.log('Tab Frozen', event);
// Do freeze handling here
});
This worked for a bit, then suddenly out of nowhere, freeze events stopped firing. I’m inducing freezing by putting the tab into a group, then collapsing the tab group, which cause Chrome and Edge to freeze the group.
I have ensured that this listener is being reached, and that nothing is de-registering the event handler.
What can cause freeze events to suddenly stop being emitted?
The event wasn’t being fired because the tab wasn’t being properly frozen.
It turns out, the tab had somehow been added to “a unit of related browsing contexts” with another tab, which prevented the tab from being frozen while the other tab was active.
I don’t know how this happened. It can happen when you “Duplicate Tab” to create a second tab from a first, but I don’t believe I did that here. They seem to have become “linked” after creation.
If you can’t get a freeze event to fire:
- Check the “Lifecycle State” column in
chrome://discards/edge://discardsfor the tab in question to make sure it is in fact being frozen. - If it’s not and you have multiple tabs for your site open, close one, and then reopen it independently from the first (don’t “Duplicate Tab”). If you don’t have multiple tabs open and you’re using Edge, make sure you don’t have Dev Tools open, since that can also prevent freezing. In Edge, you can also induce freezing “artificially” from the
discardspage (Chrome doesn’t currently allow for this).