Signatur
Beschreibung
Der Konstruktor ExtendableCookieChangeEvent() erzeugt ein Ereignisobjekt der Cookie Store API. Im Normalfall erzeugt der Browser dieses Objekt selbst und übergibt es an den Service Worker, sobald sich ein abonniertes Cookie ändert (Ereignis cookiechange auf dem ServiceWorkerGlobalScope). Das Objekt erbt von ExtendableEvent. Deshalb steht waitUntil() zur Verfügung, und der Service Worker bleibt aktiv, bis die asynchrone Arbeit fertig ist.
Den Konstruktor selbst aufzurufen lohnt sich vor allem in Unit-Tests und beim Simulieren von Cookie-Änderungen. So lässt sich die Handler-Logik prüfen, ohne dass sich echte Cookies ändern müssen. Die Eigenschaften changed und deleted enthalten Listen von Cookie-Objekten, die jeweils name, value, domain, path, expires, secure, sameSite und partitioned enthalten können.
Damit der Browser echte cookiechange-Ereignisse im Service Worker auslöst, muss der Worker vorher über registration.cookies.subscribe() ein Abonnement anlegen. Im Fensterkontext gibt es dagegen CookieChangeEvent auf cookieStore (das Ereignis change).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Ereignisses. Für die übliche Verwendung ist das "cookiechange". |
|
| $options | object | {} | Optionales Wörterbuch. Es enthält die Felder von EventInit (bubbles, cancelable, composed) sowie
|
Rückgabewert
ExtendableCookieChangeEvent-Objekt mit den schreibgeschützten Eigenschaften changed und deleted. Beide sind eingefrorene Arrays.Beispiele
Ereignis manuell erzeugen und auslesen
// Im Service Worker ausführen
const event = new ExtendableCookieChangeEvent('cookiechange', {
changed: [{ name: 'session', value: 'abc123', path: '/' }],
deleted: [{ name: 'tracking' }]
});
console.log(event.type);
console.log(event.changed[0].name, event.changed[0].value);
console.log(event.deleted.map((c) => c.name));Cookie-Änderungen im Service Worker abonnieren und verarbeiten
// sw.js
self.addEventListener('activate', (event) => {
event.waitUntil(
self.registration.cookies.subscribe([{ name: 'session', url: '/' }])
);
});
self.addEventListener('cookiechange', (event) => {
event.waitUntil((async () => {
for (const cookie of event.deleted) {
if (cookie.name === 'session') {
// Sitzung beendet: gecachte private Daten entfernen
await caches.delete('user-data');
console.log('Sitzung abgelaufen, Cache geleert');
}
}
})());
});Handler-Logik mit einem simulierten Ereignis testen
// sw.js – Handler als eigene Funktion, damit er testbar ist
const handleCookieChange = (event) => {
const names = event.changed.map((c) => c.name);
return names.includes('theme') ? 'Theme aktualisiert' : 'keine Aktion';
};
self.addEventListener('cookiechange', (e) => console.log(handleCookieChange(e)));
// Test: Ereignis erzeugen und auslösen
const fake = new ExtendableCookieChangeEvent('cookiechange', {
changed: [{ name: 'theme', value: 'dark' }]
});
self.dispatchEvent(fake);// Wichtig · Fallstricke
- Browser-Unterstützung: Bisher nur in Chromium-Browsern (ab Chrome/Edge 87). Firefox und Safari unterstützen
ExtendableCookieChangeEventundcookiechangeim Service Worker nicht. Vor der Nutzung mit'cookieStore' in selfodertypeof ExtendableCookieChangeEvent !== 'undefined'prüfen, ob die API vorhanden ist. - Der Konstruktor gibt es nur im Service-Worker-Kontext. Im Fenster verwendet man stattdessen
CookieChangeEvent. - Wer das Ereignis manuell erzeugt und mit
dispatchEvent()auslöst, sollte beiwaitUntil()vorsichtig sein. Außerhalb der Ereignisverarbeitung durch den Browser wirft der Aufruf einenInvalidStateError. - Die API funktioniert nur in einem sicheren Kontext (HTTPS). Cookies mit
HttpOnlysind nicht sichtbar. - Ohne vorheriges
cookies.subscribe()löst der Browser keine echtencookiechange-Ereignisse aus.