The Background Sync API allows web apps to defer network requests until the user has a stable internet connection. It relies on a Service Worker to intercept and replay failed requests when connectivity is restored. This is especially useful for offline-first apps, form submissions, and data synchronization.

• HTTPS – The site must be served over HTTPS (except localhost).
• Service Worker – A registered Service Worker must handle the sync event.
• Browser Support – Chromium-based browsers (Chrome, Edge, Opera) fully support it. Firefox and Safari have limited or no support.
• User Engagement – Some browsers require the site to be installed as a PWA for reliable sync triggering.

This tool uses localStorage to persist tasks and the Network Information API (navigator.onLine + online/offline events) to detect connectivity changes. When you go offline and come back online, queued tasks are automatically "synced." In production, you'd replace this with a real Service Worker that listens for the sync event.

Background Sync is best suited for small, critical data payloads (e.g., form submissions, analytics, state updates). For large file uploads, consider using the Background Fetch API instead, which is designed for large downloads/uploads and provides progress reporting.

The browser implements an exponential backoff strategy. If a sync fails, the browser waits longer before retrying. After several failures, it may defer the sync until conditions improve. This tester simulates a max of 3 retries per task before marking it as "failed."

No. Background Sync is for one-off deferred tasks triggered by connectivity restoration. Periodic Background Sync (periodicSync) allows scheduled recurring syncs (e.g., fetching news every hour). Periodic Sync requires the site to be installed as a PWA and meet browser-specific engagement criteria.

1. Register a Service Worker with navigator.serviceWorker.register('/sw.js').
2. In your page, call registration.sync.register('my-tag') when a request fails.
3. In the Service Worker, listen for self.addEventListener('sync', event => { ... }).
4. Inside the event handler, replay the queued request using the Cache API or IndexedDB data.
5. Call event.waitUntil(promise) to keep the SW alive until the sync completes.