Background Fetch support

Background Fetch hands a long-running download (or upload) off to the browser itself: the browser performs the fetch in a user-visible way, showing progress and a cancel option, and wakes the service worker once the operation completes.

Browser & ecosystem support

• Legend
• Yes
• Partial
• Flag
• No
• Unknown

Browser / Platform	Support	Versions	Confidence	Source	Notes
Chrome (Desktop)	Yes	74	high	source	—
Chrome (Android)	Yes	74	high	source	1
Edge (Desktop)	Yes	79	high	source	2
Firefox (Desktop)	No	—	high	source	3
Firefox (Android)	No	—	high	source	45
Safari (macOS)	No	—	high	source	6
Safari (iOS)	No	—	high	source	78
Samsung Internet	Yes	11.0	high	source	9
WebView (Android)	No	—	high	source	10

1. Derived by browser-compat-data mirroring from Chrome.
2. Derived by browser-compat-data mirroring from Chrome.
3. No Firefox support is recorded in browser-compat-data.
4. No Firefox for Android support is recorded in browser-compat-data.
5. Derived by browser-compat-data mirroring from Firefox.
6. No Safari support is recorded in browser-compat-data.
7. No Safari on iOS support is recorded in browser-compat-data.
8. Derived by browser-compat-data mirroring from Safari.
9. Derived by browser-compat-data mirroring from Chrome Android.
10. No WebView Android support is recorded in browser-compat-data.

Source data: /compatibility/background-fetch.json · Global usage: 72 % (StatCounter 2026-05)

Source: spec · MDN · Last verified 2026-10-03 · Confidence: high (computed from sources)

How to use it

Feature-detect, then call fetch() on the service worker registration’s backgroundFetch manager:

async function startBackgroundFetch(urls) {
  const registration = await navigator.serviceWorker.ready;
  return registration.backgroundFetch.fetch('my-fetch', urls, {
    title: 'Episode 5',
    downloadTotal: 60 * 1024 * 1024,
  });
}

Handle the settlement events in the service worker:

self.addEventListener('backgroundfetchsuccess', (event) => {
  event.waitUntil(handleCompletedFetch(event.registration));
});
self.addEventListener('backgroundfetchfail', (event) => {
  event.waitUntil(cleanUpFailedFetch(event.registration));
});

How to detect it at runtime

Check for BackgroundFetchManager before calling fetch(). When it is absent, download each file with a regular fetch() call instead:

async function downloadFiles(urls) {
  if (!('BackgroundFetchManager' in self)) {
    for (const url of urls) {
      const response = await fetch(url);
      await handleResponse(response);
    }
    return;
  }
  const registration = await navigator.serviceWorker.ready;
  await registration.backgroundFetch.fetch('my-fetch', urls, {
    title: 'Files',
    downloadTotal: 0,
  });
}

Practical checklist

• Firefox and Safari do not implement this API — per the table above, support is Chromium-only, so always branch to a regular-fetch() fallback rather than assuming availability.
• Group files that belong together (e.g. media plus artwork) into a single fetch() call so they appear as one user-visible download.
• Handle backgroundfetchsuccess and backgroundfetchfail in the service worker to process or clean up after the download; handle backgroundfetchclick to route the user back to a relevant screen.
• Reserve Background Fetch for large, long-running downloads — it is not a substitute for short tasks that don’t need user-visible progress.

Where to go next

• Periodic Background Sync
• WebTransport

← Back to the Compatibility explorer.