🏃‍♂️ Background Fetch API

Back

What is Background Fetch?

The Background Fetch API lets you download large files even if the user navigates away or closes the tab. Unlike fetch(), it continues in the background.

Use cases: Downloading movies, podcasts, large datasets, game assets, etc.

Live Demo

Status: Idle

Fetches local files (including a 5 MB dummy file) to simulate a larger download.

Event Log

🔧 DevTools: Inspecting Background Fetch

  1. Open DevTools → Application → Background services → Background Fetch
  2. Click the record button (⏺) to start recording
  3. Click "Start Background Fetch" — watch events appear in DevTools!

⚠️ "Offline" in DevTools Won't Stop This!

The DevTools Network → Offline checkbox only emulates offline for the page's own requests (fetch(), XMLHttpRequest, etc.). Background Fetch is handled by the browser process itself, so it bypasses DevTools network emulation entirely.

To test a failed background fetch, disconnect your actual network (disable Wi-Fi / unplug Ethernet). This is by design — it's what makes Background Fetch resilient!

📝 Practice Exercises (separate scenarios!)

  1. Observe: Start recording → click "Start Background Fetch" → watch events in DevTools
  2. Abort: Start a new fetch → click "Abort" → see the abort event (fetch is now cancelled!)
  3. Navigate away: Start a new fetch (don't abort!) → go to another page → come back → check the status message at the top

⚠️ Important: Abort and navigate-away are separate experiments. If you abort, the fetch is permanently cancelled — it will NOT continue.