workbox-precaching

Precaching static resources

This feature allows you to specify a list of URLs with an associated revision detail to be precached when the service worker is installed. The revision helps in cache busting when the content of the files changes.

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '1234567890'},
  {url: '/styles/main.css', revision: '1234567890'},
  {url: '/scripts/main.js', revision: '1234567890'}
]);

Integrating with a build process

This feature is used to integrate Workbox with your build process using workbox-build. It allows you to generate a service worker file that will precache the specified resources.

import { injectManifest } from 'workbox-build';

injectManifest({
  swSrc: 'src/sw.js',
  swDest: 'build/sw.js',
  globDirectory: 'build',
  globPatterns: ['**\/*.{html,js,css}'],
  maximumFileSizeToCacheInBytes: 4 * 1024 * 1024, // 4MB
}).then(({count, size, warnings}) => {
  // Optionally, log any warnings and details.
  console.log('Generated new service worker with', count, 'precached files, totaling', size, 'bytes.');
});

Updating precached assets

This code shows how you can manually add or update assets in the precache during the service worker's install event. This can be useful for custom handling of updates to precached assets.

self.addEventListener('install', (event) => {
  const urls = ['/index.html', '/styles/main.css'];
  const cacheName = workbox.core.cacheNames.precache;
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(urls)));
});