Service Worker를 설명해 주세요

offlinecachepwa

Service Worker를 설명해 주세요

예상 시간: 7분

30초 답변

Service Worker는 브라우저가 페이지와 별도로 실행하는 background worker입니다. 페이지의 JavaScript와 달리 DOM에 직접 접근할 수는 없지만, fetch event를 가로채 network 요청에 cache 전략을 적용할 수 있습니다. 이를 통해 offline fallback, asset caching, PWA 기능을 만들 수 있습니다.

Service Worker는 install, activate, fetch 같은 lifecycle을 가지며, 보안상 HTTPS 환경에서 동작합니다. 잘못된 cache 전략을 쓰면 오래된 파일이 계속 제공될 수 있어 update 전략도 중요합니다.

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

Service Worker는 DOM에 접근할 수 있나요?

부가 설명

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request))
  );
});

요청이 오면 cache에 있는 응답을 먼저 찾고, 없으면 network로 요청할 수 있습니다.

Service Worker는 강력하지만 복잡합니다. 페이지가 닫혀도 별도 lifecycle을 가지고, 새 service worker가 설치되어도 기존 페이지가 여전히 이전 worker의 제어를 받을 수 있습니다.

그래서 PWA를 만들 때는 cache versioning, skipWaiting, clients.claim 같은 흐름을 조심스럽게 다뤄야 합니다.

한 줄 정리

Service Worker는 페이지와 네트워크 사이에서 요청을 제어해 cache, offline, PWA 기능을 가능하게 하는 background worker입니다.