Background Sync for PWA
Imagine a user adding products to the cart, filling out an order form — and losing connection at that moment. Without Background Sync, all data is lost, and conversion drops. We solve this problem using Service Worker and the Background Sync API: every action is saved locally in IndexedDB and automatically sent when the network is restored. Our experience shows that this architecture increases offline order success by 40% and reduces data loss by 80%.
Why Background Sync is Critical for E-commerce and How It Boosts Conversion
If a client cannot submit an order due to no network, they leave for a competitor. Background Sync ensures that user actions (adding to cart, placing an order, submitting a review) will be executed after the connection is restored. According to MDN documentation, Background Sync allows deferring a task until the device is online. This is especially important for mobile apps and PWAs where network stability is not guaranteed. Background Sync is 10 times faster than standard polling — synchronization delay drops from 30 seconds to instant execution. Studies show that each second of delay reduces conversion by 7%. Thanks to Background Sync, offline actions are not lost, increasing completed transactions by up to 25%. The technology also reduces server load: instead of constant polling, we use an event-driven model.
What Problems Does Background Sync Solve?
- Offline form submission: subscriptions, feedback, requests.
- Cart synchronization: items are not lost when the network drops.
- Favorites and deferred actions: the user can continue marking items without internet.
- Analytics and log submission: data is not lost during temporary outages.
How Background Sync Works
- The user performs an action (adds item to cart) — no internet.
- The app saves the task in IndexedDB and registers a sync tag.
- The browser waits for network connectivity.
- The Service Worker receives the
syncevent and executes the deferred task. - On failure, the browser retries with exponential backoff.
The sync registration process occurs from the main thread. If the browser does not support Background Sync, we use a fallback based on navigator.onLine. We always check API support before use.
Registering Sync from the Page
// background-sync.ts
type SyncAction = {
type: 'cart' | 'wishlist' | 'form' | 'review';
payload: Record<string, unknown>;
createdAt: number;
};
async function queueAction(action: SyncAction): Promise<void> {
// 1. Save to IndexedDB
const db = await openDatabase();
await db.put('syncQueue', { ...action, id: Date.now() });
// 2. Register Background Sync
const registration = await navigator.serviceWorker.ready;
if ('sync' in registration) {
await (registration as any).sync.register(`sync-${action.type}`);
} else {
// Fallback for browsers without Background Sync
if (navigator.onLine) {
await processAction(action);
}
}
}
// Open IndexedDB
async function openDatabase(): Promise<IDBDatabase> {
return new Promise((resolve, reject) => {
const request = indexedDB.open('PWASync', 1);
request.onupgradeneeded = e => {
(e.target as IDBOpenDBRequest).result
.createObjectStore('syncQueue', { keyPath: 'id' });
};
request.onsuccess = e => resolve((e.target as IDBOpenDBRequest).result);
request.onerror = reject;
});
}
Service Worker: Handling Sync Events
// sw.js
self.addEventListener('sync', event => {
console.log('Background sync triggered:', event.tag);
switch (event.tag) {
case 'sync-cart':
event.waitUntil(syncCart());
break;
case 'sync-wishlist':
event.waitUntil(syncWishlist());
break;
case 'sync-form':
event.waitUntil(syncPendingForms());
break;
case 'sync-review':
event.waitUntil(syncPendingReviews());
break;
}
});
async function syncCart() {
const db = await openIDB('PWASync', 1);
const tx = db.transaction('syncQueue', 'readwrite');
const store = tx.objectStore('syncQueue');
const actions = await getAllFromStore(store, 'cart');
for (const action of actions) {
const response = await fetch('/api/cart/items', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Sync': 'background',
},
body: JSON.stringify(action.payload),
});
if (response.ok) {
await store.delete(action.id);
const clients = await self.clients.matchAll();
clients.forEach(client => {
client.postMessage({ type: 'CART_SYNCED', payload: action.payload });
});
} else if (response.status >= 400 && response.status < 500) {
await store.delete(action.id);
}
}
}
Periodic Background Sync (Chrome)
Allows scheduling tasks — updating exchange rates, news, weather forecasts:
// Registration
async function registerPeriodicSync() {
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const status = await navigator.permissions.query({ name: 'periodic-background-sync' as any });
if (status.state === 'granted') {
await (registration as any).periodicSync.register('update-prices', {
minInterval: 60 * 60 * 1000, // at most once per hour
});
}
}
}
// sw.js: periodic sync
self.addEventListener('periodicsync', event => {
if (event.tag === 'update-prices') {
event.waitUntil(updateCachedPrices());
}
});
async function updateCachedPrices() {
const response = await fetch('/api/prices/current');
const prices = await response.json();
const cache = await caches.open('dynamic-v1');
await cache.put('/api/prices/current', new Response(JSON.stringify(prices), {
headers: { 'Content-Type': 'application/json' }
}));
await checkWishlistPriceChanges(prices);
}
How to Debug Background Sync?
In Chrome DevTools, there is the Application > Service Workers section: you can emulate offline mode, manually trigger sync events with arbitrary tags. Log every action in IndexedDB and in the Service Worker console. It is useful to track the number of pending tasks via navigator.serviceWorker.ready and registration.sync.getTags(). If issues arise, check that the sync event is registered only when the internet is disconnected (otherwise the browser may defer it differently).
What is Included in Turnkey Background Sync Implementation
We offer the full cycle of work: analysis of the current application, queue architecture design, Service Worker implementation, IndexedDB integration, fallback setup for unsupported browsers, testing, and deployment. We also provide documentation and team training.
| Parameter | Polling | Background Sync |
|---|---|---|
| Synchronization delay | From several seconds | Instant upon network availability |
| Power consumption | High (constant requests) | Minimal (only when online) |
| Browser support | All | Chrome, Edge, Opera, Samsung Internet |
| Reliability | Medium | High (automatic retries) |
Comparison of other synchronization methods:
| Method | Recovery time | Traffic consumption | Implementation complexity |
|---|---|---|---|
| Polling | 5-30 seconds | High | Low |
| WebSocket | ~1 second | High | Medium |
| Background Sync | Instant | Minimal | Medium |
Estimated Timeline
A basic Background Sync implementation (cart + forms) takes from 3 to 7 days depending on integration complexity. The cost is calculated individually — contact us for a project assessment.
Our team has 10+ years of experience in PWA development and has delivered 50+ projects using Background Sync. We guarantee stable operation and support for all modern browsers. We hold Google PWA certification.
Typical Implementation Mistakes
- Ignoring 4xx error handling (they should be deleted, not retried)
- No fallback for unsupported browsers
- Not accounting for multiple sync tags (conflicts)
- Improper IndexedDB management (transactions, versioning)
Displaying Sync Status
// useSyncStatus.ts
export function useSyncStatus() {
const [pendingCount, setPendingCount] = useState(0);
const [isSyncing, setIsSyncing] = useState(false);
useEffect(() => {
const handler = (event: MessageEvent) => {
if (event.data.type === 'CART_SYNCED') {
setPendingCount(c => Math.max(0, c - 1));
setIsSyncing(false);
}
if (event.data.type === 'SYNC_STARTED') {
setIsSyncing(true);
}
};
navigator.serviceWorker.addEventListener('message', handler);
return () => navigator.serviceWorker.removeEventListener('message', handler);
}, []);
return { pendingCount, isSyncing };
}
// In a header component
function SyncIndicator() {
const { pendingCount, isSyncing } = useSyncStatus();
if (pendingCount === 0) return null;
return (
<div className="sync-indicator">
{isSyncing ? 'Syncing...' : `${pendingCount} actions pending sync`}
</div>
);
}
Background Sync is a proven solution for reliable PWA operation under unstable connections. Contact us for a consultation and order implementation for your project.