A page with an open WebSocket can be cached when the browser closes that connection on entry.
<div class="atlas"><div class="head"><b>BFCache · WebSocket page</b><span class="pulse"></span></div><div class="stage"><div class="bf-page box"><div class="bf-status"><span id="bf-socket"></span><b id="bf-label">socket open</b></div><div class="bf-state">draft text stays here</div></div><div class="bf-steps mono"><span id="bf-step">live page</span><span>→</span><span>cached page</span><span>→</span><span>Back</span></div></div></div>.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.bf-page{height:70%;padding:12px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .5s,opacity .5s}.bf-page.cached{transform:scale(.82);opacity:.85}.bf-status{display:flex;align-items:center;gap:8px;color:var(--accent)}.bf-status span{width:10px;height:10px;border-radius:50%;background:var(--accent)}.bf-status.off span{background:var(--muted)}.bf-state{border:1px dashed var(--line);padding:8px;border-radius:5px;font-size:14px}.bf-steps{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--muted)}#bf-step{color:var(--accent)}let phase=0;function tick(){document.querySelector('.bf-page').classList.toggle('cached',phase===1);document.querySelector('.bf-status').classList.toggle('off',phase!==0);document.getElementById('bf-label').textContent=['socket open','socket closed','restore + reconnect'][phase];document.getElementById('bf-step').textContent=['live page','enter BFCache','Back restores'][phase];phase=(phase+1)%3}tick();setInterval(tick,1000)The back/forward cache stores page state for a fast return. Chrome expanded eligibility for pages with open WebSockets by automatically closing active connections when the page enters the cache.
The demo shows the socket closing as the page is cached, followed by state restoration on Back. An app that needs live updates must handle reconnecting after restoration.
Check BFCache eligibility and restore handling when Back is slow on a live page.