서비스 워커(Service Worker)는 브라우저와 네트워크 사이에서 동작하는 프록시 스크립트로, 오프라인 지원, 백그라운드 동기화, 푸시 알림 등 PWA(Progressive Web App)의 핵심 기술이다.
생명주기
1. 등록 (Register): 페이지에서 navigator.serviceWorker.register()
2. 설치 (Install): SW 파일 다운로드 및 캐시 준비
3. 활성화 (Activate): 이전 SW 제거, 캐시 정리
4. 실행 (Running): fetch, push, sync 이벤트 처리
기본 구현
javascript
// sw.js
const CACHE_NAME = 'v1';
const URLS_TO_CACHE = ['/', '/index.html', '/app.js', '/styles.css'];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(URLS_TO_CACHE))
);
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
// Cache First 전략
return response || fetch(event.request).then(res => {
const clone = res.clone();
caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));
return res;
});
})
);
});
캐싱 전략
| 전략 | 설명 | 적합한 경우 |
|---|
| Cache First | 캐시 우선, 없으면 네트워크 | 정적 에셋 |
| Network First | 네트워크 우선, 실패시 캐시 | API 응답 |
| Stale While Revalidate | 캐시 반환 후 백그라운드 갱신 | 자주 변하는 콘텐츠 |
Workbox 활용
javascript
import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { NetworkFirst, CacheFirst } from 'workbox-strategies';
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();
registerRoute(
({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api-cache' })
);
관련 개념
