Offline-Friendly Webpack Build

A configuration helper that builds a web app bundle and emits an offline-ready service worker.

Capabilities

Precache core bundle

• The generated service worker precaches emitted JS/CSS assets from the provided entry build, includes the offline HTML page and any optional additional entries, and omits sourcemaps plus the service worker file itself from the precache list. @test

API resiliency

• Requests whose URLs start with the provided API base are handled with a network-first runtime route that falls back to the cached response if the network is unavailable after 5 seconds, storing fresh responses in the cache whenever the network succeeds. @test

Image reuse limits

• Runtime requests for .png, .jpg, or .jpeg assets are cached for reuse with a cache-first rule that holds at most 20 entries and expires entries older than 7 days while allowing stale responses until refreshed. @test

Navigation fallback

• HTML navigation requests outside the API base should return the offline page when the network fails, ensuring bundled app shells still load offline. @test

Implementation

@generates

API

/**
 * Creates a webpack configuration that builds the app and emits a service worker with the offline behavior above.
 * @param {Object} options
 * @param {string} options.entry - Absolute path to the app entry file.
 * @param {string} options.outputDir - Absolute output directory for webpack assets.
 * @param {string} options.offlinePage - Path (relative to outputDir) to the offline HTML asset to precache and use for navigation fallback.
 * @param {string} options.apiBaseUrl - Base URL prefix for API calls requiring network-first handling.
 * @param {{url: string, revision: string}[]} [options.additionalEntries] - Extra URLs with revisions that must be precached alongside build assets.
 * @returns {import('webpack').Configuration} A webpack config object ready to run.
 */
export function createPwaConfig(options);

Dependencies { .dependencies }

workbox-webpack-plugin { .dependency }

Generates the service worker, builds the precache manifest, and wires runtime caching routes. @satisfied-by