웹워커와 서비스워커: 백그라운드 처리 및 오프라인 캐싱
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 애플리케이션에서 백그라운드 작업 및 오프라인 캐싱 기능을 구현해야 하는 개발자, 특히 자바스크립트/HTML5 기반 프론트엔드 개발자
핵심 요약
- Web Worker는
Worker객체를 사용해 UI 스레드를 차단하지 않고 병렬 처리 가능 - Service Worker는
fetch및install이벤트 핸들러를 통해 오프라인 캐싱, 네트워크 요청 중간 처리, 푸시 알림을 지원 - Service Worker는 HTTPS가 필요하며, Workbox 라이브러리를 활용해 캐싱 전략을 간편히 구현 가능
섹션별 세부 요약
1. Web Worker 기본 구현
worker.js파일에서self.addEventListener('message', ...)로 메시지 수신 및 처리- 메인 스레드(
main.js)에서new Worker('worker.js')로 워커 생성 및 데이터 전송 - 오류 처리를 위해
worker.addEventListener('error', ...)이벤트 리스너 추가
2. Service Worker 오프라인 캐싱
service-worker.js에서install이벤트로caches.open()을 통해 필수 리소스 캐싱fetch이벤트에서caches.match()로 캐시 우선 접근, 네트워크 실패 시 대체- HTTPS 또는 로컬 서버에서만 작동하며, DOM 접근 불가
3. Service Worker 고급 기능
- 네트워크 우선 전략 실현:
fetch실패 시 캐시 사용 (fetch().catch(() => caches.match())) - 캐시 업데이트를 위해
activate이벤트에서caches.keys()로 오래된 캐시 삭제 - 푸시 알림 지원:
Push API를 사용해 사용자 구독 후 서버에서 메시지 전송
4. 워커 결합 활용 예시
- Service Worker로 데이터 캐싱 후, Web Worker가
worker.js에서 캐시된data.json처리 - 메인 페이지에서
navigator.serviceWorker.ready로 캐시 데이터 가져오기 및 워커 실행 - 리소스 최적화: 두 워커 병렬 처리로 메인 스레드 차단 방지
5. Service Worker 생명주기
- 설치(Install): 초기 리소스 캐싱 및
event.waitUntil()로 초기화 완료 - 활성화(Activate): 이전 버전 서비스워커 정리 및
event.waitUntil()로 정리 완료 - 비활성화(Uninstall): 새로운 버전 적용 시 자동으로 이전 버전 제거
결론
- Web Worker는 병렬 처리, Service Worker는 오프라인 캐싱 및 네트워크 제어에 적합
- Workbox 라이브러리 사용으로 캐싱 전략 간편화, 캐시 크기 제한 및 푸시 알림 최적화 필수
- HTTPS 필수이며, 라이프사이클 관리를 통해 서비스워커 업데이트 및 오래된 캐시 정리 수행
- 두 워커 병렬 처리로 응답성 향상 및 자원 최적화 가능