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。