🔄 Background Sync API

Back

What is Background Sync?

The Background Sync API lets you defer actions until the user has a stable connection. The browser retries the sync even if the user left the page!

Use case: A messaging app queues unsent messages and syncs them when connectivity returns.

Live Demo: Message Queue

Status: Idle

Message Queue

No messages queued yet

Event Log

🔧 DevTools: Inspecting Background Sync

  1. Open DevTools → Application panel
  2. Expand Background services → click Background Sync
  3. Click the record button (⏺) to start recording sync events
  4. Add messages and click "Trigger Background Sync"
  5. Watch sync events appear with their tags and timestamps
  6. Simulate offline mode in the Network panel to test retry behavior

📝 Practice Exercise

  1. Start recording sync events in the Application panel
  2. Add a few messages and trigger a sync — observe events in DevTools
  3. Go to Network panel and check "Offline", then trigger another sync
  4. Uncheck "Offline" — does the pending sync fire automatically?
  5. Check the Service Workers section to see the registered service worker