Runtime Caching Service Worker Config

Configure a bundler build that emits a service worker focused on runtime caching for API data, images, and offline navigation fallbacks.

Capabilities

API data resilience

• A GET request to /api/products returns the live network response when online; if the network does not respond within 2 seconds or is offline, the most recent cached JSON response is served instead. The cache keeps at most 30 entries, evicting anything older than 15 minutes, and ignores responses with status 0 or 500 and above. @test

Image freshness

• Requests for .png or .jpg files under /assets/images/ reuse the cached response on repeat visits while fetching an updated copy in the background. Cached images expire after 7 days or once 50 items are stored, whichever comes first. @test

Navigation fallback

• HTML navigations that fail because the user is offline are served a cached /offline.html document; routes starting with /admin skip the fallback and still fail when offline. The offline document is precached during the build. @test

Implementation

@generates

API

/**
 * Builds a bundler configuration that emits a service worker with runtime caching for API data, images, and navigation fallbacks.
 *
 * @param {object} options - Build-time settings such as mode, source paths, or public URL.
 * @returns {import('webpack').Configuration} Configuration ready to merge into a bundler pipeline.
 */
function buildServiceWorkerConfig(options);

Dependencies { .dependencies }

workbox-webpack-plugin { .dependency }

Provides bundler plugins for generating a service worker with precaching and runtime caching support.