78:T976,// service-worker.js const CACHE_NAME = 'my-app-v2'; const STATIC_ASSETS = [ '/', '/styles/main.css', '/scripts/app.js', '/images/logo.png' ]; // Install: Pre-cache static assets self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(STATIC_ASSETS)) .then(() => self.skipWaiting()) ); }); // Activate: Clean up old caches self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(names => Promise.all( names .filter(name => name !== CACHE_NAME) .map(name => caches.delete(name)) ) ).then(() => self.clients.claim()) ); }); // Fetch: Implement caching strategies self.addEventListener('fetch', event => { const { request } = event; const url = new URL(request.url); // Strategy 1: Cache-first for static assets if (request.destination === 'image' || request.destination === 'font' || url.pathname.match(/\.(css|js)$/)) { event.respondWith(cacheFirst(request)); return; } // Strategy 2: Network-first for API calls if (url.pathname.startsWith('/api/')) { event.respondWith(networkFirst(request)); return; } // Strategy 3: Stale-while-revalidate for HTML pages event.respondWith(staleWhileRevalidate(request)); }); // Cache-first strategy async function cacheFirst(request) { const cached = await caches.match(request); if (cached) return cached; const response = await fetch(request); if (response.ok) { const cache = await caches.open(CACHE_NAME); cache.put(request, response.clone()); } return response; } // Network-first strategy async function networkFirst(request) { try { const response = await fetch(request); if (response.ok) { const cache = await caches.open(CACHE_NAME); cache.put(request, response.clone()); } return response; } catch (error) { const cached = await caches.match(request); if (cached) return cached; throw error; } } // Stale-while-revalidate strategy async function staleWhileRevalidate(request) { const cached = await caches.match(request); const fetchPromise = fetch(request).then(response => { if (response.ok) { const cache = caches.open(CACHE_NAME); cache.then(c => c.put(request, response.clone())); } return response; }); return cached || fetchPromise; }79:Tea8,// IndexedDB wrapper for caching structured data class CacheDB { constructor(dbName = 'app-cache', version = 1) { this.dbName = dbName; this.version = version; this.db = null; } async open() { return new Promise((resolve, reject) => { const request = indexedDB.open(this.dbName, this.version); request.onerror = () => reject(request.error); request.onsuccess = () => { this.db = request.result; resolve(this.db); }; request.onupgradeneeded = (event) => { const db = event.target.result; // Create object stores with indexes if (!db.objectStoreNames.contains('dataCache')) { const store = db.createObjectStore('dataCache', { keyPath: 'key' }); store.createIndex('timestamp', 'timestamp'); store.createIndex('category', 'category'); } }; }); } async set(key, value, category = 'default', ttlSeconds = 3600) { const db = this.db || await this.open(); return new Promise((resolve, reject) => { const transaction = db.transaction(['dataCache'], 'readwrite'); const store = transaction.objectStore('dataCache'); const entry = { key, value, category, timestamp: Date.now(), expires: Date.now() + (ttlSeconds * 1000) }; const request = store.put(entry); request.onsuccess = () => resolve(true); request.onerror = () => reject(request.error); }); } async get(key) { const db = this.db || await this.open(); return new Promise((resolve, reject) => { const transaction = db.transaction(['dataCache'], 'readonly'); const store = transaction.objectStore('dataCache'); const request = store.get(key); request.onsuccess = () => { const entry = request.result; // Check expiration if (!entry) { resolve(null); } else if (entry.expires < Date.now()) { this.delete(key); // Clean up expired entry resolve(null); } else { resolve(entry.value); } }; request.onerror = () => reject(request.error); }); } async delete(key) { const db = this.db || await this.open(); return new Promise((resolve, reject) => { const transaction = db.transaction(['dataCache'], 'readwrite'); const store = transaction.objectStore('dataCache'); const request = store.delete(key); request.onsuccess = () => resolve(true); request.onerror = () => reject(request.error); }); } async clearExpired() { const db = this.db || await this.open(); const now = Date.now(); return new Promise((resolve, reject) => { const transaction = db.transaction(['dataCache'], 'readwrite'); const store = transaction.objectStore('dataCache'); const index = store.index('timestamp'); const request = index.openCursor(); let deleted = 0; request.onsuccess = (event) => { const cursor = event.target.result; if (cursor) { if (cursor.value.expires < now) { cursor.delete(); deleted++; } cursor.continue(); } else { resolve(deleted); } }; request.onerror = () => reject(request.error); }); } } // Usage example const cache = new CacheDB(); // Cache user profile for 1 hour await cache.set('user:12345', { name: 'John Doe', preferences: { theme: 'dark' } }, 'users', 3600); // Retrieve from cache const profile = await cache.get('user:12345'); // Periodic cleanup of expired entries setInterval(() => cache.clearExpired(), 60000);7a:T731,# Comprehensive browser caching configuration server { listen 443 ssl http2; server_name example.com; # Versioned static assets - cache forever location ~* \.(?:css|js)$ { # Files like: styles.a7b3c9f.css, bundle.8d4e2a1.js if ($uri ~* "\.[a-f0-9]{8}\.(css|js)$") { add_header Cache-Control "public, max-age=31536000, immutable"; break; } # Unversioned files - shorter cache with revalidation add_header Cache-Control "public, max-age=86400, stale-while-revalidate=604800"; } # Images - long cache for versioned, medium for others location ~* \.(?:jpg|jpeg|png|gif|webp|avif|svg|ico)$ { if ($uri ~* "\.[a-f0-9]{8}\.") { add_header Cache-Control "public, max-age=31536000, immutable"; break; } add_header Cache-Control "public, max-age=604800, stale-while-revalidate=2592000"; } # Fonts - long cache location ~* \.(?:woff|woff2|ttf|otf|eot)$ { add_header Cache-Control "public, max-age=31536000"; add_header Access-Control-Allow-Origin "*"; } # HTML pages - always revalidate location ~* \.html$ { add_header Cache-Control "no-cache"; add_header ETag $upstream_http_etag; } # Root document location = / { add_header Cache-Control "no-cache"; } # API proxy - private caching for authenticated endpoints location /api/ { proxy_pass http://api_backend; # Let application set Cache-Control proxy_hide_header Cache-Control; add_header Cache-Control $sent_http_cache_control; # Add validation headers if not present add_header ETag $upstream_http_etag; add_header Last-Modified $upstream_http_last_modified; } }7b:T5ce,// webpack.config.js - Content hash configuration module.exports = { output: { filename: '[name].[contenthash].js', chunkFilename: '[name].[contenthash].chunk.js', assetModuleFilename: 'assets/[hash][ext]', clean: true, // Clean output directory on each build }, optimization: { moduleIds: 'deterministic', // Stable module IDs across builds runtimeChunk: 'single', // Separate runtime for better caching splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all', // Vendor bundle only changes when dependencies update }, }, }, }, plugins: [ // Generate manifest mapping logical names to hashed filenames new WebpackManifestPlugin({ fileName: 'asset-manifest.json', publicPath: '/', generate: (seed, files, entrypoints) => { const manifest = {}; for (const file of files) { manifest[file.name] = file.path; } return manifest; }, }), ], }; /* Generated asset-manifest.json: { "main.js": "/main.a7b3c9d.js", "main.css": "/main.8f2e1b4.css", "vendors.js": "/vendors.c3d4e5f.js", "runtime.js": "/runtime.1a2b3c4.js" } HTML template uses manifest to reference correct files: */7c:T7d4,// Console commands for cache debugging // Check what's in Cache Storage async function inspectCacheStorage() { const cacheNames = await caches.keys(); console.log('Available caches:', cacheNames); for (const name of cacheNames) { const cache = await caches.open(name); const keys = await cache.keys(); console.log(` 📦 Cache "${name}" (${keys.length} entries):`); for (const request of keys.slice(0, 10)) { // First 10 const response = await cache.match(request); console.log(` ${request.url} → ${response.status}`); } if (keys.length > 10) { console.log(` ... and ${keys.length - 10} more`); } } } // Check storage quota async function checkStorageQuota() { if ('storage' in navigator && 'estimate' in navigator.storage) { const estimate = await navigator.storage.estimate(); console.log(`Storage quota: ${(estimate.quota / 1024 / 1024).toFixed(2)} MB`); console.log(`Storage used: ${(estimate.usage / 1024 / 1024).toFixed(2)} MB`); console.log(`Available: ${((estimate.quota - estimate.usage) / 1024 / 1024).toFixed(2)} MB`); } } // Force clear all caches async function clearAllCaches() { const cacheNames = await caches.keys(); await Promise.all(cacheNames.map(name => caches.delete(name))); console.log(`Cleared ${cacheNames.length} caches`); } // Check Service Worker status function checkServiceWorker() { if ('serviceWorker' in navigator) { navigator.serviceWorker.getRegistrations().then(registrations => { console.log('Service Worker registrations:', registrations.length); registrations.forEach(reg => { console.log(` Scope: ${reg.scope}`); console.log(` Active: ${reg.active?.state}`); console.log(` Waiting: ${reg.waiting?.state}`); }); }); } } // Run all diagnostics async function cacheDiagnostics() { console.log('=== Cache Diagnostics ==='); await checkStorageQuota(); await inspectCacheStorage(); checkServiceWorker(); }70:{"json":{"id":"seed_f438d55c8070bea25c3cb9d1173056a6","slug":"caching-layers","category":"System Design (HLD)","topic":"Caching Strategies","title":"Caching Layers","description":"Master the multi-tiered caching architecture from browser to database. Learn how to strategically place caches at every layer of the stack—client-side, CDN, application, query, and distributed—to achieve dramatic performance improvements while managing complexity and consistency.","difficulty":"INTERMEDIATE","estimatedMinutes":90,"pages":[{"id":"seed_701eb57cb54c97c446f331081ed2de9c","title":"Client-Side Caching (Browser)","order":0,"content":[{"id":"opening-context","title":"The First Line of Defense","content":[{"data":{"content":"In the multi-layered caching architecture of modern web applications, the **browser cache represents the most impactful optimization opportunity**. Every cache hit at the browser level eliminates network latency entirely—no DNS lookup, no TCP handshake, no TLS negotiation, no server processing, no data transfer. For static assets loaded on every page view, browser caching can reduce effective load times from seconds to milliseconds.\n\nYet browser caching is often misunderstood, misconfigured, or ignored entirely. Engineers frequently treat it as an afterthought, resulting in either aggressive caching that serves stale content or conservative settings that defeat the purpose. Mastering browser caching requires understanding both the underlying HTTP protocol mechanisms and the strategic considerations that guide their application."},"type":"text"},{"data":{"icon":"Target","title":"What You Will Learn","content":"This page covers the complete landscape of client-side caching: HTTP cache directives and their precise semantics, cache storage mechanisms including the Cache API and IndexedDB, Service Workers as programmable cache controllers, and strategic frameworks for deciding what to cache, for how long, and how to handle invalidation. By the end, you'll be able to design browser caching strategies that dramatically improve performance while maintaining content freshness.","variant":"info"},"type":"callout"}]},{"id":"understanding-browser-cache","title":"Understanding the Browser Cache","content":[{"data":{"content":"The browser cache is a local storage mechanism that stores HTTP responses keyed by their request URL. When a browser needs a resource, it first checks the cache before making a network request. This simple concept masks considerable complexity in cache behavior, validation, and eviction.\n\n**The Cache Lookup Process:**\n\nWhen a browser encounters a resource request (whether from HTML parsing, JavaScript execution, or user navigation), it follows a well-defined process:\n\n1. **Construct the cache key** — Typically the full URL including query parameters\n2. **Check for a cached response** — Look up the key in the local cache store\n3. **Evaluate freshness** — If found, determine whether the cached response is still valid\n4. **Serve or revalidate** — Either serve directly from cache or validate with the origin server\n5. **Store new responses** — If a network request is made, potentially cache the response"},"type":"text"},{"data":{"rows":[["Fresh cache hit","Serve from disk/memory cache","No","Instantaneous load (<10ms)"],["Stale with validation","Conditional request to server","Yes (small)","Fast if 304 Not Modified"],["Stale without etag/last-modified","Full request to server","Yes (full)","Normal load time"],["No-cache directive","Always validate before serving","Yes (small)","Slight delay for validation"],["No-store directive","Never cache this response","Yes (full)","Full load time every time"]],"caption":"Browser Cache Behavior Based on Response Headers","headers":["Scenario","Cache Behavior","Network Request?","User Perception"]},"type":"table"},{"data":{"content":"**Memory Cache vs. Disk Cache:**\n\nModern browsers maintain two-tier caching:\n\n- **Memory cache** — Extremely fast access (< 1ms), limited capacity, cleared on browser close. Used for resources likely to be needed again soon during the same session.\n\n- **Disk cache** — Slower access (5-20ms), much larger capacity, persists across sessions. Used for resources with longer lifetimes.\n\nBrowsers automatically manage allocation between these tiers based on resource size, access frequency, and available space. You cannot directly control this allocation, but you can influence it through cache headers."},"type":"text"},{"data":{"icon":"Info","title":"Cache Key Considerations","content":"The cache key is critically important. By default, it's the full URL including query parameters. This is why cache-busting techniques add version parameters (?v=1.2.3) or hash-based filenames (bundle.a7b3c9d.js). Vary headers can modify the cache key to account for different representations (e.g., Accept-Encoding, Accept-Language).","variant":"note"},"type":"callout"}],"titleType":"number","titleNumber":1},{"id":"http-cache-control","title":"HTTP Cache-Control Directives","content":[{"data":{"content":"The `Cache-Control` HTTP header is the primary mechanism for controlling browser caching behavior. It supersedes the older `Expires` header and provides fine-grained control over how responses are cached, for how long, and under what conditions they can be used.\n\n**Understanding the Directive Categories:**\n\nCache-Control directives fall into several functional categories:\n\n1. **Cacheability** — Whether a response can be cached at all\n2. **Expiration** — How long a cached response remains fresh\n3. **Revalidation** — When and how stale responses must be revalidated\n4. **Other directives** — Special behaviors for specific scenarios"},"type":"text"},{"data":{"rows":[["public","Cacheability","Response can be cached by any cache (browser, CDN, proxy)","Static assets, public API responses"],["private","Cacheability","Response can only be cached by browser, not shared caches","Personalized content, authenticated responses"],["no-cache","Revalidation","Cache can store but must revalidate before each use","Always-fresh content (HTML pages)"],["no-store","Cacheability","Never store this response anywhere","Sensitive data, credit card forms"],["max-age=N","Expiration","Response is fresh for N seconds from request time","Static assets with known update frequency"],["s-maxage=N","Expiration","Override max-age for shared caches (CDN/proxy)","Different browser vs CDN expiration"],["must-revalidate","Revalidation","Once stale, must revalidate—cannot use stale copy","Critical data that must never be stale"],["stale-while-revalidate=N","Revalidation","Can serve stale for N seconds while revalidating in background","Non-critical content where freshness can lag"],["stale-if-error=N","Revalidation","Can serve stale for N seconds if revalidation fails","Graceful degradation during outages"],["immutable","Expiration","Response will never change—skip revalidation even on refresh","Versioned static assets (hash in filename)"]],"caption":"Cache-Control Directive Reference","headers":["Directive","Category","Meaning","Common Use Case"]},"type":"table"},{"data":{"code":"# Static asset with content-hash in filename - cache forever\nCache-Control: public, max-age=31536000, immutable\n\n# HTML page that should always be fresh\nCache-Control: no-cache\n\n# Authenticated API response - browser-only caching for 5 minutes\nCache-Control: private, max-age=300\n\n# Public API that can lag slightly - serve stale while fetching fresh\nCache-Control: public, max-age=60, stale-while-revalidate=300\n\n# Sensitive data that should never be stored\nCache-Control: no-store\n\n# CDN caches for 1 hour, browsers cache for 5 minutes\nCache-Control: public, max-age=300, s-maxage=3600\n\n# Critical data - must revalidate when stale, allow stale during errors\nCache-Control: max-age=300, must-revalidate, stale-if-error=86400","fileName":"Cache-Control Header Examples","language":"http"},"type":"code"},{"data":{"icon":"AlertCircle","title":"Common Misconception: no-cache vs no-store","content":"Despite the name, 'no-cache' does NOT mean 'don't cache.' It means 'cache but revalidate before every use.' If you truly want to prevent caching entirely, use 'no-store.' This is one of the most common caching mistakes in production systems.","variant":"warning"},"type":"callout"}],"titleType":"number","titleNumber":2},{"id":"validation-conditional-requests","title":"Validation and Conditional Requests","content":[{"data":{"content":"When a cached response becomes stale or the `no-cache` directive is present, browsers perform **conditional requests** to check whether the cached version is still valid. This validation mechanism is crucial for balancing freshness with efficiency—if the content hasn't changed, the server can respond with a lightweight `304 Not Modified` instead of retransmitting the entire resource.\n\n**Two Validation Mechanisms:**\n\nHTTP provides two complementary approaches for cache validation:"},"type":"text"},{"data":{"left":[{"data":{"items":["**Server provides ETag** — An opaque identifier for the specific version of a resource","**Browser stores ETag** — Cached alongside the response body","**Conditional request** — Browser sends `If-None-Match: ` header","**Server comparison** — Compares provided ETag with current resource version","**Response** — 304 if match (use cache), 200 with new content if changed"],"title":{"icon":"Hash","text":"ETag Validation","type":"icon","color":"primary","variant":"outline-circle"},"variant":"glass"},"type":"list"}],"right":[{"data":{"items":["**Server provides Last-Modified** — Timestamp of last resource change","**Browser stores timestamp** — Cached alongside the response","**Conditional request** — Browser sends `If-Modified-Since: ` header","**Server comparison** — Checks if resource changed after provided date","**Response** — 304 if unchanged, 200 with new content if modified"],"title":{"icon":"Clock","text":"Last-Modified Validation","type":"icon","color":"secondary","variant":"outline-circle"},"variant":"glass"},"type":"list"}]},"type":"two-column"},{"data":{"code":"# Initial Response from Server\nHTTP/1.1 200 OK\nContent-Type: application/javascript\nCache-Control: max-age=300\nETag: \"abc123def456\"\nLast-Modified: Wed, 15 Jan 2025 10:30:00 GMT\n\n

Distributed Caching

Distributed Caching