Periodic Background Sync API

// Register Periodic Background Sync for Daily Digest
async function setupPeriodicNewsSync() {
  if (!('serviceWorker' in navigator)) {
    console.log('[PWA] Service Workers not supported.');
    return;
  }

  const registration = await navigator.serviceWorker.ready;

  // Check if Periodic Sync API exists on registration
  if ('periodicSync' in registration) {
    try {
      // 1. Check permission state
      const permissionStatus = await navigator.permissions.query({
        name: 'periodic-background-sync'
      });

      if (permissionStatus.state === 'granted') {
        // 2. Register sync with 12-hour minimum interval
        await registration.periodicSync.register('update-news-feed', {
          minInterval: 12 * 60 * 60 * 1000 // 12 hours
        });
        console.log('[PWA] Periodic sync "update-news-feed" registered successfully!');
      } else {
        console.warn('[PWA] Periodic sync permission not granted. State:', permissionStatus.state);
      }
    } catch (err) {
      console.error('[PWA] Periodic sync registration failed:', err);
    }
  } else {
    console.log('[PWA] Periodic Background Sync API not available on this platform.');
  }
}

// Call on startup if PWA is running in standalone mode
if (window.matchMedia('(display-mode: standalone)').matches) {
  setupPeriodicNewsSync();
}

const NEWS_CACHE_NAME = 'news-content-v1';
const NEWS_API_ENDPOINT = '/api/latest-news.json';

// Listen for Periodic Background Sync trigger
self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-news-feed') {
    console.log('[SW PeriodicSync] "update-news-feed" triggered by browser!');
    event.waitUntil(fetchAndCacheLatestNews());
  }
});

async function fetchAndCacheLatestNews() {
  try {
    console.log('[SW PeriodicSync] Fetching fresh headlines in background...');
    const response = await fetch(NEWS_API_ENDPOINT);

    if (response.ok) {
      const cache = await caches.open(NEWS_CACHE_NAME);
      // Store latest JSON payload for instant offline display
      await cache.put(NEWS_API_ENDPOINT, response.clone());
      
      // Precache article images referenced in the feed
      const feedData = await response.json();
      const imageAssets = feedData.articles.slice(0, 5).map(a => a.imageUrl);
      
      const imageCache = await caches.open('news-images-v1');
      await Promise.all(
        imageAssets.map(async (imgUrl) => {
          try {
            const imgRes = await fetch(imgUrl);
            if (imgRes.ok) await imageCache.put(imgUrl, imgRes);
          } catch (e) {
            // Ignore single image fetch failure
          }
        })
      );

      console.log('[SW PeriodicSync] Fresh headlines & images cached successfully.');
    }
  } catch (error) {
    console.error('[SW PeriodicSync] Background news update failed:', error);
    throw error;
  }
}

(User uses PWA regularly -> Earns High Site Engagement Score):
[PWA] Periodic sync "update-news-feed" registered successfully!

(At 04:00 AM while phone is plugged in on home Wi-Fi):
[SW PeriodicSync] "update-news-feed" triggered by browser!
[SW PeriodicSync] Fetching fresh headlines in background...
[SW PeriodicSync] Fresh headlines & images cached successfully.

(User wakes up at 07:00 AM and launches app on subway without cell service):
[UI] Loaded 5 fresh morning articles instantly from cache (0ms latency).