Engrain by ByteRush

WEB.06.04 Mid-level· 12 minCore — asked often

Caching strategies and offline: cache-first, network-first and stale-while-revalidate

Choose the right service worker caching strategy for each kind of request, precache with versioned URLs, serve an offline page, use navigation preload, and avoid bugs where users get stale content forever.

Comes up in: Web fundamentals, Frontend system design

Learn#

Kavita’s recipe app works offline, but users complain it shows last week’s recipes. Her service worker used cache-first for everything, including the API, so new data never arrived.

A caching strategy decides, per request, whether to use the cache, the network, or both. There are five common ones:

StrategyHow it answersUse it for
Cache-firstCache; network only if missingVersioned files: app.4f1c.js, fonts
Network-firstNetwork; cache if offlineHTML pages, data that must be fresh
Stale-while-revalidateCache now, refresh in backgroundAvatars, menus, data that can be a bit old
Network-onlyNever cachedPayments, analytics
Cache-onlyNever the networkPrecached app shell

To precache means storing files during install. Everything cached later, as requests happen, is runtime caching.

Stale-while-revalidate for a menu APIStep 1 of 4

Cache

  • /api/menu (yesterday)

Network

    empty

    The page asks for /api/menu. The service worker looks in the cache first and finds yesterday's copy.

    Read the steps as text
    1. The page asks for /api/menu. The service worker looks in the cache first and finds yesterday's copy.
    2. It answers at once with the cached copy, so the menu appears instantly, even offline.
    3. At the same time it fetches a fresh copy from the network, kept alive with event.waitUntil.
    4. The fresh copy replaces the cached one. The next visit shows today's menu.

    Predict#

    Predict first

    You serve /app.js cache-first, and the file name never changes between deploys. What do returning users get after a deploy?

    Interview angle#

    Say it like this — about 30 seconds

    “Cache-first returns the cached copy and goes to the network only if it is missing; it is fast and works offline, but it is only safe for versioned URLs. Network-first tries the network and falls back to the cache when offline; I use it for HTML and fresh data. Stale-while-revalidate answers from the cache at once and refreshes it in the background, which suits data that can be slightly old. I also precache with revisioned URLs and clean old caches on activate.”

    Stays on your device. Nothing is uploaded.
    Follow-up Compare cache-first, network-first and stale-while-revalidate.
    Cache-first: fastest, can go stale. Network-first: freshest, slow on bad networks. SWR: fast now, fresh next time.
    Follow-up What is navigation preload?
    It starts the page’s network request in parallel while the service worker boots, so network-first HTML is not delayed by worker startup.
    Follow-up How do you show an offline page?
    Precache /offline.html, and when a navigation request fails and has no cached copy, respond with it.

    Practice#

    On your own

    Implement stale-while-revalidate and network-first with injected cache, fetch and waitUntil, so the tests run without a browser.

    Done when

    • SWR returns the cached copy at once and refreshes the cache in the background.
    • SWR with nothing cached returns the network response and caches it; a failed refresh does not throw.
    • Network-first prefers the network, falls back to the cache, and rethrows when both fail.
    Your solution
    Ctrl/⌘ + Enter

    Remember#

    Try to answer each card before you open it. Then add them to your reviews.

    When is cache-first safe?

    For versioned URLs whose names change when content changes.

    How does stale-while-revalidate answer?

    From the cache at once, while refreshing the cache in the background.

    Which strategy suits HTML pages?

    Network-first, with a cached or offline fallback.

    What does navigation preload do?

    Starts the navigation request while the service worker is still starting.

    Go deeper

    Four layers. Stop at the one your interview needs; each ends with a quick check.

    The core ideaEvery round

    Name caches with a version, such as static-v3, and delete other versions in the activate event. Precache lists should include a revision hash per file, which tools such as Workbox generate at build time.

    Check yourself: Why name caches with a version, such as static-v3?

    So activate can delete old caches by name.

    How it works underneathSenior rounds

    A service worker can be stopped as soon as it answers. event.waitUntil(promise) keeps it alive until the background refresh finishes .

    Check yourself: Why must SWR's refresh use event.waitUntil?

    Otherwise the browser may stop the worker before the refresh finishes.

    Edge cases and trapsWhere people slip
    Navigation preload: Chrome 59, Firefox 99, Safari 15.4. Read the result from event.preloadResponse.
    Background Sync, which retries a failed POST when the connection returns, is Chromium only, so keep a fallback such as retrying on the next page load.
    Check yourself: Which browsers support Background Sync?

    Only Chromium-based browsers.

    In productionStaff-level answers
    Precache an /offline.html and serve it when a navigation fails.
    Stale-forever bugs come from cache-first on unversioned URLs and caches never cleaned. Never cache-first your HTML .
    Check yourself: What two things prevent stale-forever bugs?

    Versioned URLs for cache-first files, and deleting old caches on activate.

    Finished the five steps? Mark it, and its cards join your reviews.

    Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

    Interview questions this answers

    • Compare cache-first, network-first and stale-while-revalidate.