웹 워커 vs. 서비스 워커

 

웹 워커(Web Worker)

개념

브라우저에서 UI와 분리된 백그라운드 스레드로 무거운 계산을 맡겨서 UI가 멈추지 않게 한다.

CPU를 많이 사용하는 계산, 이미지 처리, 암호화 등을 하고 싶을 때 사용한다.

DOM에는 접근 불가하다.

💡 사용 예시: 이미지 필터 처리, 대규모 정렬 등

📄 Web Worker가 없을 때

// 이 코드는 브라우저를 몇 초간 멈추게 한다.
const bigArray = [...Array(1e8)].map(() => Math.random());
const sorted = bigArray.sort();

 

 

📄 Web Worker 사용

// main.js
const worker = new Worker('sortWorker.js');
worker.postMessage(bigArray); // 데이터를 워커에게 전달

worker.onmessage = (e) => {
  console.log('정렬 완료', e.data);
};

// sortWorker.js
onmessage = (e) => {
  const sorted = e.data.sort();
  postMessage(sorted); // 결과 전달
};

 

 

 

---

 

 

 

서비스 워커(Service Worker)

개념

브라우저와 네트워크 사이에 낀 프록시이다. 오프라인 캐싱, 푸시 알림 등에 사용된다. (PWC의 핵심기술)

사용자가 오프라인이거나, 리소스를 캐시해서 빠르게 응답하거나, 푸시 알림을 보내고 싶을 때 사용한다.

💡 사용 예시: 오프라인 상태에서 페이지 열기 가능

 

📄 Service Worker 사용

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) =>
      cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js',
      ]),
    ),
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      return cachedResponse || fetch(event.request);
    }),
  );
});

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}