한양과기고 에듀테크 수업도구 대시보드

서비스 워커는 브라우저와 네트워크 사이에서 요청을 가로채는 백그라운드 스크립트입니다. fetch 이벤트를 감청해 캐시에서 응답을 줄지, 네트워크로 보낼지 직접 결정할 수 있어서 오프라인에서도 앱이 동작하는 PWA(Progressive Web App)의 핵심입니다.

🌐 브라우저 페이지 app.html

네트워크 연결 ONLINE

캐싱 전략 요청 URL

⚙️ 서비스 워커 activated

① fetch 이벤트 감청

↓

② 전략에 따라 분기

↓

③ Cache 조회

네트워크 요청

↓

④ respondWith() 응답

// sw.js self.addEventListener('fetch', event => { event.respondWith( handleRequest(event.request) ); });

💾 Cache Storage 0개

// 캐시가 비어 있습니다

caches.open()으로 만든 저장소로, 요청한 적 있는 응답 사본을 브라우저 디스크에 보관합니다. 서버가 죽거나 오프라인이어도 여기서 즉시 꺼내 씁니다.

📋 요청 로그 실시간

// 요청 대기 중...

캐시 적중(Hit) 0

네트워크 요청 0

오프라인 실패 0

🔄 서비스 워커 라이프사이클

→

install

↓

waiting

→

activate

↓

fetch 가로채기 시작

install 단계에서 caches.addAll([...])로 핵심 파일을 미리 저장합니다. 새 버전이 배포되면 기존 탭이 남아있는 동안 waiting 상태로 대기하다가, 탭이 모두 닫히거나 skipWaiting() 호출 시 새 워커가 activate 됩니다.

🛡️ 캐싱 전략 3가지

① Cache First
캐시에 있으면 바로 반환, 없을 때만 네트워크로. 빠르지만 캐시가 오래된 데이터를 줄 수 있음. 폰트·아이콘처럼 안 바뀌는 자원에 적합.

② Network First
네트워크를 먼저 시도하고 실패(오프라인)하면 캐시로 폴백. 최신 데이터 우선이지만 느릴 수 있음. 공지사항처럼 최신성이 중요한 API에 적합.

③ Stale-While-Revalidate
캐시를 즉시 반환하면서 동시에 백그라운드로 네트워크 요청해 캐시를 갱신. 체감 속도와 최신성을 동시에 노림. 다음 방문부터 최신 데이터 반영.