A caching strategy is a set of rules that a service worker uses to handle HTTP requests and responses. It determines whether to serve content from the cache, the network, or a combination of both, helping you control offline behavior, load speed, and data freshness.

Cache First looks for a matching response in the cache first. If found, it returns it immediately. If not, the request goes to the network, the response is cached, and then returned. It's ideal for static assets like CSS, JS, and images that don't change often.

Network First attempts to fetch the latest data from the network. If that succeeds, the response is returned and optionally cached. If the network fails (e.g., offline), it falls back to the cached version. This is great for data that needs to be fresh but still available offline.

The Stale While Revalidate strategy instantly serves the cached content (the "stale" version) to provide a fast response. Simultaneously, it fetches an updated version from the network and updates the cache for the next visit. It provides a great balance between speed and freshness.

Cache Only is used for resources that must be available offline and never change without an app update, like specific static UI parts. Network Only is for things that always require a live connection, such as analytics pings or real-time data that shouldn't be cached.

Both show cached content instantly while updating in the background. Cache Then Network (also called "Cache and Update") requires your page to listen for the network response and actively replace the cached content in the UI. Stale While Revalidate only updates the cache for the next visit, leaving the current display unchanged.

This tool uses JavaScript Promises and a mock in‑memory cache to mimic service worker behavior. No actual network requests leave your browser – everything is simulated. You can change the strategy, network speed, and cache state to see how each pattern responds, helping you learn and debug offline logic quickly.