Help centre

Answer

What is the difference between cache-first and network-first caching?

Short answer

Cache-first checks the cache first and only goes to the network if there is no cached match — best for static assets like fonts and logos that rarely change. Network-first always tries the network first and falls back to the cache only if the request fails — best for content that should be as fresh as possible, like an API response, while still working offline.

By InstantPWA engineering·Reviewed July 25, 2026

When to use cache-first

Versioned, immutable static assets (hashed JS/CSS bundles, icons, fonts) where staleness is never a concern once cached.

When to use network-first

API responses, article content, or anything users expect to be current — the network is tried first with a timeout, and only offline users see the cached copy.

Stale-while-revalidate

A third common strategy returns the cached response immediately for speed, then fetches a fresh copy in the background to update the cache for next time.

Related
What is Workbox?
Workbox is a collection of open-source JavaScript libraries, maintained by Google, that wraps common service-worker patterns — precaching, runtime caching strategies, background sync, expiration — behind a simple API, so developers do not have to hand-write low-level Cache Storage and fetch-event logic.
Do PWAs work offline?
PWAs can work offline, but only for content their service worker has explicitly cached. Registering a service worker does not automatically make a site offline-capable — you decide what to cache (app shell, API responses, images) and what strategy to use (cache-first, network-first, stale-while-revalidate).
What is the Background Sync API?
The Background Sync API lets a service worker register a task that the browser retries automatically once the device is back online, even if the user has closed the tab. It is commonly used so a form submission or message made while offline is not lost — it queues, then fires the moment connectivity returns.
What is Periodic Background Sync?
Periodic Background Sync lets an installed PWA periodically wake its service worker to refresh cached content — for example, prefetching news articles — even when the app is not open. It requires the periodic-background-sync permission, is only available on installed PWAs, and Chromium decides the actual interval based on site engagement, not the requested minimum.
What is the App Badging API?
The Badging API lets an installed PWA set a small numeric badge (or a plain dot) on its home-screen or taskbar icon, mirroring the unread-count badges native apps show. Call navigator.setAppBadge(count) to set it and navigator.clearAppBadge() to remove it — no argument shows a plain dot.