Signatur
Beschreibung
Die Eigenschaft deleted des Interfaces ExtendableCookieChangeEvent enthält ein Array mit allen Cookies, die durch die Änderung entfernt wurden, zu der dieses Ereignis gehört. Das Ereignis wird im Service Worker als cookiechange ausgelöst. Voraussetzung ist, dass der Worker sich vorher über registration.cookies.subscribe() für bestimmte Cookies angemeldet hat.
Jeder Eintrag ist ein schlichtes Objekt mit mindestens den Feldern name und value. Bei gelöschten Cookies ist value in der Regel undefined bzw. leer. Weitere Attribute wie domain, path, expires, secure, sameSite oder partitioned sind je nach Browser vorhanden. Als „gelöscht“ zählen auch Cookies, die abgelaufen sind oder mit einem Ablaufdatum in der Vergangenheit überschrieben wurden.
Typische Einsatzfälle sind das Aufräumen im Hintergrund, sobald ein Sitzungs-Cookie wegfällt. Dazu gehört etwa, zwischengespeicherte Nutzerdaten aus dem Cache Storage zu löschen, offene Tabs über den Abmeldevorgang zu informieren oder eine Synchronisierung zu beenden. Weil das Ereignis von ExtendableEvent erbt, kann man mit event.waitUntil() dafür sorgen, dass der Service Worker aktiv bleibt, bis diese asynchronen Arbeiten abgeschlossen sind.
Das Gegenstück ist die Eigenschaft changed. Sie enthält neu gesetzte oder geänderte Cookies. Ein Cookie, das überschrieben wird, taucht in changed auf, nicht in deleted.
Rückgabewert
{ name, value, domain, path, expires, secure, sameSite, partitioned }), die gelöscht wurden. Wenn kein Cookie gelöscht wurde, ist es leer.Beispiele
Gelöschte Cookies im Service Worker protokollieren
// sw.js
self.addEventListener('activate', (event) => {
// Für Änderungen am Cookie "session" anmelden
event.waitUntil(
self.registration.cookies.subscribe([{ name: 'session', url: '/' }])
);
});
self.addEventListener('cookiechange', (event) => {
for (const cookie of event.deleted) {
console.log(`Cookie gelöscht: ${cookie.name}`);
}
});Beim Abmelden den Cache leeren und Tabs benachrichtigen
// sw.js
self.addEventListener('cookiechange', (event) => {
const sessionGone = event.deleted.some((c) => c.name === 'session');
if (!sessionGone) return;
event.waitUntil((async () => {
await caches.delete('user-data');
const clientList = await self.clients.matchAll({ type: 'window' });
clientList.forEach((client) => client.postMessage({ type: 'logout' }));
})());
});Änderungen und Löschungen gemeinsam auswerten
// sw.js
self.addEventListener('cookiechange', (event) => {
const changed = event.changed.map((c) => `${c.name}=${c.value}`);
const deleted = event.deleted.map((c) => c.name);
console.log({ changed, deleted });
});
// Auf der Seite ausgelöst, z. B. durch:
// await cookieStore.delete('theme');// Wichtig · Fallstricke
- Nur im Service Worker:
ExtendableCookieChangeEventgibt es ausschließlich imServiceWorkerGlobalScope. Im Fenster verwendet man stattdessenCookieChangeEventübercookieStore.addEventListener('change', …). Auch dort gibt es eine Eigenschaftdeleted. - Anmeldung ist Pflicht: Ohne vorheriges
registration.cookies.subscribe()wird keincookiechangeausgelöst. Die Anmeldung gilt für den jeweiligen Scope und bleibt über Neustarts des Workers hinweg bestehen. - Browser-Kompatibilität: Die Cookie Store API wird vollständig nur in Chromium-Browsern unterstützt (Chrome und Edge ab Version 87). In Firefox und Safari fehlt die Unterstützung im Service Worker ganz oder teilweise. Vor der Nutzung sollte man per Feature-Erkennung prüfen, z. B. mit
'cookies' in self.registration. - Nur sichere Kontexte: Die API funktioniert nur über HTTPS (oder
localhost).HttpOnly-Cookies sind für die Cookie Store API nicht sichtbar. Deren Löschung erscheint daher nicht indeleted. - Das Array ist schreibgeschützt und eingefroren. Wer die Liste verändern will, legt vorher eine Kopie an, z. B. mit
[...event.deleted]. - Bei gelöschten Cookies sollte man sich nicht auf
valueverlassen, denn das Feld ist meistundefined.