# Cache-first pattern — Progressive Web Apps

Source: https://www.geekswithgeeks.com/en/pwa/pwa-cache-first

> 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.

```javascript
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.