Periodic Background Sync Demo - Online PWA Feature

The Periodic Background Sync API is a web platform feature that allows installed Progressive Web Apps (PWAs) to periodically synchronize data in the background, even when the app is not actively open. Unlike regular Background Sync (which is typically triggered immediately when connectivity is restored), Periodic Background Sync enables scheduled, recurring updates at intervals of 12 hours or more. This is ideal for content-heavy apps like news readers, social media feeds, email clients, and data dashboards that benefit from having fresh content ready before the user opens the app.

Chrome 80+ Edge 80+ Requires PWA Install

Background Sync (via SyncManager) is designed for immediate recovery — when a user action (like sending a message) fails due to no connectivity, the sync is queued and fired as soon as the network returns. It's one-shot and tied to a specific failed operation.

Periodic Background Sync (via PeriodicSyncManager) is designed for proactive content updates. It runs on a recurring schedule (minimum 12-hour intervals in Chrome) regardless of immediate user actions. The browser intelligently schedules these syncs based on user engagement patterns, network quality, and battery status. Think of it as "scheduled maintenance" vs "immediate retry."

As of 2024, Periodic Background Sync is supported in Chromium-based browsers: Google Chrome (80+), Microsoft Edge (80+), Opera, Brave, and Samsung Internet. Firefox and Safari do not currently support this API. For Firefox, the implementation is under consideration. Safari's stance is more conservative due to battery and privacy concerns.

Additionally, the API requires: (1) the site to be served over HTTPS, (2) a valid web app manifest, (3) the PWA to be installed on the device, and (4) sufficient user engagement with the app. On Android, Chrome uses the Site Engagement score to determine eligibility.

Chrome enforces a minimum interval of 12 hours (43,200,000 milliseconds) for Periodic Background Sync. This limitation exists for several important reasons:

Battery Preservation: Frequent background wake-ups drain device batteries significantly.
Network Efficiency: Prevents excessive mobile data consumption.
User Trust: Ensures background activity is reasonable and not exploitative.
Resource Management: Allows the OS to batch background tasks across apps.

The browser may further delay syncs beyond the minimum interval based on factors like low battery, poor connectivity, or low user engagement. There is no guaranteed maximum interval — syncs could be delayed indefinitely under adverse conditions.

Periodic Background Sync excels in these scenarios:

📰 News & Content Apps: Pre-fetch the latest articles and headlines so users see fresh content immediately upon opening.
📧 Email Clients: Periodically check for new messages and cache them locally for offline reading.
💬 Social Media: Sync notifications, messages, and feed updates in the background.
📊 Dashboards & Analytics: Update key metrics and cache dashboard data for instant loading.
🗺️ Travel & Weather: Refresh weather forecasts, flight statuses, or transit schedules.
🛒 E-commerce: Update product availability, prices, and promotional content.

The key is that the data should be non-urgent but freshness-sensitive — content that benefits from periodic updates without requiring real-time immediacy.

Implementation involves three key steps:

1. Register a Service Worker with a periodic-sync event listener:
self.addEventListener('periodicsync', event => {
  if (event.tag === 'news-update') {
    event.waitUntil(fetchAndCacheLatestNews());
  }
});

2. Register the periodic sync from your main page:
const registration = await navigator.serviceWorker.ready;
await registration.periodicSync.register('news-update', {
  minInterval: 12 * 60 * 60 * 1000 // 12 hours
});

3. Request permission (on some platforms) and handle the background-fetch or direct fetch in your SW. Always provide user-facing controls to manage background sync preferences.

No. Periodic Background Sync is only available for installed PWAs. The browser requires the user to have explicitly added the web app to their home screen (or installed via the browser's install prompt). This is a deliberate design choice — installing signals user intent and trust, justifying background processing privileges.

Additionally, the browser considers the Site Engagement score (a measure of how actively the user interacts with the site). Sites with very low engagement may have their periodic syncs throttled or denied entirely, even if installed.

Browsers employ multiple strategies to minimize resource impact:

🔋 Battery-Aware Scheduling: Syncs are deferred when the device is in battery-saving mode or below 20% charge.
📶 Network Quality Checks: Syncs prefer unmetered Wi-Fi connections; on cellular, they are more conservative.
👤 Engagement-Based Prioritization: Apps with higher user engagement get more frequent sync opportunities.
📦 Batch Processing: The OS may align multiple apps' sync windows to wake the radio once.
⏰ Doze Mode Integration: On Android, syncs respect Doze and App Standby restrictions.

Developers should also implement their own checks: verify network type before heavy downloads, use efficient delta updates, and respect the navigator.onLine status.