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

workbox-build

A module that integrates into your build process, helping you generate a manifest of local files that workbox-sw should precache. It can also scaffold a full service worker implementation for you.

While you can use this module directly, there are both command-line and Webpack wrappers.

Installation

npm install --save-dev workbox-build

Documentation

Read more at this module's documentation page.

Sample Code and Examples

View the sample code to see this module put to use.

What's Workbox?

This module is a part of Workbox, which is a collection of JavaScript libraries for Progressive Web Apps.

Visit https://workboxjs.org/ to learn more about what Workbox can do for you.