workbox-strategies

Cache First Strategy

The Cache First strategy checks the cache for a response before trying to get one from the network. It's useful for assets that don't change often.

import { CacheFirst } from 'workbox-strategies';

const cacheFirst = new CacheFirst();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  cacheFirst
);

Network First Strategy

The Network First strategy tries to get a response from the network first, falling back to the cache if the network is unavailable. This is good for content that updates frequently.

import { NetworkFirst } from 'workbox-strategies';

const networkFirst = new NetworkFirst();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'document',
  networkFirst
);

Stale While Revalidate Strategy

The Stale While Revalidate strategy serves a response from the cache, while simultaneously fetching an updated version from the network for next time. It's a good compromise for resources where freshness is not critical.

import { StaleWhileRevalidate } from 'workbox-strategies';

const staleWhileRevalidate = new StaleWhileRevalidate();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'script',
  staleWhileRevalidate
);

Network Only Strategy

The Network Only strategy forces the response to be retrieved from the network, without any caching involved. This is useful for requests that need to be fresh and aren't suitable for caching.

import { NetworkOnly } from 'workbox-strategies';

const networkOnly = new NetworkOnly();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'script',
  networkOnly
);

Cache Only Strategy

The Cache Only strategy forces the response to be retrieved from the cache, without going to the network. This is useful for assets that have been precached and are known to be available offline.

import { CacheOnly } from 'workbox-strategies';

const cacheOnly = new CacheOnly();
workbox.routing.registerRoute(
  ({request}) => request.destination === 'style',
  cacheOnly
);