Frontend

Shared Concepts Study Portal

Cross-cutting frontend patterns and practices
Flash Cards Practice
Frontend / Shared Concepts / Index / Quick recall Q&A

Index · Quick recall Q&A

2 min read
Mid-level3 min read
Rapid overview

Quick recall Q&A

Q: What's the difference between Service Workers and Web Workers? A: Service Workers run independently of web pages, persist across sessions, can intercept network requests, and enable offline functionality. Web Workers are tied to the page that created them and are used for CPU-intensive tasks. Service Workers act as network proxies; Web Workers are for parallel computation.
Q: Can Service Workers access the DOM? A: No, Service Workers run in a separate thread and cannot access the DOM directly. They communicate with pages using postMessage(). Use clients API to send messages to controlled pages.
Q: How do you debug Service Workers? A: Use Chrome DevTools → Application → Service Workers. You can inspect, unregister, update, and see network requests. Use chrome://serviceworker-internals/ for advanced debugging.
Q: What happens when multiple tabs are open? A: A single Service Worker instance controls all tabs within its scope. Use clients.matchAll() to communicate with all controlled pages. Use BroadcastChannel API for cross-tab communication.
Q: How do you handle versioning and updates? A: Use versioned cache names (v1, v2), implement skipWaiting() carefully, notify users of updates, and clean up old caches in the activate event. Consider user experience when forcing updates.
Q: What's the maximum cache size? A: It varies by browser (Chrome ~6% of free disk space, Firefox ~10%, Safari ~50MB). Use Storage API to estimate quota: navigator.storage.estimate(). Implement cache eviction strategies for large apps.
Q: How do Service Workers affect performance? A: They can significantly improve performance through caching but add overhead for installation and cache management. Measure with Lighthouse. Use appropriate caching strategies per resource type.
Q: What are PWA installation criteria? A: Requires HTTPS, valid manifest.json, registered Service Worker with fetch handler, and at least 192x192 and 512x512 icons. Chrome also requires user engagement signals.
Q: How do you handle authentication with Service Workers? A: Pass auth tokens in request headers. Don't cache authenticated responses aggressively. Use Network First strategy for authenticated endpoints. Handle 401 responses by clearing credentials.
Q: Can Service Workers make CORS requests? A: Yes, but responses must have appropriate CORS headers. Opaque responses (no-cors) can be cached but have restrictions. Use mode: 'cors' for cross-origin requests that need reading.