Background Sync API: Send Data When the Network Returns

Why it exists

Web apps need to work reliably even with intermittent network connections. Before this API, if a user submitted a form while offline, the request would fail and the data could be lost. The Background Sync API was created to solve this by providing a standard way to queue work that will run automatically once the network is available.

The mental model

Think of it as a browser-managed "outbox" for your web app. Your application code drops a request into the outbox by registering a sync task with a unique tag. The browser, acting as the delivery service, waits for clear roads (a stable network connection) and then wakes up your service worker to process everything in the outbox.

How it works

The process has two parts. First, in your client-side JavaScript, you access the service worker registration and call registration.sync.register('my-task-tag'). This tells the browser you have work to be done later. Second, inside your service worker file, you add an event listener for the 'sync' event. When the browser detects a stable connection, it fires this event. Your listener code checks event.tag to identify the task and then executes the necessary logic, like sending a POST request to your server.

When to use it

Use it for non-urgent data that needs to eventually reach a server. It's perfect for an offline-first Progressive Web App (PWA). Good use cases include sending chat messages, uploading small photos, submitting form data, or syncing application state that was changed while the user was offline.

When not to use it

Do not use it for operations that require immediate feedback, like a user login or a password reset. The browser controls when the sync event fires, so there's no guarantee of immediacy. For large file uploads or downloads, the Background Fetch API is a better choice as it's designed specifically for that purpose.

One canonical example

An email client PWA lets a user compose and hit "send" on a message while on an airplane's spotty Wi-Fi. The app UI can immediately move the message to the "Outbox". In the background, the app calls navigator.serviceWorker.ready.then(reg => reg.sync.register('send-queued-emails')). Later, once the connection is stable, the browser wakes the service worker, which receives the 'sync' event, finds all emails pending in IndexedDB, and sends them to the server.