Service Worker Usage Guide dengan Claude Code

役割 Service Worker

Service Worker browser dan ネットワーク 間 位置 proxy 、オフラインdukungan・cache制御・プッシュnotifikasi dll. 実現.PWA（Progressive Web App） 中核技術 す 、ライフサイクルやcache戦略 理解 diperlukan.Claude Code 使えば、目的 合ったService Worker 正しくimplementasi bisa dilakukan.

registrasi Service Worker

> Service Worker registrasiするutilitas buatkan.
> pembaruan検知 dan penggunaへ notifikasi juga 含めて。

export async function registerServiceWorker() {
  if (!('serviceWorker' in navigator)) {
    console.log('Service Worker非dukungan browser す');
    return;
  }

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

    // pembaruan 検知
    registration.addEventListener('updatefound', () => {
      const newWorker = registration.installing;
      if (!newWorker) return;

      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
          // 新しいversi pemanfaatandimungkinkan
          showUpdateNotification(registration);
        }
      });
    });

    console.log('Service Workerregistrasiselesai:', registration.scope);
  } catch (error) {
    console.error('Service Workerregistrasigagal:', error);
  }
}

function showUpdateNotification(registration: ServiceWorkerRegistration) {
  if (confirm('新しいversi pemanfaatandimungkinkan す。pembaruanしますか？')) {
    registration.waiting?.postMessage({ type: 'SKIP_WAITING' });
    window.location.reload();
  }
}

implementasi cache戦略

> Cache First、Network First、Stale While Revalidate 3つ cache戦略 implementasikan.

// 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));
  }
});

Halaman Offline

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

バックグラウンド同期

// オフライン時 キュー 入れ、オンライン復帰時 pengiriman
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; // まだオフラインならterhenti
    }
  }
}

Summary

Untuk Claude Codeを使えば、cache戦略の選定からオフラインdukungan、バックグラウンド同期まで、Service Workerのpemanfaatanをefisienにimplementasiできます。PWA全般はProgressive Web Apppengembanganを、cache戦略の詳細, lihat キャッシュ戦略.

Service Worker 詳細 MDN Web Docs - Service Worker API silakan lihat.