Signatur
Beschreibung
Die schreibgeschützte Eigenschaft changed des Interfaces ExtendableCookieChangeEvent enthält alle Cookies, die durch die auslösende Änderung neu gesetzt oder überschrieben wurden. Jedes Element ist ein Objekt mit den Feldern name, value sowie, je nach Browser, domain, path, expires, secure, sameSite und partitioned.
Das Event ExtendableCookieChangeEvent gibt es nur im Service Worker. Es wird als cookiechange auf ServiceWorkerGlobalScope ausgelöst, allerdings nur für Cookies, die der Worker vorher über registration.cookies.subscribe() abonniert hat. Im Fenster-Kontext heißt das entsprechende Event CookieChangeEvent und hat ebenfalls eine changed-Eigenschaft.
Typische Einsatzfälle: Session-Cookies überwachen (z. B. Login/Logout erkennen), Caches beim Wechsel einer Sprach- oder Theme-Einstellung leeren oder offene Clients über geänderte Einstellungen informieren. Gelöschte Cookies und solche, deren Ablaufdatum in der Vergangenheit liegt, stehen nicht in changed, sondern in deleted.
Rückgabewert
{ name, value, domain, path, expires, secure, sameSite, partitioned }). Ist leer, wenn das Event nur Löschungen meldet.Beispiele
Cookie-Änderungen im Service Worker abonnieren und auswerten
// sw.js
self.addEventListener('activate', (event) => {
event.waitUntil(
self.registration.cookies.subscribe([
{ name: 'session', url: '/' },
{ name: 'theme', url: '/' }
])
);
});
self.addEventListener('cookiechange', (event) => {
for (const cookie of event.changed) {
console.log(`Geändert: ${cookie.name} = ${cookie.value}`);
}
for (const cookie of event.deleted) {
console.log(`Gelöscht: ${cookie.name}`);
}
});Clients bei neuem Session-Cookie benachrichtigen
// sw.js
self.addEventListener('cookiechange', (event) => {
const session = event.changed.find((c) => c.name === 'session');
if (!session) return;
event.waitUntil((async () => {
const clients = await self.clients.matchAll({ type: 'window' });
for (const client of clients) {
client.postMessage({ type: 'login', expires: session.expires });
}
})());
});Cache beim Theme-Wechsel verwerfen
// sw.js
self.addEventListener('cookiechange', (event) => {
const themeChanged = event.changed.some((c) => c.name === 'theme');
if (themeChanged) {
event.waitUntil(caches.delete('html-pages-v1'));
console.log('HTML-Cache wegen Theme-Wechsel geleert');
}
});// Wichtig · Fallstricke
- Nur mit Abonnement: Ohne vorheriges
registration.cookies.subscribe()wird im Service Worker keincookiechangeausgelöst undchangedwird nie befüllt. - Nur sicherer Kontext: Die Cookie Store API setzt HTTPS (oder
localhost) voraus. - HttpOnly-Cookies sind für Skripte unsichtbar und tauchen in
changednicht auf. - Ein Cookie, das mit abgelaufenem
expiresgesetzt wird, gilt als gelöscht und erscheint indeleted, nicht inchanged. - Das Array ist eingefroren.
push()oder Zuweisungen haben keine Wirkung bzw. werfen im strikten Modus einen Fehler. - Kompatibilität: Wird nur von Chromium-Browsern unterstützt (Chrome, Edge, Opera). Firefox und Safari kennen
ExtendableCookieChangeEventnicht. Vor der Nutzung sollte man prüfen, ob die API vorhanden ist, z. B. mit'cookies' in self.registration. - Asynchrone Arbeit im Handler immer mit
event.waitUntil()absichern, sonst kann der Worker vorzeitig beendet werden.