ServiceWorkerRegistration.periodicSync — Eigenschaft · JavaScript-Referenz

Signatur

ServiceWorkerRegistration.periodicSync

Beschreibung

Über ServiceWorkerRegistration.periodicSync kommt man an ein PeriodicSyncManager-Objekt. Es gehört zur Web Periodic Background Synchronization API. Damit kann eine installierte Web-App den Browser bitten, ihren Service Worker in regelmäßigen Abständen zu wecken, auch wenn gerade kein Tab der App offen ist. Der Service Worker erhält dann ein periodicsync-Ereignis und kann z. B. Nachrichten, Artikel oder Konfigurationsdaten im Voraus laden.

Der Manager hat drei Methoden: register(tag, { minInterval }) zum Anmelden einer Aufgabe, getTags() zum Auflisten der angemeldeten Aufgaben und unregister(tag) zum Abmelden. Die Angabe minInterval ist nur ein Mindestabstand. Wann und wie oft tatsächlich synchronisiert wird, entscheidet der Browser, etwa anhand der Nutzungshäufigkeit der Seite (Site Engagement), des Netzwerks und des Akkustands.

Einsetzen sollte man die API, wenn Inhalte beim nächsten Öffnen schon frisch vorliegen sollen, zum Beispiel für Offline-Lektüre oder aktuelle Schlagzeilen. Für zeitkritische Aufgaben oder genaue Zeitpläne ist sie nicht geeignet. Voraussetzungen sind ein sicherer Kontext (HTTPS), eine als PWA installierte Anwendung und die Berechtigung periodic-background-sync.

Rückgabewert

Typ

PeriodicSyncManager

Beschreibung

Das PeriodicSyncManager-Objekt dieser Registrierung. Über dieses Objekt meldet man periodische Synchronisierungen an, fragt sie ab und meldet sie wieder ab.

Beispiele

Unterstützung prüfen und periodische Synchronisierung registrieren

const registerNewsSync = async () => {
  const registration = await navigator.serviceWorker.ready;

  if (!('periodicSync' in registration)) {
    console.log('Periodic Background Sync wird nicht unterstützt.');
    return;
  }

  // Berechtigung prüfen (nur bei installierter PWA erteilt)
  const status = await navigator.permissions.query({
    name: 'periodic-background-sync'
  });

  if (status.state !== 'granted') {
    console.log('Keine Berechtigung für periodische Synchronisierung.');
    return;
  }

  try {
    await registration.periodicSync.register('news-update', {
      minInterval: 24 * 60 * 60 * 1000 // höchstens einmal pro Tag
    });
    console.log('Periodische Synchronisierung registriert.');
  } catch (err) {
    console.error('Registrierung fehlgeschlagen:', err);
  }
};

registerNewsSync();

Periodische Synchronisierung registriert.

Ereignis periodicsync im Service Worker verarbeiten (sw.js)

// sw.js
self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'news-update') {
    event.waitUntil(updateNewsCache());
  }
});

const updateNewsCache = async () => {
  const cache = await caches.open('news-v1');
  const response = await fetch('/api/news/latest');
  if (response.ok) {
    await cache.put('/api/news/latest', response);
  }
};

Registrierte Tags auflisten und eine Aufgabe abmelden

const cleanupSyncs = async () => {
  const registration = await navigator.serviceWorker.ready;
  if (!('periodicSync' in registration)) return;

  const tags = await registration.periodicSync.getTags();
  console.log('Aktive Tags:', tags);

  if (tags.includes('news-update')) {
    await registration.periodicSync.unregister('news-update');
    console.log('news-update abgemeldet.');
  }
};

cleanupSyncs();

Aktive Tags: ["news-update"] news-update abgemeldet.

// Wichtig · Fallstricke

Browser-Unterstützung: Die API ist experimentell und gibt es nur in Chromium-basierten Browsern (ab Chrome 80). Firefox und Safari unterstützen sie nicht. Vor dem Zugriff immer mit 'periodicSync' in registration prüfen.
Nur für installierte PWAs: Chrome erteilt die Berechtigung periodic-background-sync nur, wenn die Web-App installiert ist. Ohne Berechtigung wirft register() einen NotAllowedError.
Kein genauer Zeitplan: minInterval ist nur eine Untergrenze. Der Browser kann Synchronisierungen verzögern, bündeln oder ganz aussetzen, z. B. bei geringer Nutzung der Seite, im Energiesparmodus oder ohne Netzwerk. Nicht für Wecker, Erinnerungen oder genaue Abläufe verwenden.
Nur im sicheren Kontext: Die API steht nur unter HTTPS (oder localhost) zur Verfügung.
Datenschutz: Periodische Netzwerkzugriffe können Rückschlüsse auf IP-Adresse und Aufenthaltsort erlauben. Die Browser beschränken sie deshalb auf Netzwerke, mit denen das Gerät schon verbunden war. Im Ereignis-Handler immer event.waitUntil() nutzen, sonst kann der Service Worker vorzeitig beendet werden.
Die API ist nicht zu verwechseln mit der einmaligen Hintergrundsynchronisierung über ServiceWorkerRegistration.sync (Background Sync API).

Siehe auch

ServiceWorkerRegistration.sync ServiceWorkerRegistration.cookies ServiceWorkerRegistration.waiting ServiceWorkerRegistration.index ServiceWorkerRegistration.active