workbox-webpack-plugin

Precaching

Precaching allows you to specify which assets should be cached during the build process. This is useful for ensuring that your web app's core files are cached and available offline. The code sample shows how to exclude images from precaching and set up a runtime caching strategy for them instead.

const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    new GenerateSW({
      // Do not precache images
      exclude: [/.(png|jpg|jpeg)$/],
      // Define runtime caching rules.
      runtimeCaching: [{
        // Match any request that ends with .png, .jpg, .jpeg or .svg.
        urlPattern: /.\.(?:png|jpg|jpeg|svg)$/, 
        // Apply a cache-first strategy.
        handler: 'CacheFirst',
        options: {
          // Use a custom cache name.
          cacheName: 'images',
          // Only cache 10 images.
          expiration: {
            maxEntries: 10,
          },
        },
      }],
    }),
  ],
};

Runtime Caching

Runtime caching is a strategy that allows you to specify how different types of requests are handled by the service worker. The code sample demonstrates how to set up a NetworkFirst strategy for API requests, which tries to fetch the latest data over the network but falls back to the cache if the network is unavailable.

const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    new GenerateSW({
      runtimeCaching: [{
        urlPattern: new RegExp('https://api.example.com'),
        handler: 'NetworkFirst',
        options: {
          networkTimeoutSeconds: 10,
          cacheName: 'api-cache',
          expiration: {
            maxEntries: 50,
            maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
          },
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      }],
    }),
  ],
};

Custom Service Worker

The InjectManifest plugin allows you to use a custom service worker file, into which the plugin will inject the precache manifest. This gives you full control over the service worker's behavior while still benefiting from Workbox's precaching features. The code sample shows how to specify the source and destination for the custom service worker.

const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    new InjectManifest({
      swSrc: './src/sw.js',
      swDest: 'service-worker.js',
    }),
  ],
};