오프라인 도우미: Service Workers

핵심 개념

인터넷이 끊겨도 웹사이트가 작동하게 도와주고, 스마트폰처럼 푸시 알림을 보낼 수도 있게 해줘요.

코드 분석

HTML5📋 코드 (11줄)

<button onclick='checkSW()'>Service Worker 체크</button>
<div id='result'></div>
<script>
  function checkSW() {
    if ('serviceWorker' in navigator) {
      document.getElementById('result').innerHTML = '이 브라우저는 Service Worker를 지원합니다!';
    } else {
      document.getElementById('result').innerHTML = 'Service Worker를 지원하지 않습니다.';
    }
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Service Worker 코드의 캐시 전략(Network First vs Cache First),
버전 업데이트, skipWaiting 타이밍 버그를 찾아 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

Service Worker로 오프라인 PWA, 백그라운드 동기화,
푸시 알림을 실전 완성 코드 3개로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Service Worker 구현을 분석해서
캐시 용량, 업데이트 전략, 디버깅 난이도,
사용자 영향(잘못된 캐시 갇힘)을 종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에 Service Worker 기반 PWA가
네이티브 앱 대비 어디까지 따라잡았는지,
어떤 분야에서 PWA가 살아남았는지 솔직히 평가해줘.

⭐ 이것만 기억하세요

오프라인 도우미: Service Workers는 이 3가지만 확실히 잡으세요

1.네트워크가 끊기면 웹 앱이 완전히 멈추는데, Service Worker 없이는 오프라인 대응이 불가능합니다

2.Service Worker는 브라우저와 서버 사이의 프록시로, 요청을 가로채서 캐시된 응답을 돌려줄 수 있습니다

3.다음 챕터에서 사용자에게 알림을 보내는 Notifications API를 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.28 — 질문하거나 답변을 확인하세요

→

진행도 28 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)