서비스 워커 & 오프라인 지원 – PWA의 핵심 요소

“인터넷이 끊겨도 작동하는 웹앱, 어떻게 만들 수 있을까?”

웹 성능 향상을 넘어, 이제는 오프라인에서도 동작 가능한 웹앱이 사용자 경험의 기준이 되고 있다.
이번 글에서는 그 핵심인 Service Worker와 캐시 전략, 그리고 이를 활용한 PWA(Progressive Web App) 구현 방식을 정리해보자.

---

🔧 Service Worker란?

백그라운드에서 브라우저와 별도로 동작하는 JS 스레드

주요 특징

• 브라우저와 별개로 작동 (페이지와 분리된 스레드)
• 네트워크 요청을 가로채고 캐시하거나 수정 가능
• 푸시 알림, 백그라운드 동기화, 오프라인 처리 등 가능

// service-worker.js
self.addEventListener('fetch', (event) => {
  event.respondWith(caches.match(event.request));
});

사용자의 요청을 직접 가로채고 응답을 제어할 수 있는 강력한 도구이다.

---

💡 오프라인 지원의 핵심 – 캐시 전략

Service Worker는 Cache API를 통해 리소스를 저장하고 꺼내 쓸 수 있다.

주요 캐시 전략

전략	설명
Cache First	캐시에 있으면 먼저 사용, 없으면 네트워크 요청
Network First	항상 네트워크 먼저 요청, 실패 시 캐시 사용
Stale-While-Revalidate	캐시 즉시 응답 + 백그라운드에서 최신 버전 갱신
Cache Only / Network Only	극단적인 방식 (별도 조건에서만 사용)

---

예시: Stale-While-Revalidate 구현

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open('my-cache').then((cache) =>
      cache.match(event.request).then((cached) => {
        const networkFetch = fetch(event.request).then((res) => {
          cache.put(event.request, res.clone());
          return res;
        });
        return cached || networkFetch;
      })
    )
  );
});

---

📱 PWA(Progressive Web App)에서의 역할

PWA는 앱처럼 동작하는 웹앱이다. 핵심은 사용자가 네이티브 앱처럼 느끼도록 만드는 경험 설계이다.

PWA의 3대 조건

1. HTTPS에서 서비스 워커 등록
2. Web App Manifest (아이콘, 이름 등 앱 메타정보)
3. 오프라인 캐시 또는 fallback 동작

→ 사용자는 "홈 화면에 추가"를 통해 웹앱을 앱처럼 실행 가능

---

예시: 서비스 워커 등록

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

---

⚙️ Workbox – 서비스 워커 도우미 툴킷

Google에서 만든 서비스 워커 템플릿 자동 생성 도구

Workbox 특징

• 캐시 전략 설정을 간단한 선언형 API로 구성
• 기본 빌드에 통합 가능 (Vite, Webpack 등)
• 다양한 플러그인 제공 (Precaching, Routing 등)

예시: Workbox 코드 스니펫

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'script',
  new StaleWhileRevalidate()
);

복잡한 캐시 전략도 한 줄로 구현 가능!

---

✅ 프론트엔드 개발자를 위한 실전 팁

• 서비스 워커는 항상 HTTPS 환경에서만 등록 가능 (보안 이유)
• 초기 등록 시 self.skipWaiting() 및 clients.claim()으로 즉시 적용 가능
• 캐시 이름을 버전으로 관리하면 업데이트 시 리소스 갱신이 편함
• PWA 개발 시 manifest.json 구성도 같이 챙기기
• 오프라인 fallback 페이지도 함께 제공하는 것이 UX 측면에서 중요

---

✍️ 마무리 요약

서비스 워커는 브라우저의 네트워크 요청을 가로채고 제어할 수 있는 막강한 기능이다. 이를 잘 활용하면 PWA로의 확장이 가능하고, 오프라인에서도 끊김 없는 UX를 제공할 수 있다.