Workbox: बिना boilerplate के Caching

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 करें।

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 बनाएँ।

त्वरित जाँच

त्वरित जाँच: Workbox precaching क्या करता है?

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