Signatur
Beschreibung
Die Eigenschaft tag eines PeriodicSyncEvent enthält den Namen, den du bei der Registrierung mit registration.periodicSync.register(tag, options) vergeben hast. Das Ereignis periodicsync wird im Service Worker ausgelöst, und über event.tag stellst du fest, welche Aufgabe gerade dran ist.
Der Tag ist vor allem dann wichtig, wenn eine Web-App mehrere periodische Aufgaben registriert, etwa "news-aktualisieren" und "wetter-laden". Im Handler verzweigst du anhand von event.tag und übergibst die passende Promise an event.waitUntil(). So bleibt der Service Worker aktiv, bis die Arbeit fertig ist.
Die Eigenschaft ist schreibgeschützt. Der Wert steht fest, sobald das Ereignis erzeugt wird. Beim Registrieren ist der Tag außerdem der eindeutige Schlüssel: Registrierst du einen bereits vorhandenen Tag erneut, wird die bestehende Registrierung aktualisiert und keine zweite angelegt.
Rückgabewert
periodicSync.register() angegeben wurde, z. B. "content-sync".Beispiele
Periodischen Sync registrieren (Seitenskript)
// Im Seitenskript: Registrierung mit einem eindeutigen Tag
const registerNewsSync = 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 für periodischen Sync');
return;
}
await registration.periodicSync.register('news-aktualisieren', {
minInterval: 24 * 60 * 60 * 1000 // höchstens einmal pro Tag
});
console.log('Registriert:', await registration.periodicSync.getTags());
};
registerNewsSync();Im Service Worker nach event.tag verzweigen
// sw.js
const refreshNews = async () => {
const cache = await caches.open('news-v1');
await cache.add('/api/news/latest');
};
const refreshWeather = async () => {
const cache = await caches.open('wetter-v1');
await cache.add('/api/wetter');
};
self.addEventListener('periodicsync', (event) => {
console.log('periodicsync ausgelöst für Tag:', event.tag);
switch (event.tag) {
case 'news-aktualisieren':
event.waitUntil(refreshNews());
break;
case 'wetter-laden':
event.waitUntil(refreshWeather());
break;
default:
console.warn('Unbekannter Tag:', event.tag);
}
});Tag-zu-Handler-Zuordnung über eine Map
// sw.js – skaliert besser bei vielen Aufgaben
const handlers = new Map([
['news-aktualisieren', () => fetch('/api/news').then((r) => r.json())],
['statistik-senden', () => fetch('/api/stats', { method: 'POST' })]
]);
self.addEventListener('periodicsync', (event) => {
const handler = handlers.get(event.tag);
if (handler) {
event.waitUntil(handler());
}
});// Wichtig · Fallstricke
- Browser-Unterstützung: Die Periodic Background Sync API gibt es nur in Chromium-Browsern (Chrome, Edge, Opera ab etwa Version 80). Firefox und Safari unterstützen sie nicht. Prüfe deshalb immer vorher mit
'periodicSync' in registration. - Voraussetzungen: Die API funktioniert nur in einem sicheren Kontext (HTTPS) und in der Regel nur für installierte PWAs. Außerdem muss die Berechtigung
periodic-background-syncerteilt sein. - Kein garantiertes Intervall:
minIntervalist nur ein Mindestwert. Wann das Ereignis tatsächlich kommt, entscheidet der Browser, z. B. anhand von Nutzungshäufigkeit (Site Engagement), Netzwerk und Akku. Verlass dich nicht auf genaue Zeitpunkte. - Tags eindeutig halten: Wird derselbe Tag erneut registriert, überschreibt das die bestehende Registrierung. Mit
periodicSync.unregister(tag)entfernst du Aufgaben, die du nicht mehr brauchst. Wenn der Handler einen Tag nicht kennt, solltest du ihn protokollieren oder abmelden. - Schreibgeschützt: Wenn du
event.tageinen Wert zuweist, passiert nichts. - Nicht verwechseln mit
SyncEvent.tagaus der einmaligen Background Sync API. Die Eigenschaft funktioniert dort genauso, gehört aber zum Ereignissync.