Service Worker란?
Service Worker는 브라우저와 네트워크 사이에서 동작하는 가상 프록시로, 웹 애플리케이션의 자원을 캐싱하고 네트워크 상태에 따라 적절한 응답을 제공합니다. 이를 통해 사용자는 오프라인 상태에서도 애플리케이션을 사용할 수 있습니다.
Service Worker는 독립된 스레드에서 실행되며, DOM에 직접 접근하지 않습니다. 비차단형 API를 사용하며, Promise 기반으로 설계되어 효율적인 작업 처리가 가능합니다.
Service Worker 등록하기
Service Worker를 사용하려면 먼저 브라우저에 등록해야 합니다. 아래는 간단한 등록 코드입니다:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => console.log('Service Worker 등록 성공:', registration))
.catch(error => console.log('Service Worker 등록 실패:', error));
}
위 코드는 브라우저가 Service Worker API를 지원하는지 확인한 후, Service Worker 파일(sw.js)을 등록합니다.
Service Worker의 수명 주기
Service Worker는 설치(install), 활성화(activate), 그리고 fetch 이벤트를 포함한 여러 단계로 구성된 수명 주기를 가집니다.
1. 설치 (Install)
설치 단계에서는 캐시를 초기화하고 필요한 자원을 캐싱합니다:
self.addEventListener('install', event => {
event.waitUntil(
caches.open('app-cache-v1').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/app.js',
'/images/logo.png'
]);
})
);
});
2. 활성화 (Activate)
활성화 단계에서는 오래된 캐시를 정리할 수 있습니다:
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== 'app-cache-v1') {
return caches.delete(cacheName);
}
})
);
})
);
});
3. 요청 가로채기 (Fetch)
fetch 이벤트를 통해 네트워크 요청을 가로채고 캐시된 자원을 반환하거나 네트워크에서 데이터를 가져옵니다:
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request).then(networkResponse => {
return caches.open('app-cache-v1').then(cache => {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
});
})
);
});
오프라인 우선 전략
"오프라인 우선" 패턴은 캐시된 자원이 있으면 이를 먼저 반환하고, 없을 경우 네트워크에서 데이터를 가져와 캐시에 저장하는 방식입니다. 이를 통해 사용자는 인터넷 연결이 없어도 애플리케이션을 사용할 수 있습니다.
업데이트 및 캐시 관리
새로운 버전의 애플리케이션이 배포되었을 때, Service Worker를 업데이트하려면 캐시 이름에 버전 번호를 추가하여 이전 캐시와 구분해야 합니다. 또한, activate 이벤트를 활용해 오래된 캐시를 삭제할 수 있습니다.
결론
이 문서에서는 Service Worker를 사용해 PWA가 오프라인에서도 동작하도록 만드는 방법을 살펴보았습니다. Service Worker는 단순히 오프라인 기능뿐만 아니라 푸시 알림, 백그라운드 동기화 등 다양한 기능을 제공합니다. 이를 통해 사용자 경험을 크게 향상시킬 수 있습니다.
