workbox-precaching

What is workbox-precaching?

The workbox-precaching package is part of the Workbox suite of tools, which are designed to make it easier to build progressive web apps (PWAs) and improve offline experiences. It provides a way to precache resources during the service worker installation phase, ensuring that they are available offline and can be served instantly on repeat visits.

What are workbox-precaching's main functionalities?

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

Other packages similar to workbox-precaching

sw-precache

sw-precache is a similar tool for generating a service worker that precaches resources. It was one of the earlier tools for this purpose but is now deprecated in favor of Workbox, which offers a more modular and flexible approach.

offline-plugin

offline-plugin is a webpack plugin designed to provide offline functionality for web applications. It's similar to workbox-precaching but is specifically tied to webpack and doesn't offer the same level of modularity as Workbox.

serviceworker-webpack-plugin

serviceworker-webpack-plugin integrates with webpack and assists in generating a service worker for precaching. It's more limited in scope compared to Workbox, which provides a comprehensive set of tools for various caching strategies and other service worker features.

README

This module's documentation can be found at https://developers.google.com/web/tools/workbox/modules/workbox-precaching