Signatur
Beschreibung
Die Eigenschaft index einer ServiceWorkerRegistration gibt ein ContentIndex-Objekt zurück. Es gehört zur Content Index API. Mit ihr teilt eine Web-App dem Browser mit, welche Inhalte (Artikel, Videos, Podcasts usw.) sie bereits zwischengespeichert hat und welche daher offline verfügbar sind.
Der Browser kann diese Einträge dann in seiner Oberfläche zeigen, zum Beispiel in Chrome für Android im Bereich „Downloads“ unter „Artikel für dich“. So finden Nutzer Offline-Inhalte, ohne die App vorher öffnen zu müssen. ContentIndex bietet drei Methoden: add(), delete() und getAll().
Die Eigenschaft ist sowohl im Fensterkontext (über navigator.serviceWorker.ready) als auch im Service Worker selbst (über self.registration.index) erreichbar. Weil die API experimentell ist, solltest du vor der Nutzung immer mit 'index' in registration prüfen, ob sie vorhanden ist.
Wichtig: Der Index speichert keine Inhalte. Du musst die zugehörigen Ressourcen selbst ablegen, etwa mit der Cache API. Der Index verweist nur auf Inhalte, die schon vorhanden sind.
Rückgabewert
ContentIndex-Objekt der Registrierung mit den Methoden add(description), delete(id) und getAll(). Wenn der Browser die API nicht unterstützt, gibt es die Eigenschaft nicht (undefined).Beispiele
Unterstützung prüfen und Artikel zum Index hinzufügen
const artikelOfflineMelden = async (artikel) => {
const registration = await navigator.serviceWorker.ready;
if (!('index' in registration)) {
console.log('Content Index API wird nicht unterstützt');
return;
}
// Inhalte zuerst selbst im Cache ablegen
const cache = await caches.open('artikel-v1');
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(`Artikel ${artikel.id} offline verfügbar`);
};
artikelOfflineMelden({
id: 'post-42',
titel: 'Service Worker verstehen',
teaser: 'Grundlagen zu Caching und Offline-Betrieb',
url: '/artikel/service-worker-verstehen'
});Alle indizierten Inhalte auflisten
const indexAuflisten = async () => {
const registration = await navigator.serviceWorker.ready;
if (!registration.index) return [];
const eintraege = await registration.index.getAll();
eintraege.forEach(({ id, title, category }) => {
console.log(`${id}: ${title} (${category})`);
});
return eintraege;
};
indexAuflisten();Im Service Worker: Eintrag entfernen, wenn der Nutzer ihn löscht
// sw.js
self.addEventListener('contentdelete', (event) => {
// Der Browser hat den Eintrag bereits aus dem Index entfernt,
// jetzt noch die gecachten Daten aufräumen
event.waitUntil((async () => {
const cache = await caches.open('artikel-v1');
const keys = await cache.keys();
await Promise.all(
keys
.filter((req) => req.url.includes(event.id))
.map((req) => cache.delete(req))
);
})());
});
// Manuelles Entfernen aus dem Service Worker heraus
const artikelEntfernen = async (id) => {
await self.registration.index.delete(id);
};// Wichtig · Fallstricke
- Experimentell und nur in Chromium verfügbar: Die API ist in Chrome/Edge ab Version 84 implementiert und hat praktisch nur auf Android sichtbare Auswirkungen. Firefox und Safari unterstützen sie nicht. Prüfe deshalb immer mit
'index' in registrationund behandle die API als optionale Verbesserung. - Nur in sicheren Kontexten: Die API funktioniert nur über HTTPS oder auf
localhost, und es muss ein aktiver Service Worker vorhanden sein.add()schlägt fehl, wenn die angegebeneurlnicht im Gültigkeitsbereich (Scope) des Service Workers liegt oder nicht offline geladen werden kann. - Kein Speicher: Der Index verwaltet nur Metadaten. Die eigentlichen Inhalte musst du selbst zwischenspeichern, etwa mit der Cache API oder IndexedDB, und sie beim Entfernen auch selbst aufräumen.
- Gültige Werte für
categorysind'','homepage','article','video'und'audio'. - Wenn du
add()mit eineridaufrufst, die schon existiert, wird der vorhandene Eintrag überschrieben.