← Lessons

quiz vs the machine

Gold1400

Frontend

The Cache API Offline

Store request response pairs to serve your app without a network.

5 min read · core · beat Gold to climb

Caching request response pairs

The Cache API stores Request and Response objects, giving service workers full control over what gets served offline. It is independent of the HTTP cache and is scriptable.

  • Caches are named buckets you open with caches open
  • cache addAll fetches and stores a list of URLs at once
  • cache match looks up a stored Response for a Request
  • You delete old caches in the activate step during updates

Common caching strategies

  • Cache first: serve from cache, fall back to network, fast and offline friendly
  • Network first: try network, fall back to cache, best for fresh data
  • Stale while revalidate: serve cache instantly, update it in the background

The fetch handler

Inside a service worker fetch event, you respond with respondWith, returning either a cached match or a live network fetch. This is where strategy decisions live.

Key idea

The Cache API stores Request and Response pairs that service workers serve via respondWith, letting you choose cache first or network first strategies for offline support.

Check yourself

Answer to earn rating on the learn ladder.

1. What does the Cache API store?

2. Which strategy serves the cached copy first then updates it in the background?

3. Where should old caches be deleted during a service worker update?