Lesson 10 / 29

Cache-first pattern

Implement cache-first strategy: serve from cache instantly, update in the background.

When to use cache-first

Cache-first serves content from cache immediately. Use for static assets (images, CSS, JS) that rarely change. Network requests happen only if cache misses.

Cache-first implementation

Check cache first, fall back to network if not found.

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

Output:

Cached assets served instantly; network only used on cache miss.

A common trap

Cache-first needs versioning. Use filenames like app-v2.js so cache busting works when assets update.