Reference

Open, put & match

Compressed API map for named caches. Pair with Lesson 2.

Lesson 2 Glossary Resources

Feature detect & open

const ok = "caches" in self; // window, worker, or SW

const cache = await caches.open("static-v1");
// creates the named cache if missing; returns Cache

Directory ops (caches / CacheStorage)

Call Does
caches.open(name) Open or create one named cache
caches.keys() List all cache names for this origin
caches.has(name) Whether that name exists
caches.delete(name) Delete whole named cache → true/false
caches.match(req) First match across all named caches

Write: add vs addAll vs put

Method Args Behavior
add Request or URL string Fetches, stores if status is in the 200 range; rejects on failure / non-OK. No-CORS cross-origin (status 0) will not store via add.
addAll Array of Request/URL Like many adds; rejects if any fail
put Request/URL + Response Stores the given Response (network or synthetic). More permissive: non-200 and non-CORS/opaque can be stored. Overwrites matching entry. 
const cache = await caches.open("static-v1");

await cache.add("/app.js");
await cache.addAll(["/app.css", "/index.html"]);

const res = await fetch("/app.js");
await cache.put("/app.js", res); // or res.clone() if you also return res

await cache.put(
  "/offline.json",
  new Response(JSON.stringify({ ok: true }), {
    headers: { "Content-Type": "application/json" },
  })
);

Read: match / matchAll

const hit = await cache.match("/app.js");
// Response | undefined

const hitAny = await caches.match("/app.js"); // search all names

// Matching is not “URL string only”
// Differ by: query string, HTTP method, Vary-related headers
const loose = await cache.match(req, {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true,
});

const all = await cache.matchAll(req, { ignoreSearch: true });

Delete entry vs delete cache

await cache.delete("/app.js");
await cache.delete(req, { ignoreSearch: true });

await caches.delete("static-v0"); // whole named cache

List entries in a cache

const requests = await cache.keys(); // Request objects
for (const request of requests) {
  const response = await cache.match(request);
}
Design notes