workbox-build

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