Service Worker 등록과 수명 주기

서비스 워커란 무엇인가요

서비스 워커 등록하기

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js', { scope: '/' })
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.error('SW registration failed:', err));
  });
}

scope

수명 주기: 설치 → 활성화 → 가져오기

// sw.js
self.addEventListener('install', (event) => {
  console.log('SW installing');
  event.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
    )
  );
});

self.addEventListener('activate', (event) => {
  console.log('SW active');
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
    )
  );
});

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

skipWaiting()

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate immediately on next reload
  // ... cache setup
});

clients.claim()

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

서비스 워커 업데이트하기

앱에서 업데이트 감지하기

navigator.serviceWorker.register('/sw.js').then(reg => {
  reg.addEventListener('updatefound', () => {
    const newSW = reg.installing;
    newSW.addEventListener('statechange', () => {
      if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
        // New version ready
        showUpdateBanner(() => {
          newSW.postMessage('SKIP_WAITING');
          window.location.reload();
        });
      }
    });
  });
});

등록 해제하기

navigator.serviceWorker.getRegistrations().then(regs => {
  for (const reg of regs) reg.unregister();
});

브라우저 DevTools

일반적인 함정

Workbox — 생산성 라이브러리

빠른 확인

복습: 서비스 워커 수명 주기