Definition

Workbox

Short definition

Workbox is a collection of JavaScript libraries and build tools (workbox-precaching, workbox-routing, workbox-strategies, workbox-expiration, and more) maintained by the Chrome team that implement the recurring service worker patterns — precache manifests, route matching, cache-first/network-first/stale-while-revalidate strategies — so teams do not hand-roll them from scratch.

Reviewed August 1, 2026

A minimal service worker using Workbox looks like: importScripts("https://storage.googleapis.com/workbox-cdn/releases/7.0.0/workbox-sw.js"); workbox.precaching.precacheAndRoute(self.__WB_MANIFEST); workbox.routing.registerRoute(({request}) => request.destination === "image", new workbox.strategies.StaleWhileRevalidate());.

The __WB_MANIFEST placeholder is replaced at build time by workbox-webpack-plugin, workbox-build or the Vite PWA plugin with the actual list of hashed asset URLs to precache, keeping the precache list in sync with the real build output automatically.

Workbox does not remove the need to understand the underlying service worker lifecycle — install, activate, skipWaiting, clients.claim are all still relevant — it simply reduces boilerplate for the caching layer itself.

Full documentation and API reference are maintained at https://developer.chrome.com/docs/workbox.

Related terms

Precaching

Precaching means fetching and storing a known list of build-time assets (HTML shell, CSS, JS bundles, key icons) in Cache Storage inside the install event handler, so they are guaranteed to be available offline from the very first load rather than being cached only after a user happens to request them.

Runtime caching

Runtime caching means storing a response in Cache Storage the first time a matching request is actually made by the user, inside the fetch event handler, as opposed to precaching, which loads a known asset list upfront during install. It is the natural fit for content whose full URL set is not known ahead of time, such as user-generated images or paginated API results.

Cache-first strategy

Cache-first is a fetch-handling strategy: event.respondWith(caches.match(event.request).then((cached) => cached ?? fetch(event.request))). It serves cached content instantly and skips the network entirely when a match exists, making it ideal for versioned, immutable assets such as hashed JS/CSS bundles or app-shell icons that never change once deployed.

Push API

The Push API lets a service worker subscribe to a browser-run push service and receive encrypted messages from a server at any time, including when no tab or window for the site is open. Subscribing is done with registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey }), and incoming messages arrive in the worker's push event.

VAPID

VAPID (Voluntary Application Server Identification) is a key-pair scheme, standardised in RFC 8292, where a server generates one ECDSA P-256 key pair, keeps the private key secret, and shares the public key with browsers via the applicationServerKey option when subscribing. It lets push services verify which application server is sending a given message without requiring a proprietary developer account per browser vendor.

PushSubscription

A PushSubscription is the object returned by pushManager.subscribe(), containing an endpoint (a unique, vendor-hosted URL that identifies this specific device/browser installation) and a keys object with p256dh and auth values used to encrypt messages sent to it. Your server stores this per user and sends future notifications by POSTing an encrypted payload to subscription.endpoint.