Signatur
Beschreibung
Der Konstruktor PeriodicSyncEvent() gehört zur Web Periodic Background Synchronization API. Damit kann eine installierte Web-App in regelmäßigen Abständen im Hintergrund Daten aktualisieren, zum Beispiel Nachrichten, Wetterdaten oder Feeds. Das geht auch dann, wenn gerade kein Tab der Seite geöffnet ist.
Normalerweise erzeugt man solche Objekte nicht selbst. Der Browser löst das Ereignis periodicsync im Service Worker automatisch aus, sobald eine mit registration.periodicSync.register() angelegte Registrierung fällig ist. Wann das geschieht, entscheidet der Browser anhand von Nutzungsverhalten, Netzwerk und Akkustand. Der Konstruktor ist vor allem für Tests und Simulationen nützlich, etwa wenn man Handler-Logik ohne echten Hintergrund-Trigger prüfen möchte.
PeriodicSyncEvent erbt von ExtendableEvent. Deshalb steht im Handler event.waitUntil() zur Verfügung: Damit bleibt der Service Worker aktiv, bis die asynchrone Arbeit fertig ist. Über die schreibgeschützte Eigenschaft tag erkennt man, welche Registrierung das Ereignis ausgelöst hat.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Ereignisses. Für echte Ereignisse ist das immer "periodicsync". |
|
| $options Pflicht | Object | Konfigurationsobjekt. Es enthält neben den Optionen von ExtendableEvent (bubbles, cancelable, composed) diese Pflichteigenschaft:
|
Rückgabewert
PeriodicSyncEvent-Objekt. Seine Eigenschaft tag enthält den übergebenen Wert.Beispiele
Periodische Synchronisierung registrieren (Seite)
// Im Hauptskript der Seite
const registriereSync = async () => {
const registration = await navigator.serviceWorker.ready;
if (!('periodicSync' in registration)) {
console.log('Periodic Background Sync wird nicht unterstützt');
return;
}
const status = await navigator.permissions.query({ name: 'periodic-background-sync' });
if (status.state !== 'granted') {
console.log('Keine Berechtigung');
return;
}
await registration.periodicSync.register('news-update', {
minInterval: 24 * 60 * 60 * 1000 // mindestens einmal täglich
});
console.log('Registriert: news-update');
};
registriereSync();periodicsync-Ereignis im Service Worker behandeln
// sw.js
const aktualisiereNews = async () => {
const cache = await caches.open('news-v1');
await cache.add('/api/news/latest');
};
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'news-update') {
event.waitUntil(aktualisiereNews());
}
});Ereignis zu Testzwecken manuell erzeugen
// sw.js – nur im Service-Worker-Kontext verfügbar
const testEvent = new PeriodicSyncEvent('periodicsync', { tag: 'news-update' });
console.log(testEvent.type); // Name des Ereignisses
console.log(testEvent.tag); // übergebener Tag
console.log(testEvent instanceof ExtendableEvent); // erbt von ExtendableEvent// Wichtig · Fallstricke
- Experimentell: Nur Chromium-basierte Browser (Chrome, Edge, Opera, Samsung Internet) unterstützen diese API. Firefox und Safari unterstützen sie nicht. Vor der Nutzung sollte man die Verfügbarkeit mit
'periodicSync' in registrationprüfen. - Der Konstruktor gibt es nur im Service-Worker-Kontext (
ServiceWorkerGlobalScope). Im Fensterkontext istPeriodicSyncEventnicht definiert. - Ohne die Eigenschaft
taginoptionswirft der Konstruktor einenTypeError. - Wenn man ein Ereignis manuell erzeugt und mit
dispatchEvent()auslöst, bleibtwaitUntil()ohne Wirkung auf die Lebensdauer des Service Workers. Der Aufruf kann sogar einenInvalidStateErrorauslösen, weil das Ereignis nicht vom Browser stammt. - In Chrome feuert
periodicsyncnur für installierte PWAs und nur mit der Berechtigungperiodic-background-sync.minIntervalist ein Mindestabstand, keine Garantie. Die tatsächliche Frequenz hängt vom Site-Engagement ab. - Die API funktioniert nur in sicheren Kontexten (HTTPS).