Background sync — deferring actions when offline

When a user submits a form or triggers an action while offline, the request fails silently and the data is lost. Retry logic in the client page does not work if the user closes the tab before connectivity is restored.

Use the Background Sync API to register a sync tag and defer the request until connectivity is available, even if the page has been closed.

// In the page — save data locally and register sync
async function submitForm(data) {
// Save to IndexedDB so SW can retrieve it later
await idb.put('pending-submissions', data);

if ('serviceWorker' in navigator && 'SyncManager' in window) {
const reg = await navigator.serviceWorker.ready;
await reg.sync.register('submit-form');
} else {
// Fallback: try immediately
await sendToServer(data);
}
}

// In sw.js — handle the sync event
self.addEventListener('sync', event => {
if (event.tag === 'submit-form') {
event.waitUntil(
idb.getAll('pending-submissions').then(items =>
Promise.all(items.map(item =>
fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(item),
}).then(() => idb.delete('pending-submissions', item.id))
))
)
);
}
});

Background Sync ensures data is not lost when the user is offline. The browser retries the sync tag automatically (with exponential backoff) when connectivity is restored, even if the user has closed the app.

Forms or user actions that must complete even if connectivity is lost mid-session