WebSocket 페이지의 뒤로·앞으로 캐시

<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)