# Cache-first Pattern — Progressive Web Apps

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

> Cache-first strategy को implement करें: cache से instantly serve करें, background में update करें।

## Cache-first कब use करें

**Cache-first** cache से content को तुरंत serve करता है। Static assets (images, CSS, JS) के लिए use करें जो शायद ही बदलते हैं। Network requests केवल cache miss पर होती हैं।

## Cache-first Implementation

पहले cache check करें, अगर नहीं मिला तो network पर fall back करें।

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

## एक आम गलती

Cache-first को versioning की जरूरत है। app-v2.js जैसे filenames का उपयोग करें ताकि assets update होने पर cache busting काम करे।
