Service Worker

How it is registered

// Registration
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

// sw.js — the Service Worker file
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll(['/index.html', '/app.css', '/app.js'])
    )
  );
});

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

Caching strategies

• Cache First — use cache if available; network as fallback. For static assets
• Network First — try network; fall back to cache if unavailable. For APIs
• Stale While Revalidate — return cache immediately, update in background

Limitations

HTTPS only. No direct DOM access. Its own lifecycle (install → activate → fetch).