Signatur
Beschreibung
ContentIndexEvent gehört zur Content Index API. Mit dieser API melden Progressive Web Apps offline verfügbare Inhalte (Artikel, Videos, Podcasts) beim Browser an, damit er sie in einer eigenen Oberfläche anzeigen kann, etwa bei Chrome für Android unter „Downloads“ bzw. „Artikel für dich“.
Entfernt der Nutzer über diese Browser-Oberfläche einen Eintrag, feuert im Service Worker das Ereignis contentdelete. Das übergebene Objekt ist ein ContentIndexEvent. Seine einzige eigene Eigenschaft id enthält die ID des gelöschten Eintrags. Damit kann der Service Worker die zugehörigen Daten aus dem Cache Storage oder aus IndexedDB entfernen.
Das Interface erbt von ExtendableEvent. Deshalb sollte man die Aufräumarbeit mit event.waitUntil() absichern, sonst beendet der Browser den Service Worker womöglich, bevor das asynchrone Löschen fertig ist. Das Ereignis kommt nur bei Löschungen durch den Nutzer. Ruft man selbst registration.index.delete() auf, wird es nicht ausgelöst.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Konstruktor-Parameter von new ContentIndexEvent(type, init): der Name des Ereignisses, in der Praxis immer "contentdelete". |
|
| $init Pflicht | { id: string } & ExtendableEventInit | Initialisierungsobjekt. Pflicht ist id, die ID des entfernten Inhalts. Dazu kommen die üblichen Event-Optionen wie bubbles und cancelable. |
|
| $id (Eigenschaft) | string | Nur lesbar: die ID, unter der der Inhalt mit ContentIndex.add() registriert wurde. |
Rückgabewert
contentdelete-Handler.Beispiele
contentdelete per addEventListener behandeln (Service Worker)
// sw.js
self.addEventListener('contentdelete', (event) => {
// event ist ein ContentIndexEvent
console.log('Vom Nutzer entfernt:', event.id);
event.waitUntil((async () => {
const cache = await caches.open('offline-artikel');
await cache.delete(`/artikel/${event.id}.html`);
})());
});Alternative über die on-Property oncontentdelete
// sw.js
self.oncontentdelete = (event) => {
event.waitUntil(
caches.open('offline-artikel').then((cache) =>
cache.delete(`/artikel/${event.id}.html`)
)
);
};Inhalt registrieren, damit das Event später feuern kann
// In der Seite (window-Kontext)
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.url);
await registration.index.add({
id: artikel.id,
title: artikel.titel,
description: artikel.teaser,
category: 'article',
icons: [{ src: '/icons/artikel-192.png', sizes: '192x192', type: 'image/png' }],
url: artikel.url
});
console.log('Registriert:', artikel.id);
};
speichereOffline({ id: 'artikel-42', titel: 'Service Worker im Detail', teaser: 'Offline lesen', url: '/artikel/artikel-42.html' });Instanz manuell erzeugen (z. B. für Tests)
// Im Service-Worker-Kontext
const testEvent = new ContentIndexEvent('contentdelete', { id: 'artikel-7' });
console.log(testEvent.type, testEvent.id);// Wichtig · Fallstricke
- Experimentell und kaum verbreitet: Nur Chromium-Browser unterstützen die API, sinnvoll eigentlich nur Chrome für Android ab Version 84. Firefox und Safari kennen sie nicht. Prüfe deshalb immer vorher mit
'index' in registration. - Das Interface gibt es nur im Service-Worker-Kontext, nicht im
window. contentdeletefeuert nur, wenn der Nutzer einen Eintrag entfernt. Wer selbstregistration.index.delete(id)aufruft, muss seinen Cache auch selbst aufräumen.- Asynchrones Aufräumen immer in
event.waitUntil()einpacken. Sonst kann der Service Worker beendet werden, bevor das Löschen fertig ist, und verwaiste Cache-Einträge bleiben zurück. - Der Content Index setzt HTTPS voraus (sicherer Kontext) und einen aktiven Service Worker. Registrierte Inhalte sollten auch wirklich offline verfügbar sein, sonst blendet der Browser sie womöglich aus.