← Lessons

quiz vs the machine

Platinum1760

Frontend

Service Workers

A network proxy in the browser that enables caching and offline.

6 min read · advanced · beat Platinum to climb

What it is

A Service Worker is a script the browser runs separately from the page. It sits between your app and the network as a programmable proxy, intercepting requests through the fetch event.

Lifecycle

  • Install runs once when a new worker is found, often pre caching assets.
  • Activate runs after install and is where old caches are cleaned up.
  • It then controls pages, handling their fetches until replaced.

A new worker waits until old pages close before activating, unless it calls to skip waiting.

Caching strategies

On a fetch event the worker decides where the response comes from. Cache first serves stored assets for speed. Network first prefers fresh data and falls back to cache offline. Stale while revalidate returns cache instantly and updates it in the background.

Constraints

Service Workers require HTTPS and run on a separate global scope with no DOM. Because a stale worker can serve old code, versioning and cache cleanup matter.

Key idea

A Service Worker is a background proxy with an install and activate lifecycle that intercepts fetches, enabling caching strategies and offline support over HTTPS.

Check yourself

Answer to earn rating on the learn ladder.

1. What role does a Service Worker play for network requests?

2. Which strategy returns cache immediately and updates in the background?

3. What is required to register a Service Worker?