Definition

Runtime caching

Short definition

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.

Reviewed August 1, 2026

A typical runtime-cached fetch handler matches by URL pattern, e.g. if (event.request.url.includes("/api/products/")) { event.respondWith(networkFirstFor(event.request)); }, applying a specific strategy only to that subset of traffic rather than globally.

Because runtime caches grow unpredictably (every unique product page, every unique avatar), they need an eviction policy — Workbox's workbox-expiration plugin supports both maxEntries and maxAgeSeconds limits per cache to keep storage bounded.

Runtime caching and precaching are complementary in most production configurations: the app shell is precached at install for guaranteed offline boot, while API responses and media are handled with runtime rules tuned per content type.

Google's Workbox routing model (workbox.routing.registerRoute) is the standard way to declare these per-URL runtime rules without hand-writing a large if/else chain inside a single fetch listener.

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.

Stale-while-revalidate

Stale-while-revalidate is a fetch-handling strategy that serves whatever is already in Cache Storage without waiting on the network, then kicks off a background fetch to refresh that cache entry for the next request. It gives cache-first speed with eventual freshness, at the cost of occasionally showing content that is one request-cycle out of date.

Workbox

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.

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.