Signatur
Beschreibung
Die Eigenschaft id gibt es nur bei einem ContentIndexEvent. Dieses Ereignis wird als contentdelete-Event im Service Worker ausgelöst, wenn der Nutzer einen Eintrag selbst entfernt, den die Web-App vorher mit registration.index.add() im Content Index registriert hat. Das passiert zum Beispiel über die Liste „Offline verfügbare Inhalte“ im Browser.
Der Wert ist genau die id, die beim Aufruf von ContentIndex.add() im Beschreibungsobjekt angegeben wurde. So kann der Service Worker die passenden Ressourcen wiederfinden und aufräumen, etwa Einträge im Cache Storage oder in IndexedDB. Der Offline-Inhalt verschwindet dann nicht nur aus dem Index, sondern wirklich aus dem Speicher.
Die Eigenschaft ist schreibgeschützt. Wenn man ein ContentIndexEvent selbst erzeugt (zum Beispiel für Tests), wird sie über das Initialisierungsobjekt des Konstruktors gesetzt.
Rückgabewert
id des gelöschten Content-Index-Eintrags. Es ist derselbe Wert, der bei ContentIndex.add() übergeben wurde.Beispiele
Gelöschten Eintrag im Service Worker aus dem Cache entfernen
// sw.js
self.addEventListener('contentdelete', (event) => {
console.log('Vom Nutzer gelöscht:', event.id);
// Konvention: Die Cache-URL wird aus der id abgeleitet
event.waitUntil(
caches.open('offline-artikel').then((cache) =>
cache.delete(`/artikel/${event.id}`)
)
);
});Eintrag registrieren – die id kommt später im Event zurück
// Im Seiten-Skript: Artikel offline speichern und im Index registrieren
const speichereOffline = async (artikel) => {
const registration = await navigator.serviceWorker.ready;
if (!('index' in registration)) {
console.warn('Content Index API nicht unterstützt');
return;
}
const cache = await caches.open('offline-artikel');
await cache.add(`/artikel/${artikel.id}`);
await registration.index.add({
id: artikel.id, // taucht später als event.id auf
title: artikel.titel,
description: artikel.teaser,
category: 'article',
icons: [{ src: '/icons/artikel-192.png', sizes: '192x192', type: 'image/png' }],
url: `/artikel/${artikel.id}`
});
};
speichereOffline({ id: 'artikel-42', titel: 'Service Worker verstehen', teaser: 'Grundlagen und Praxis' });Aufräumen in IndexedDB anhand der id
// sw.js
const loescheMetadaten = (id) => new Promise((resolve, reject) => {
const req = indexedDB.open('offline-db', 1);
req.onsuccess = () => {
const tx = req.result.transaction('artikel', 'readwrite');
tx.objectStore('artikel').delete(id);
tx.oncomplete = () => resolve();
tx.onerror = () => reject(tx.error);
};
req.onerror = () => reject(req.error);
});
self.addEventListener('contentdelete', (event) => {
event.waitUntil(loescheMetadaten(event.id));
});Event für Tests selbst erzeugen
// Im Service-Worker-Kontext
const testEvent = new ContentIndexEvent('contentdelete', { id: 'artikel-7' });
console.log(testEvent.id);
testEvent.id = 'anders'; // wird ignoriert, weil schreibgeschützt
console.log(testEvent.id);// Wichtig · Fallstricke
- Experimentell und eingeschränkt verfügbar: Die Content Index API gibt es nur in Chromium-Browsern, und das in der Praxis vor allem unter Android. Firefox und Safari unterstützen sie nicht. Prüfe deshalb vorher mit
'index' in registration, ob sie vorhanden ist. - Nur im Service Worker:
ContentIndexEventund dascontentdelete-Event gibt es ausschließlich imServiceWorkerGlobalScope. Außerdem ist ein sicherer Kontext (HTTPS) nötig. - Nur bei Löschung durch den Nutzer: Das Event wird nicht ausgelöst, wenn die App selbst
registration.index.delete(id)aufruft. In diesem Fall muss die App selbst aufräumen. - Für asynchrone Aufräumarbeiten immer
event.waitUntil()verwenden. Sonst kann der Browser den Service Worker beenden, bevor die Arbeit erledigt ist. - Die
idist ein frei wählbarer String. Wähle eine eindeutige, stabile Konvention, aus der sich Cache-Schlüssel oder Datenbank-Schlüssel eindeutig ableiten lassen.