# Workbox: बिना boilerplate के Caching — Progressive Web Apps: Offline, Installable Web Apps

Source: https://www.geekswithgeeks.com/hi/pwa/pwa-workbox

> Google के Workbox से assets precache करें और कुछ lines में cache-first, network-first व stale-while-revalidate routes लगाएँ।

## Workbox क्यों

**Workbox** ऐसी libraries का समूह है जो Cache और Fetch APIs को wrap करती हैं। यह versioning के साथ precaching, routing और आम caching strategies संभालता है, इसलिए आप कम service-worker code लिखते हैं और cache की गलतियाँ कम होती हैं।

## Routes और strategies

Build output को precache करें और हर request type के लिए strategy register करें।

```javascript
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(({ request }) => request.destination === 'image',
  new CacheFirst({ cacheName: 'images' }));
registerRoute(({ request }) => request.mode === 'navigate',
  new NetworkFirst({ cacheName: 'pages' }));
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({ cacheName: 'api' }));
```

Files हाथ से लिखने के बजाय build time पर `workbox-webpack-plugin` या `vite-plugin-pwa` से precache manifest बनाएँ।

त्वरित जाँच

**Quiz:** Workbox precaching क्या करता है?

- [x] install के दौरान versioned build assets cache करता है
- [ ] Cache को encrypt करता है
- [ ] Service worker बंद करता है
- [ ] Network requests block करता है

*Answer:* install के दौरान versioned build assets cache करता है. Precaching assets पहले से रखता है और revision बदलने पर उन्हें अपडेट करता है।