No Login Data Private Local Save

Periodic Background Sync Tester - Online Register & Test

29
0
0
0

Periodic Background Sync Tester

Register, test, and monitor Periodic Background Sync API for your PWA

Chrome 80+ HTTPS Required PWA Only
API Support
Checking...
Permission
Checking...
Service Worker
Checking...
Simulation Mode
Using localStorage simulation
Register Periodic Sync

Create a new periodic background sync task

Use lowercase letters, numbers, and hyphens. Must be unique.
Min: 10,000ms (dev). Chrome production: 12hr+
Quick Presets

One-click common sync configurations

Registered Sync Tags
0 tags registered
No sync tags registered yet. Use the form above to create one.
Activity Log
Real-time operation logs
--:--:-- Tool initialized. Waiting for environment detection...
Service Worker Code
Required in your sw.js to handle sync events 
self.addEventListener('periodicsync', (event) => {
  console.log('[SW] Periodic Sync triggered:', event.tag);
  
  if (event.tag === 'news-update') {
    event.waitUntil(
      fetch('/api/latest-news')
        .then(res => res.json())
        .then(data => {
          // Cache or post message to clients
          return clients.matchAll({ type: 'window' })
            .then(clients => {
              clients.forEach(client => {
                client.postMessage({
                  type: 'SYNC_COMPLETE',
                  tag: event.tag,
                  data: data
                });
              });
            });
        })
        .catch(err => console.error('[SW] Sync failed:', err))
    );
  }
  
  // Handle other tags...
});
Key API Reference
Quick reference for Periodic Background Sync API
registration.periodicSync.register(tag, opts)Register a new periodic sync with tag name and {minInterval} in ms.
registration.periodicSync.unregister(tag)Remove a previously registered periodic sync by tag name.
registration.periodicSync.getTags()Returns Promise<string[]> of all registered sync tag names.
navigator.permissions.query({name:'periodic-background-sync'})Check permission state: granted, denied, or prompt.
Chrome minInterval (dev)~10 seconds on localhost with flags enabled.
Chrome minInterval (prod)12 hours (43,200,000 ms) minimum for installed PWAs.
Site EngagementChrome requires sufficient site engagement score for periodic sync to fire.
Frequently Asked Questions
Everything you need to know about Periodic Background Sync

Periodic Background Sync allows a PWA to periodically fetch fresh content in the background, even when the user isn't actively using the app. It's designed for regular updates like news feeds, weather data, or stock prices.

Background Sync (one-off sync) is different — it's designed for deferred actions. When a user performs an action while offline (like sending a message), Background Sync queues it and sends it when connectivity returns. Periodic Sync is time-based and recurring; Background Sync is connectivity-based and one-shot.

FeaturePeriodic Background SyncBackground Sync
TriggerTime intervalNetwork recovery
FrequencyRecurring (min ~12h in prod)One-shot per registration
Use CaseContent pre-cachingOffline action queue
PWA RequiredYes (installed)No

  • Browser: Google Chrome 80+ (as of 2025, only Chrome-based browsers support this API).
  • Protocol: HTTPS is mandatory (except localhost for development).
  • PWA Installation: The site must be installed as a PWA (added to home screen / desktop).
  • Service Worker: A registered service worker with a periodicsync event listener is required.
  • Site Engagement: Chrome evaluates site engagement scores; low-engagement sites may have sync delayed or skipped.
  • Permission: The periodic-background-sync permission must be granted (usually implicit upon PWA install).

If your periodic sync isn't triggering, check these common issues:

  1. PWA not installed: The site must be installed. Check window.matchMedia('(display-mode: standalone)').matches.
  2. minInterval too low: In production Chrome, the minimum is 12 hours. Use a larger value.
  3. Low site engagement: Visit chrome://site-engagement/ to check your site's score.
  4. No service worker listener: Ensure your SW has self.addEventListener('periodicsync', ...).
  5. Permission denied: Use the Permissions API to check status.
  6. DevTools testing: In Chrome DevTools → Application → Service Workers, you can manually trigger a periodic sync for testing.
  7. Battery / Data Saver: Chrome may defer syncs to conserve battery or data.

  1. Open Chrome DevTools (F12 or Ctrl+Shift+I).
  2. Go to the Application tab.
  3. In the left sidebar, select Service Workers.
  4. Scroll down to the Periodic Sync section.
  5. You'll see all registered tags. Click the "Push" button next to a tag to manually trigger it.
  6. Alternatively, use chrome://serviceworker-internals/ for more detailed debugging.

Tip: In development (localhost), you can reduce minInterval to as low as ~10 seconds by enabling chrome://flags/#periodic-background-sync experimental features.

Periodic Background Sync excels in these scenarios:

  • News & Content Apps: Pre-fetch latest articles for instant reading when the app opens.
  • Weather Applications: Update forecasts periodically so users see current data immediately.
  • Financial Dashboards: Refresh stock prices or exchange rates at regular intervals.
  • Social Media: Pre-load new posts or notifications in the background.
  • E-commerce: Update product availability or flash sale timers.
  • Podcast/Music Apps: Auto-download new episodes or recommended content during idle time.

Avoid using it for real-time critical data (use WebSockets) or very frequent updates (respect user's data and battery).

Yes! Periodic Background Sync works on Android devices with Chrome 80+ installed. The PWA must be added to the home screen.

On iOS, support is limited. As of 2025, Safari on iOS does not support the Periodic Background Sync API. PWAs on iOS have more restricted background capabilities. Consider using alternative strategies (like silent push notifications or Background Fetch API where available) for iOS users.

Always implement feature detection and provide graceful fallbacks for unsupported platforms.

There is no hard limit defined by the specification, but Chrome imposes a soft limit. In practice:

  • You can register dozens of tags without issues.
  • Each tag should represent a distinct sync task — avoid creating many tags for similar operations.
  • Browsers may throttle or batch multiple syncs to optimize battery and network usage.
  • Best practice: Use 5–10 well-named tags maximum, each handling a specific content domain.
  • Use getTags() to audit your registered syncs and clean up obsolete ones with unregister().
🔧 Related Tools