- Published on
웹 성능을 극대화하는 서비스 워커 실전 가이드
- Authors
- Name
- Deokgoo Kim
웹 성능을 극대화하는 서비스 워커 실전 가이드
서비스 워커(Service Worker)는 무거운 연산을 백그라운드에서 수행하고 네트워크 캐싱을 효율적으로 관리하여 기존 브라우저 환경에서는 못 하던 걸 가능하게 해주는 기술이다. 실제 프로젝트에서 사용한 서비스 워커 활용 사례를 정리해봤다.
OffscreenCanvas를 활용한 렌더링 최적화
OffscreenCanvas는 메인 스레드에서 직접 그리지 않고, 웹 워커를 활용하여 백그라운드에서 렌더링 작업을 수행할 수 있는 기능이다. 이를 통해 UI 스레드의 부담을 줄이고 렌더링 성능을 향상할 수 있다.
예제 코드
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker("worker.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);
서비스 워커를 이용한 네트워크 캐싱
서비스 워커를 활용하면 네트워크 요청을 캐싱하여 불안정한 네트워크 환경에서도 빠른 응답을 제공할 수 있다. 네이티브급의 빠른 응답을 원한다면 거의 필수다. 단순한 캐싱을 넘어, 최신 데이터를 수신하면 기존 캐시를 갱신하는 방식으로 효율적인 데이터 관리를 할 수 있다. 이를 통해 사용자는 안정적인 데이터 제공과 더불어 성능 향상을 체감할 수 있다.
예제 코드
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request).then(networkResponse => {
return caches.open('dynamic-cache').then(cache => {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
});
}).catch(() => caches.match('/offline.html')) // 오프라인 대응
);
});
백그라운드에서 네트워크 요청 수행하기
서비스 워커는 페이지가 닫혀도 네트워크 요청을 유지할 수 있다. 이를 활용하면 백그라운드에서 데이터를 요청하고, 완료 후 특정 로직을 실행할 수 있다.
예제 코드
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
if (url.pathname === '/api/data') {
event.respondWith(fetch(event.request).then(response => {
// 데이터가 도착하면 추가적인 처리를 수행할 수 있음
return response;
}));
}
});
다음 글 예고
다음엔 서비스 워커의 라이프사이클과 스코프 관리 방법을 다뤄볼 예정이다.
댓글
새 글 알림 받기
실무에서 바로 써먹을 수 있는 개발 팁과 경험담을 받아보세요
#실무 개발 경험담#최신 기술 트렌드#성능 최적화 노하우#개발 팁과 인사이트
개인정보는 뉴스레터 발송 목적으로만 사용되며, 언제든 구독을 해지할 수 있습니다.