Service Worker
목차 보기
개요
Service Worker는 브라우저와 서버 사이에서 동작하는 백그라운드 JavaScript 스크립트이다.
웹페이지와 독립적으로 실행되며, 네트워크 요청을 가로채 캐시를 활용하거나 오프라인 기능, 푸시 알림, 백그라운드 동기화 등을 구현할 수 있다.
PWA(Progressive Web App)를 구현하기 위한 핵심 기술 중 하나이다.
동작 구조
사용자
↓
브라우저
↓
Service Worker
├── Cache
├── Fetch
├── Push
├── Sync
└── Notification
↓
Server주요 특징
- 백그라운드 실행
- 네트워크 요청 가로채기
- 오프라인 지원
- 캐시 관리
- 푸시 알림
- 백그라운드 동기화
- 앱 성능 향상
동작 과정
웹사이트 접속
↓
Service Worker 등록
↓
설치(Install)
↓
활성화(Activate)
↓
Fetch 이벤트 처리
↓
Cache 또는 Network 응답생명주기(Lifecycle)
Register
↓
Install
↓
Activate
↓
Running
↓
Update
↓
Terminate등록(Register)
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(
'/service-worker.js'
);
}브라우저에 Service Worker를 등록한다.
Install 이벤트
self.addEventListener(
'install',
event=>{
});필요한 파일을 캐시에 저장하는 단계이다.
Activate 이벤트
self.addEventListener(
'activate',
event=>{
});오래된 캐시를 삭제하거나 초기 설정을 수행한다.
Fetch 이벤트
self.addEventListener(
'fetch',
event=>{
});모든 네트워크 요청을 가로채 처리할 수 있다.
캐시 저장
caches.open("v1")
.then(cache=>{
cache.addAll([
"/",
"/style.css"
]);
});정적 파일을 미리 저장한다.
캐시 조회
caches.match(
event.request
)캐시에 존재하면 서버 요청 없이 응답한다.
Cache First 전략
Request
↓
Cache 확인
↓
있음 → 반환
↓
없음 → Server 요청속도가 빠르며 정적 리소스에 적합하다.
Network First 전략
Request
↓
Server 요청
↓
성공 → Cache 저장
↓
실패 → Cache 반환최신 데이터가 중요한 서비스에 적합하다.
Stale While Revalidate
Cache 반환
↓
동시에
↓
Server 요청
↓
Cache 업데이트빠른 응답과 최신 데이터 확보를 동시에 노릴 수 있다.
Push Notification
self.addEventListener(
'push',
event=>{
});백그라운드에서도 푸시 알림을 받을 수 있다.
Notification
self.registration.showNotification(
"새 알림"
);사용자에게 알림을 표시한다.
Background Sync
self.addEventListener(
"sync",
event=>{
});오프라인에서 수행하지 못한 작업을 네트워크 복구 후 자동 실행한다.
HTTPS
Service Worker는 보안을 위해 HTTPS 환경에서만 동작한다.
예외
localhost개발 환경에서는 HTTP도 허용된다.
PWA와 관계
HTML
↓
JavaScript
↓
Manifest
+
Service Worker
↓
PWAService Worker와 Manifest가 함께 있어야 PWA 기능을 제대로 활용할 수 있다.
대표 활용 분야
- 오프라인 웹앱
- 쇼핑몰
- ERP
- SaaS
- 뉴스 서비스
- 메모 앱
- 관리자 시스템
- 모바일 웹
장점
- 빠른 로딩 속도
- 오프라인 지원
- 서버 부하 감소
- 사용자 경험 향상
- 푸시 알림 지원
- 캐시 활용 가능
단점
- 캐시 관리가 복잡할 수 있음
- HTTPS 필수
- 브라우저별 정책 차이
- 업데이트 전략을 잘 설계해야 함
실무 메모
실무에서는 다음과 같은 방식이 권장된다.
- 캐시 버전 관리(
v1,v2등) - 오래된 캐시 자동 삭제
- Workbox 라이브러리 활용
- 정적 파일은 Cache First 전략 적용
- API는 Network First 또는 Stale While Revalidate 전략 적용
- HTTPS 환경에서 운영
- 서비스 워커 업데이트 안내 UI 제공
- Push 권한은 필요한 시점에 요청
- Lighthouse로 PWA 품질 점검
- 캐시 용량 관리 정책 수립
Service Worker와 함께 사용하는 기술
대표 개발 도구
- Chrome DevTools
- Lighthouse
- Workbox
- Visual Studio Code
- Vite
- npm
관련 문서
출처
- MDN Web Docs - Service Worker API
- Google web.dev Service Workers Guide
- W3C Service Workers Specification