workbox-webpack-plugin

What is workbox-webpack-plugin?

The workbox-webpack-plugin is a plugin for webpack that simplifies the process of configuring and generating a service worker for your web application. It integrates with the webpack build process and generates a service worker that can cache assets, manage runtime caching strategies, and help make your web app work offline.

What are workbox-webpack-plugin's main functionalities?

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',
    }),
  ],
};

Other packages similar to workbox-webpack-plugin

sw-precache-webpack-plugin

This is a webpack plugin that generates a service worker using sw-precache that caches webpack's output assets. It is similar to workbox-webpack-plugin but is less feature-rich and is no longer actively maintained.

offline-plugin

offline-plugin is another webpack plugin for creating a service worker that makes your application work offline. It offers similar functionalities to workbox-webpack-plugin but with a different API and configuration options. It is also not as actively maintained as Workbox.

README

workbox-webpack-plugin

This is a webpack plugin for workbox

Installation

npm install --save-dev workbox-webpack-plugin

Reference Docs

You can find documentation for this module here.