JavaScript Academy · Lesson

The Cache API

Store and serve responses from cache.

The Cache API is a free JavaScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is the Cache API?

The Cache API stores request/response pairs in named caches. Service workers use it to serve assets without hitting the network, which is the foundation of offline support.

The caches Object

The global caches object (a CacheStorage) manages all your named caches. It is available in both pages and service workers.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Opening a Cache

caches.open(name) returns a Promise for a cache with that name, creating it if it does not exist. Names let you version your caches.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Pre-caching with addAll

During install, cache.addAll(urls) fetches and stores a list of assets in one call. If any fetch fails, the whole operation rejects.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) tells the browser to keep the worker alive until the promise settles. Wrap your cache setup in it so install does not finish too early.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Adding One Entry

cache.put(request, response) stores a single response, while cache.add(url) fetches and stores one URL. Use put when you already have a response to save.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Matching from Cache

cache.match(request) looks up a stored response. It resolves to the response, or undefined if there is no match.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

caches.match Shortcut

caches.match(request) searches across all caches at once, handy in a fetch handler when you do not care which cache holds the asset.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

Inside a fetch event, event.respondWith(promise) supplies the response the browser will use. Resolve it with a cached or freshly fetched Response.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Cloning Responses

A response body can be read only once. To both return a response and store it, clone it first.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Deleting Cache Entries

cache.delete(request) removes one entry; caches.delete(name) drops a whole named cache. Use these to evict stale assets.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Quick Check

Test your understanding of the Cache API.

Recap

You learned the Cache API:

caches.open(name) gets or creates a named cache.
addAll pre-caches; put/add store entries.
match retrieves; caches.match searches all caches.
respondWith supplies the response in fetch.
Clone responses before caching and returning.

Next, caching strategies.

Frequently asked questions

Is the “The Cache API” lesson free?

Yes — the full text of “The Cache API” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “The Cache API”?

Store and serve responses from cache. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The Cache API” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy