Service Worker Usage Guide: Claude Code 활용 가이드

Service Workerの役割

Service Workerは브라우저と네트워크の間に位置するプロキシで、オフライン대응・캐시制御・プッシュ알림などを実現します。PWA（Progressive Web App）の中核技術ですが、ライフサイクルや캐시戦略の理解が필요합니다。Claude Code를 활용하면 目的に合ったService Workerを올바르게구현할 수 있습니다。

Service Workerの등록

> Service Workerを등록するユーティリティを作って。
> 업데이트検知と사용자への알림も含めて。

export async function registerServiceWorker() {
  if (!('serviceWorker' in navigator)) {
    console.log('Service Worker非対応のブラウザです');
    return;
  }

  try {
    const registration = await navigator.serviceWorker.register('/sw.js', {
      scope: '/',
    });

    // 업데이트の検知
    registration.addEventListener('updatefound', () => {
      const newWorker = registration.installing;
      if (!newWorker) return;

      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
          // 新しいバージョンが利用可能
          showUpdateNotification(registration);
        }
      });
    });

    console.log('Service Worker登録完了:', registration.scope);
  } catch (error) {
    console.error('Service Worker登録失敗:', error);
  }
}

function showUpdateNotification(registration: ServiceWorkerRegistration) {
  if (confirm('新しいバージョンが利用可能です。更新しますか？')) {
    registration.waiting?.postMessage({ type: 'SKIP_WAITING' });
    window.location.reload();
  }
}

캐시戦略の구현

> Cache First、Network First、Stale While Revalidateの3つの캐시戦略를 구현해줘。

// sw.js
const CACHE_NAME = 'app-cache-v1';
const STATIC_ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];

// Cache static assets on install
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
  );
});

// Cache First（静的アセット向け）
async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;

  const response = await fetch(request);
  const cache = await caches.open(CACHE_NAME);
  cache.put(request, response.clone());
  return response;
}

// Network First（API向け）
async function networkFirst(request) {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch {
    const cached = await caches.match(request);
    return cached || new Response('オフラインです', { status: 503 });
  }
}

// Stale While Revalidate（ニュースフィード向け）
async function staleWhileRevalidate(request) {
  const cache = await caches.open(CACHE_NAME);
  const cached = await cache.match(request);

  const fetchPromise = fetch(request).then((response) => {
    cache.put(request, response.clone());
    return response;
  });

  return cached || fetchPromise;
}

// Routing
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  if (request.destination === 'image' || url.pathname.match(/\.(css|js|woff2?)$/)) {
    event.respondWith(cacheFirst(request));
  } else if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(request));
  } else {
    event.respondWith(staleWhileRevalidate(request));
  }
});

オフライン페이지

// オフライン時のフォールバック페이지
self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request).catch(() => caches.match('/offline.html'))
    );
  }
});

バックグラウンド동기

// オフライン時に큐に入れ、オンライン復帰時に전송
self.addEventListener('sync', (event) => {
  if (event.tag === 'sync-pending-data') {
    event.waitUntil(syncPendingData());
  }
});

async function syncPendingData() {
  const db = await openDB('pending-requests');
  const requests = await db.getAll('queue');

  for (const req of requests) {
    try {
      await fetch(req.url, req.options);
      await db.delete('queue', req.id);
    } catch {
      break; // まだオフラインなら中断
    }
  }
}

정리

Claude Code를 활용하면 캐시戦略の選定からオフライン대응、バックグラウンド동기まで、Service Workerの활용を효율적으로구현할 수 있습니다。PWA全般はProgressive Web App개발を、캐시戦略의 상세 정보는캐시戦略를 참고하세요.

Service Worker의 상세 정보는MDN Web Docs - Service Worker API를 확인하세요.