Explain Network First vs Cache First caching and when to use each

WHAT THIS TESTS: Your ability to reason about the tradeoff between freshness and availability in a service worker, and to map specific caching strategies to the correct asset types. Interviewers want to see that you understand the Cache API is a high-level JavaScript-driven cache separate from the HTTP cache, and that you know how fetch event interception enables different request handling patterns.

A GOOD ANSWER COVERS: Four things in order. First, a clear definition of Cache First as a strategy where the service worker calls Cache.match first and returns the cached response immediately if found, only falling back to fetch if there is a cache miss. Second, a scenario for Cache First such as static assets with hashed filenames or immutable images where speed matters more than freshness. Third, a clear definition of Network First as a strategy where the service worker attempts fetch first and returns the network response if successful, only falling back to the cache if the network is unreachable or slow. Fourth, a scenario for Network First such as an HTML document or a JSON API response where the user needs the latest content but still requires offline functionality.

COMMON WRONG ANSWERS: Three red flags stand out. One, conflating the Cache API with the HTTP cache and claiming that Cache-Control headers directly control the service worker cache. Two, recommending Cache First for rapidly changing data like a stock ticker or a social media feed because this guarantees stale content. Three, describing Network First for large static assets without mentioning the performance cost or the need for a timeout, since waiting for a network round trip on every request would defeat the purpose of caching.

LIKELY FOLLOW-UPS: The interviewer may ask how you would implement a timeout for Network First to avoid waiting forever on a slow connection. They might also ask about Stale While Revalidate as a hybrid alternative, or how to update the cache after a Network First fallback so that subsequent offline requests have slightly fresher content. Another common pivot is asking how you would precache assets during the install event versus runtime caching.

ONE CONCRETE EXAMPLE: Imagine a news PWA. For the article images and the compiled app.js bundle with a content hash in the filename, Cache First is appropriate because these files never change and should load instantly. For the top headlines API endpoint and the article HTML shell, Network First is better because readers want the latest stories, but if they are on a subway they should still see the morning headlines from cache rather than an error page.

Source: developer.chrome.com