Service Worker Caching

Service Worker adalah JavaScript yang berjalan di background thread terpisah dari halaman. Ia bertindak sebagai proxy antara aplikasi dan jaringan, memungkinkan kita mengontrol sepenuhnya bagaimana request ditangani.

Strategi Caching

1. Network First

// Selalu coba network dulu, fallback ke cache
async function networkFirst(request) {
  try {
    const response = await fetch(request);
    const cache = await caches.open("v1");
    cache.put(request, response.clone());
    return response;
  } catch {
    return caches.match(request); // fallback ke cache
  }
}

Kapan digunakan: API calls, konten yang selalu harus fresh (berita, data real-time)

2. Cache First

// Cek cache dulu, network hanya jika tidak ada
async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;

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

Kapan digunakan: Static assets (CSS, JS, fonts, images) — jarang berubah

3. Stale-While-Revalidate

// Return cache segera, update di background
async function staleWhileRevalidate(request) {
  const cache = await caches.open("v1");
  const cached = await cache.match(request);

  // Fetch di background untuk update cache
  const fetchPromise = fetch(request).then((response) => {
    cache.put(request, response.clone());
    return response;
  });

  return cached ?? fetchPromise; // Return cache atau tunggu network
}

Kapan digunakan: Avatar, profile data, konten yang boleh sedikit stale

Lifecycle Service Worker

Register → Install (cache assets) → Activate (hapus cache lama) → Fetch (intercept requests)

Perbandingan Strategi