← Back to DocsRecipe

Background Sync API

Queue outbound requests when offline and replay them automatically once connectivity returns — no data loss, no user intervention.

Ingredients

  • •Service Worker with sync event listener
  • •IndexedDB outbox for pending mutations
  • •navigator.serviceWorker.ready registration
  • •Idempotency keys on every queued request

Flow

  1. 1App writes mutation to IndexedDB outbox and registers a sync tag.
  2. 2Browser fires sync event in the Service Worker when online.
  3. 3Worker drains outbox, sends each request with its idempotency key.
  4. 4On success, entry is removed from IndexedDB. On failure, retry on next sync.

Gotchas

  • •Chrome requires the page to be installed as a PWA for sync to fire reliably.
  • •Sync timing is browser-controlled — not guaranteed to fire immediately.
  • •Always use idempotency keys; the browser may replay a sync event.