Page Lifecycle API - Is it possible to manually freeze a page

user_373032 0
Viewed 359

I'm trying to see if the freeze and resume events (from the Page Lifecycle API) would work for my application to handle the need to reload content after the window/tab has been frozen by the browser.

But I have no idea how to simulate or trigger manually the tab to be frozen. I've even tried to overload the browser with content to try to trigger the event.

I have simple event listeners to run a console.log when the either freeze or resume events are triggered.

Does anybody know a way to trigger a frozen state for a tab? I have so far been unable to find any mention of this.

window.addEventListener('freeze', (event) => {
  console.log('freeze', event);
});

window.addEventListener('resume', (event) => {
  console.log('resume', event);
});
firefox google-chrome dom javascript
1 Answers

Using https://whatwebcando.today/freeze-resume.html to test (which uses document.addEventListener('freeze') and document.addEventListener('resume')):

  • Chrome 100 indicates that both document.onfreeze and document.onresume are supported.
  • Firefox 99 reports that it doesn't support those.

Following https://www.lifewire.com/chrome-91-brings-freeze-tab-groups-to-google-s-browser-5186266:

Basically, when you’ve grouped several tabs together and collapsed them, Chrome 91 automatically will freeze the pages contained within those tabs to keep them from pulling resources from your computer.

  1. Put the tab (like https://whatwebcando.today/freeze-resume.html or your own HTML page w/ the event listeners) into a tab group.

  2. Collapse the tab group.

  3. Expand the tab group.

  4. Inspect the tab immediately, and console should log the freeze and resume events. However, it only worked for me if {capture: true} (see https://whatwebcando.today/freeze-resume.html):

    window.addEventListener('freeze', (event) => {
  console.log('freeze', event);
}, {capture: true});

window.addEventListener('resume', (event) => {
  console.log('resume', event);
}, {capture: true});

By default capture is false.

From https://developer.chrome.com/blog/page-lifecycle-api/:

One thing to note about the above code is that all the event listeners are added to window and they all pass {capture: true}. There are a few reasons for this:

  • Not all Page Lifecycle events have the same target. pagehide, and pageshow are fired on window; visibilitychange, freeze, and resume are fired on document, and focus and blur are fired on their respective DOM elements.
  • Most of these events do not bubble, which means it's impossible to add non-capturing event listeners to a common ancestor element and observe all of them.
  • The capture phase executes before the target or bubble phases, so adding listeners there helps ensure they run before other code can cancel them.

What didn't work:

user_2413790
Related