Background Sync & Push Notifications

Concept#

Background Sync API#

If a user attempts to send a message or submit a form while offline, standard POST requests fail.

The Background Sync API allows applications to defer actions to the Service Worker until the user has a stable internet connection:

1. The client registers a sync event: navigator.serviceWorker.ready.then(sw => sw.sync.register('sync-messages')).
2. The client saves the message data to local IndexedDB.
3. Once the browser detects internet connectivity, the Service Worker wakes up and fires the 'sync' event:

// sw.js - Process background syncs
self.addEventListener('sync', (event) => {
  if (event.tag === 'sync-messages') {
    event.waitUntil(sendPendingMessagesToServer());
  }
});

This ensures actions are not lost during dropouts.

Push Notifications API#

The Push API allows a PWA to receive push events sent from backend servers, even if the application is not open in the browser.

The process uses VAPID Keys (cryptographic public/private keys) to establish identity: