ContentIndex

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 ContentIndex Schnittstelle der Content Index API ermöglicht es Entwicklern, ihre offline-fähigen Inhalte beim Browser zu registrieren.

Instanzeigenschaften

Es gibt keine Eigenschaften dieser Schnittstelle.

Instanzmethoden

ContentIndex.add()

Registriert ein Element im Content Index.

ContentIndex.delete()

Hebt die Registrierung eines Elements aus den derzeit indexierten Inhalten auf.

ContentIndex.getAll()

Gibt ein Promise zurück, das mit einer iterierbaren Liste von Einträgen des Inhaltsindex aufgelöst wird.

Beispiele

Funktionsprüfung und Zugriff auf die Schnittstelle

Hier erhalten wir eine Referenz zu der ServiceWorkerRegistration und überprüfen die index Eigenschaft, die uns Zugang zur Content Index-Schnittstelle gewährt.

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 Content Index

Hier deklarieren wir ein Element im korrekten Format und erstellen eine asynchrone Funktion, die die add() Methode verwendet, um es im Content Index 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 untenstehende Beispiel zeigt eine asynchrone Funktion, die Elemente im Content Index 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);
  }
}

Austragen indexierter Inhalte

Unten befindet sich eine asynchrone Funktion, die ein Element aus dem Content Index 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 beschriebenen Methoden stehen innerhalb des Geltungsbereichs des Service Workers zur Verfügung. Sie sind über die WorkerGlobalScope.self Eigenschaft zugänglich:

js
// service worker script

self.registration.index.add(item);

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

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

Spezifikationen

Specification
Content Index
# content-index

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch