Content Index API - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Content Index API

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die Content Index API ermöglicht es Entwicklern, ihre offline verfügbaren Inhalte im Browser zu registrieren.

In diesem Artikel

Konzepte und Nutzung

Derzeit sind Offline-Webinhalte für Benutzer schwer auffindbar. Die Inhaltsindizierung ermöglicht es Entwicklern, dem Browser ihre spezifischen Offline-Inhalte mitzuteilen. Dies ermöglicht es Benutzern, verfügbare Inhalte zu entdecken und anzuzeigen, während Entwicklern die Möglichkeit gegeben wird, diese Inhalte hinzuzufügen und zu verwalten. Beispiele könnten eine Nachrichtenwebsite sein, die die neuesten Artikel im Hintergrund vorab lädt, oder eine Content-Streaming-App, die heruntergeladene Inhalte registriert.

Die Content Index API ist eine Erweiterung der Service Worker API, die es Entwicklern erlaubt, URLs und Metadaten bereits gecachter Seiten im Rahmen des aktuellen Service Workers hinzuzufügen. Der Browser kann diese Einträge dann nutzen, um dem Benutzer das Lesen im Offline-Modus zu ermöglichen. Als Entwickler können Sie diese Einträge auch innerhalb Ihrer Anwendung anzeigen.

Indizierte Einträge laufen nicht automatisch ab. Es ist ratsam, eine Schnittstelle zum Löschen von Einträgen bereitzustellen oder regelmäßig ältere Einträge zu entfernen.

Hinweis: Die API unterstützt das Indizieren von URLs, die HTML-Dokumenten entsprechen. Eine URL für eine gecachte Mediendatei kann zum Beispiel nicht direkt indiziert werden. Stattdessen müssen Sie eine URL für eine Seite bereitstellen, die Medien anzeigt und die offline funktioniert.

Schnittstellen

ContentIndex

Bietet Funktionen zum Registrieren von offline verfügbaren Inhalten.

ContentIndexEvent

Definiert das Objekt, das das contentdelete-Ereignis darstellt.

Erweiterungen zu anderen Schnittstellen

Die folgenden Ergänzungen zur ServiceWorker sind in der Content Index API-Spezifikation definiert, um einen Einstiegspunkt für die Inhaltsindizierung zu bieten.

ServiceWorkerRegistration.index Schreibgeschützt

Gibt eine Referenz auf die ContentIndex-Schnittstelle zum Indizieren gecachter Seiten zurück.

contentdelete-Ereignis

Wird ausgelöst, wenn Inhalte vom User Agent entfernt werden.

Beispiele

Alle folgenden Beispiele setzen voraus, dass ein Service Worker registriert wurde. Weitere Informationen finden Sie in der Service Worker API.

Funktionsprüfung und Schnittstellensuche

Hier erhalten wir eine Referenz zur ServiceWorkerRegistration und prüfen die index-Eigenschaft, die uns Zugriff auf die Content-Index-Schnittstelle gibt.

js
// reference registration
const registration = await navigator.serviceWorker.ready;

// feature detection
if ("index" in registration) {
  // Content Index API functionality
  const contentIndex = registration.index;
}

Hinzufügen zum Inhaltsindex

Hier deklarieren wir ein Element im korrekten Format und erstellen eine asynchrone Funktion, die die add()-Methode verwendet, um es im Inhaltsindex zu registrieren.

js
// our content
const item = {
  id: "post-1",
  url: "/posts/amet.html",
  title: "Amet consectetur adipisicing",
  description:
    "Repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.",
  icons: [
    {
      src: "/media/dark.png",
      sizes: "128x128",
      type: "image/png",
    },
  ],
  category: "article",
};

// our asynchronous function to add indexed content
async function registerContent(data) {
  const registration = await navigator.serviceWorker.ready;

  // feature detect Content Index
  if (!registration.index) {
    return;
  }

  // register content
  try {
    await registration.index.add(data);
  } catch (e) {
    console.log("Failed to register content: ", e.message);
  }
}

Abrufen von Elementen im aktuellen Index

Das folgende Beispiel zeigt eine asynchrone Funktion, die Elemente innerhalb des Inhaltsindex abruft und über jeden Eintrag iteriert, um eine Liste für die Schnittstelle zu erstellen.

js
async function createReadingList() {
  // access our service worker registration
  const registration = await navigator.serviceWorker.ready;

  // get our index entries
  const entries = await registration.index.getAll();

  // create a containing element
  const readingListElem = document.createElement("div");

  // test for entries
  if (entries.length === 0) {
    // if there are no entries, display a message
    const message = document.createElement("p");
    message.innerText =
      "You currently have no articles saved for offline reading.";

    readingListElem.append(message);
  } else {
    // if entries are present, display in a list of links to the content
    const listElem = document.createElement("ul");

    for (const entry of entries) {
      const listItem = document.createElement("li");

      const anchorElem = document.createElement("a");
      anchorElem.innerText = entry.title;
      anchorElem.setAttribute("href", entry.url);

      listElem.append(listItem);
    }

    readingListElem.append(listElem);
  }
}

Abmelden von indizierten Inhalten

Unten steht eine asynchrone Funktion, die ein Element aus dem Inhaltsindex entfernt.

js
async function unregisterContent(article) {
  // reference registration
  const registration = await navigator.serviceWorker.ready;

  // feature detect Content Index
  if (!registration.index) return;

  // unregister content from index
  await registration.index.delete(article.id);
}

Alle oben genannten Methoden sind im Rahmen des Service Workers verfügbar. Sie sind von der WorkerGlobalScope.self-Eigenschaft aus zugänglich:

js
// service worker script

self.registration.index.add(item);

self.registration.index.delete(item.id);

const contentIndexItems = self.registration.index.getAll();

Das contentdelete-Ereignis

Wenn ein Element aus der Benutzeroberfläche des User Agents entfernt wird, empfängt der Service Worker ein contentdelete-Ereignis.

js
self.addEventListener("contentdelete", (event) => {
  console.log(event.id);

  // logs content index id, which can then be used to determine what content to delete from your cache
});

Das contentdelete-Ereignis wird nur ausgelöst, wenn die Löschung durch Interaktion mit der integrierten Benutzeroberfläche des Browsers erfolgt. Es wird nicht ausgelöst, wenn die ContentIndex.delete()-Methode aufgerufen wird.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Content Index API
Interfaces
1. ContentIndex
2. ContentIndexEvent
Eigenschaften
1. ServiceWorkerRegistration.index
Events
1. ServiceWorkerGlobalScope: contentdelete