Page Lifecycle Playground - Interactive Web API Lab | IconVault

Master the page lifecycle: live state machine, freeze and resume, visibility changes, bfcache eligibility and an event log. Free, in your browser.

All tools

Page Lifecycle Playground

Live state machine, freeze/resume and bfcache eligibility

5 of 5 free uses left

Monitoring

Starts a trial-counted session; listeners are always live so you can watch the state machine for free.

document.wasDiscardedunknown

true means the browser discarded this tab earlier to save memory and reloaded it - state you did not persist was lost.

Simulate (dispatches the real events)

These dispatch the actual freeze/resume events your handlers would receive from the browser.

Real-world tests to try

  1. Open this page in another tab, then switch away for a minute - watch visibilitychange and freeze.
  2. Navigate away and press Back - pageshow persisted=true means bfcache restored you instantly.
  3. Lock your phone screen - hidden, then freeze.

5 of 5 free monitored sessions left.

State machine

visibility: visible
active
-
passive
-
hidden
-
frozen
-
terminated

Lifecycle event log

Lifecycle events will stream here.

About this tool

IconVault's Page Lifecycle Playground visualizes the real page lifecycle state machine: active, passive, hidden, frozen, terminated and discarded, with live visibility tracking, freeze and resume simulation, bfcache eligibility checks that flag what blocks back-forward cache, and a full event log of every transition. It is free and runs fully in your browser.

You will learn why the old `unload` event is unreliable on mobile and what to use instead: `pagehide`, `visibilitychange` and `freeze` for saving state. The lab shows how to make pages bfcache-friendly (no unload listeners, careful with open connections), how frozen pages stop timers and network, and the resume pattern that restores state when the user navigates back.

Frequently asked questions

Popular searches

page lifecycle apipage lifecycle javascriptpage lifecycle statesbfcacheback forward cachepageshow pagehidevisibilitychangedocument.visibilitystatefreeze resume pagepage freeze eventunload vs pagehidebeforeunloaddiscarded pagepassive state pagepage lifecycle tutorialpage lifecycle examplepage lifecycle demopage lifecycle playgroundmdn page lifecycleweb page statesmobile page lifecyclesave state before unloadpersist state javascriptsessionstorage pagehideindexeddb pagehidebfcache eligibilitybfcache blockersunload listener bfcachemake page bfcache friendlyback button instantnavigation instant backfrozen page timerschrome page lifecyclepage lifecycle chromecaniuse pagefreezeis pagehide supportedpage lifecycle typescriptweb performance bfcachecore web vitals bfcachewhy unload is badpagehide persistedpageshow persistedrestore state back navigationlifecycle event logtest bfcache onlinedevtools bfcache testerweb page lifecycle guidebfcache test onlinepage states diagramweb lifecycle events

More tools

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →