Background Sync API

const DB_NAME = 'PwaOutboxDB';
const DB_VERSION = 1;
const STORE_NAME = 'messages';

function openOutboxDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
      }
    };
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

async function saveToOutbox(data) {
  const db = await openOutboxDB();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(STORE_NAME, 'readwrite');
    const store = tx.objectStore(STORE_NAME);
    const req = store.add({ ...data, timestamp: Date.now() });
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

async function getAllOutboxItems() {
  const db = await openOutboxDB();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(STORE_NAME, 'readonly');
    const store = tx.objectStore(STORE_NAME);
    const req = store.getAll();
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

async function deleteOutboxItem(id) {
  const db = await openOutboxDB();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(STORE_NAME, 'readwrite');
    const store = tx.objectStore(STORE_NAME);
    const req = store.delete(id);
    req.onsuccess = () => resolve();
    req.onerror = () => reject(req.error);
  });
}

const form = document.getElementById('chat-form');
const input = document.getElementById('chat-input');
const statusDiv = document.getElementById('status-msg');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;

  const payload = { message: text, sender: 'User_101' };

  if ('serviceWorker' in navigator && 'SyncManager' in window) {
    try {
      // 1. Save locally to IndexedDB outbox
      await saveToOutbox(payload);
      input.value = '';
      statusDiv.textContent = 'Message queued in local outbox. Syncing in background...';

      // 2. Request Background Sync
      const reg = await navigator.serviceWorker.ready;
      await reg.sync.register('replay-outbox-messages');
      console.log('[UI] Background sync registered: replay-outbox-messages');
    } catch (err) {
      console.error('[UI] Background sync registration failed:', err);
    }
  } else {
    // Fallback: Direct immediate fetch for browsers lacking SyncManager
    statusDiv.textContent = 'Direct send (Background Sync unsupported)...';
    fetch('/api/messages', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
  }
});

importScripts('/db.js');

self.addEventListener('sync', (event) => {
  if (event.tag === 'replay-outbox-messages') {
    console.log('[SW Sync] "replay-outbox-messages" tag triggered. Draining outbox...');
    event.waitUntil(flushOutboxQueue());
  }
});

async function flushOutboxQueue() {
  const queuedItems = await getAllOutboxItems();
  console.log(`[SW Sync] Found ${queuedItems.length} messages in outbox.`);

  for (const item of queuedItems) {
    try {
      const response = await fetch('/api/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: item.message, sender: item.sender })
      });

      if (response.ok) {
        console.log(`[SW Sync] Successfully synced message ID ${item.id}`);
        // Remove from IndexedDB outbox once confirmed
        await deleteOutboxItem(item.id);
      } else {
        console.warn(`[SW Sync] Server returned status ${response.status}. Retrying later...`);
        throw new Error('Server rejected sync payload.');
      }
    } catch (networkErr) {
      console.error('[SW Sync] Failed to send message. Browser will retry sync.', networkErr);
      // Throwing an error causes event.waitUntil to reject, prompting the browser to reschedule
      throw networkErr;
    }
  }
}

(User types "Hello Team!" and clicks Send while in Airplane Mode):
[UI] Message queued in local outbox. Syncing in background...
[UI] Background sync registered: replay-outbox-messages

(User closes browser tab and restores Wi-Fi):
[SW Sync] "replay-outbox-messages" tag triggered. Draining outbox...
[SW Sync] Found 1 messages in outbox.
[SW Sync] Successfully synced message ID 1