ContentIndex.getAll() — Methode · JavaScript-Referenz

Signatur

ContentIndex.prototype.getAll()

Beschreibung

Die Methode getAll() der Schnittstelle ContentIndex liest alle Einträge aus, die zuvor mit ContentIndex.add() für die aktuelle Service-Worker-Registrierung angelegt wurden. Das zurückgegebene Promise wird mit einem Array von Beschreibungsobjekten aufgelöst. Jedes enthält die Felder id, title, description, url, category und icons.

Mit der Content Index API können Progressive Web Apps offline verfügbare Inhalte (z. B. Artikel, Podcasts oder Videos) beim Browser anmelden. Der Browser kann sie dann in einer eigenen Oberfläche anzeigen, etwa in Chrome für Android unter „Downloads“ bzw. „Artikel für dich“. Mit getAll() synchronisierst du diesen Index mit deinem Cache: Du prüfst, welche Einträge vorhanden sind, zeigst sie in der eigenen Offline-Übersicht an oder räumst veraltete Einträge auf.

Der Zugriff läuft über registration.index. Das geht im Fenster über navigator.serviceWorker.ready und im Service Worker selbst über self.registration.index. Die Methode nimmt keine Parameter entgegen und gibt die Einträge ohne garantierte Reihenfolge zurück.

Rückgabewert

Typ

Promise<Array<ContentDescription>>

Beschreibung

Ein Promise, das mit einem Array von Objekten aufgelöst wird. Jedes Objekt hat die Felder id (string), title (string), description (string), url (string), category ('', 'homepage', 'article', 'video' oder 'audio') und icons (Array von Bildressourcen). Gibt es keine Einträge, ist das Array leer.

Beispiele

Alle indizierten Inhalte im Fenster auflisten

const listOfflineContent = async () => {
  if (!('serviceWorker' in navigator)) return [];
  const registration = await navigator.serviceWorker.ready;
  if (!('index' in registration)) {
    console.warn('Content Index API wird nicht unterstützt.');
    return [];
  }
  const entries = await registration.index.getAll();
  for (const { id, title, category } of entries) {
    console.log(`${id}: ${title} (${category})`);
  }
  return entries;
};

listOfflineContent();

artikel-42: Offline lesen mit PWAs (article) podcast-7: Folge 7 – Service Worker (audio)

Offline-Übersicht als Liste rendern

const renderOfflineList = async (container) => {
  const registration = await navigator.serviceWorker.ready;
  const entries = await registration.index?.getAll() ?? [];

  container.replaceChildren();
  if (entries.length === 0) {
    container.textContent = 'Keine Inhalte offline verfügbar.';
    return;
  }

  for (const entry of entries) {
    const link = document.createElement('a');
    link.href = entry.url;
    link.textContent = entry.title; // textContent statt innerHTML – kein XSS
    const li = document.createElement('li');
    li.append(link);
    container.append(li);
  }
};

renderOfflineList(document.querySelector('#offline-liste'));

Veraltete Einträge im Service Worker aufräumen

// sw.js
const CACHE_NAME = 'artikel-v1';

const pruneContentIndex = async () => {
  const cache = await caches.open(CACHE_NAME);
  const entries = await self.registration.index.getAll();

  await Promise.all(entries.map(async (entry) => {
    const cached = await cache.match(entry.url);
    if (!cached) {
      // Inhalt nicht mehr im Cache -> Eintrag aus dem Index entfernen
      await self.registration.index.delete(entry.id);
      console.log(`Entfernt: ${entry.id}`);
    }
  }));
};

self.addEventListener('activate', (event) => {
  event.waitUntil(pruneContentIndex());
});

Entfernt: artikel-13

// Wichtig · Fallstricke

Experimentell und eingeschränkt verfügbar: Die API ist praktisch nur in Chromium-Browsern auf Android implementiert (ab Chrome 84). Firefox und Safari unterstützen sie nicht. Prüfe deshalb immer per Feature-Erkennung mit 'index' in registration.
Die Methode funktioniert nur in einem sicheren Kontext (HTTPS oder localhost) und setzt einen aktiven Service Worker voraus. Ohne aktiven Worker wird das Promise abgewiesen.
getAll() liefert nur die Metadaten. Die eigentlichen Inhalte musst du selbst verwalten, z. B. über die Cache API. Ein Eintrag im Index garantiert nicht, dass die URL noch im Cache liegt.
Die Nutzerin kann Einträge über die Browser-Oberfläche löschen. Dann feuert im Service Worker das Event contentdelete. Das Ergebnis von getAll() ist also nur eine Momentaufnahme.
Titel und Beschreibungen kommen aus deiner eigenen Anwendung, sie können aber aus Nutzerdaten stammen. Füge sie deshalb mit textContent statt innerHTML ins DOM ein, um XSS zu vermeiden.
Die Reihenfolge der Einträge ist nicht festgelegt. Wenn du eine bestimmte Reihenfolge brauchst, sortiere selbst, z. B. nach title.

Siehe auch

ContentIndex.add() ContentIndex.delete() IDBIndex.getAll() CookieStore.getAll() FormData.getAll()