workbox-build

What is workbox-build?

The workbox-build npm package is a module that integrates with your build process, allowing you to generate service workers and manage assets for offline use in web applications. It provides a set of tools to precache assets, implement efficient caching strategies, and ensure your web app can work offline or on poor network conditions.

What are workbox-build's main functionalities?

Generating a Service Worker

This feature allows you to generate a service worker script automatically. The script will precache specified assets, enabling your application to load faster and work offline. The example demonstrates generating a service worker for a project where assets are located in the 'dist' directory.

const workboxBuild = require('workbox-build');

workboxBuild.generateSW({
  swDest: 'service-worker.js',
  globDirectory: 'dist',
  globPatterns: ['**\/*.{html,js,css}'],
  skipWaiting: true,
  clientsClaim: true
}).then(({count, size}) => {
  console.log(`Generated a service worker, which will precache ${count} files, totaling ${size} bytes.`);
});

Injecting a Manifest into an Existing Service Worker

This feature is useful when you already have a service worker and want to inject a precache manifest into it. The manifest will include a list of assets to be precached, based on the patterns provided. The example shows how to inject a manifest into an existing service worker.

const workboxBuild = require('workbox-build');

workboxBuild.injectManifest({
  swSrc: 'src/service-worker.js',
  swDest: 'service-worker.js',
  globDirectory: 'dist',
  globPatterns: ['**\/*.{html,js,css,png}']
}).then(({count, size}) => {
  console.log(`Injected a manifest into the service worker, adding ${count} files, totaling ${size} bytes.`);
});

Customizing Caching Strategies

Workbox-build allows for the customization of caching strategies for different types of requests. This example demonstrates how to set up caching strategies for CSS and JavaScript files using Workbox's routing and strategies modules.

// This example assumes you are writing inside a service worker file

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

workbox.routing.registerRoute(
  /\.css$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'css-cache',
  })
);

workbox.routing.registerRoute(
  /\.js$/,
  new workbox.strategies.NetworkFirst({
    cacheName: 'js-cache',
  })
);

Other packages similar to workbox-build

sw-precache

sw-precache is a similar tool for generating service worker code that precaches resources. It was a precursor to Workbox and offers similar functionality for generating service workers. However, Workbox provides a more modular and flexible approach, allowing for more complex caching strategies and better integration with modern build tools.

sw-toolbox

sw-toolbox works alongside sw-precache and provides runtime caching strategies for dynamic content. While sw-toolbox offers some of the runtime caching capabilities found in Workbox, Workbox integrates these features into a more comprehensive toolset, offering a broader range of strategies and utilities.

README

This module's documentation can be found at https://developer.chrome.com/docs/workbox/modules/workbox-build