Lesson 0004 · ~12 minutes
One skill: run a 60-second design-review scan — when Cache Storage is the wrong tool, and which production edges kill “just cache everything.”
You can reject a bad caching proposal quickly (wrong store, no versioning, opaque landmine, dual-cache blindness, “durable forever”) and green-light a good one with eyes open on quota and cleanup.
You’ve been lesson-first — fine. This page is self-contained for the quiz. Highest-value later skim: Storage for the web (quota / eviction) and SW caching and HTTP caching (two layers).
| Requirement | Usually not Cache Storage | Prefer |
|---|---|---|
| Drafts, entities, offline queues | Request/Response “rows” | IndexedDB |
| Tiny theme / flag strings | Named cache ceremony | Memory / careful Web Storage |
| File editor buffers | HTTP-shaped warehouse | OPFS (or Blob-in-IDB) |
| Checkout / live balances | Stale success from cache | Network only + honest offline UX |
Lesson 1 still holds: Cache Storage wins for HTTP resources that load or speed the app — not as a general kitchen sink (web.dev).
MDN is blunt: items do not update or expire unless you replace or delete them ((Cache). Teams that open one eternal cache name ship stale shells forever.
static-v4).
activate, delete names you no longer want (Offline
Cookbook cleanup pattern — careful: names are origin-wide).
From the Cache API quick guide:
add / addAll only store
200-range successes; they reject on network failure.
0 (
opaque
) — add will not store them; only
put can.
Request order when a SW handles fetch (SW caching and HTTP caching):
A “revalidate” fetch can still be satisfied by a long
Cache-Control: max-age in the HTTP cache — so the SW never
sees the origin. Design headers and strategies together; they do not
have to share one TTL, but they must not silently cancel each other.
Cache Storage shares origin
quota with IndexedDB and
friends. Writes can reject with
QuotaExceededError — always catch and have a plan
(storage-for-the-web).
Under disk pressure, best-effort site data may be
evicted (often
least-recently-used origins first on Chromium/Firefox).
navigator.storage.estimate() — approximate usage vs
quota.
navigator.storage.persist() — request persistent storage
(not universal immortality; user can still clear site data).
Response bodies are streams. If you both put and
respondWith the same body, use
response.clone() (Offline Cookbook / Fetch). Silent
“body already used” bugs look like flaky offline.
Equal-length options. Immediate feedback.
Proposal: store offline multi-paragraph drafts as Response bodies in Cache Storage keyed by fake URLs.
Team opens static-v1, v2, v3
over deploys but never deletes old names on activate.
Third-party font via no-CORS fetch (opaque, status often
0). They insist on cache.add during
install.
SWR “always refreshes in background,” but origin never sees hits:
assets ship with year-long max-age and no busting.
Product wants a legal claim: offline shell “will never be deleted on any browser for 90 days without user action.”
add = install landmine.web.dev — Storage for the web for quota, eviction, and the spectrum defaults. Pair with SW caching and HTTP caching for dual-layer fights.