서비스 워커 생명주기

<div class="v sw"><header>SERVICE WORKER <span id="sw-state">install</span></header><div class="stage sw-stage"><div class="sw-track"><div id="sw0">INSTALL</div><div id="sw1">WAIT</div><div id="sw2">ACTIVATE</div><div id="sw3">CONTROL</div></div><div class="sw-page"><div class="sw-tab">open tab <b id="owner">old worker</b></div><div class="sw-request">request <span id="reply">old response</span></div></div></div><div class="muted">new version waits for old clients</div></div>

.v{width:min(94vw,760px);height:min(88vh,320px);padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 clamp(12px,2.4vmin,16px)/1.3 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden}.v header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--accent);font-weight:700}.v header span{color:var(--muted);font-weight:500}.v .stage{flex:1;min-height:0;position:relative}.v .muted{color:var(--muted)}.v .active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent)!important;color:var(--fg)}.v button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer}.sw-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.sw-track{width:100%;display:flex;gap:4px}.sw-track div{flex:1;text-align:center;border:1px solid var(--line);border-radius:6px;padding:6px 2px;font-size:clamp(12px,2.1vmin,13px);color:var(--muted)}.sw-track div.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--surface))}.sw-page{width:78%;display:flex;gap:6px;justify-content:center}.sw-page>div{flex:1;border:1px solid var(--line);border-radius:6px;padding:7px;background:var(--bg);text-align:center;font-size:clamp(12px,2.3vmin,13px)}.sw-page b,.sw-page span{display:block;color:var(--accent-2);margin-top:3px}

let step=0;const names=["install","waiting","activate","control"];function show(){for(let j=0;j<4;j++)document.getElementById("sw"+j).classList.toggle("on",j===step);document.getElementById("sw-state").textContent=names[step];document.getElementById("owner").textContent=step===3?"new worker":"old worker";document.getElementById("reply").textContent=step===3?"new response":"old response";step=(step+1)%4}show();let timer=setInterval(show,650);document.querySelector(".sw-track").addEventListener("pointerdown",e=>{const n=Number(e.target.id.replace("sw",""));if(Number.isInteger(n)){clearInterval(timer);step=n;show()}})