Background Sync with Service Workers

Provide an example of implementing background sync in an Angular app, allowing users to make changes offline and synchronizing when online.
// Register the service worker
if ('serviceWorker' in navigator && 'SyncManager' in window) {
    .then(registration => console.log('Service Worker registered'))
    .catch(err => console.log('Service Worker registration failed: ', err));
Checks for service worker and SyncManager support in the browser and registers the service worker from 'service-worker.js'.
// Function to be called to sync data
function syncData() {
  navigator.serviceWorker.ready.then(swRegistration => {
    return swRegistration.sync.register('syncTag');
  }).catch(() => {
    // Fallback for when Background Sync isn't supported
    // Send data to server directly

function sendDataDirectly() {
  // Implementation to send data directly to the server
  // This is used when Background Sync isn't available.
Defines a function to trigger a background sync. If Background Sync is not supported, it falls back to a direct server update.
// Listening for the sync event in the service worker
self.addEventListener('sync', event => {
  if (event.tag === 'syncTag') {

async function syncAllData() {
  // Perform your data syncing tasks here
  // Typically involves sending data to the server and updating the local database upon success
Inside the service worker, listens for the 'sync' event and runs the data synchronization logic when triggered.
// Example Angular service method triggering the syncData function
  providedIn: 'root'
export class DataSyncService {

  constructor() { }

  // Call this method when user performs actions to be synced later
  public syncUserActions() {
Defines an Angular service with a method to trigger synchronization that wraps the syncData function, making it part of the Angular application.