Content Index API

Konzepte und Verwendung

Derzeit ist offline Web-Inhalt für Benutzer nicht leicht auffindbar. Durch die Inhaltsindexierung können Entwickler dem Browser ihre spezifischen Offline-Inhalte mitteilen. Dies ermöglicht es Benutzern, verfügbare Inhalte zu entdecken und anzuzeigen, während Entwickler die Möglichkeit erhalten, diese Inhalte hinzuzufügen und zu verwalten. Beispiele könnten eine Nachrichten-Website sein, die die neuesten Artikel im Hintergrund vorlädt, oder eine Content-Streaming-App, die heruntergeladene Inhalte registriert.

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

Indizierte Einträge laufen nicht automatisch ab. Es ist eine gute Praxis, eine Oberfläche zum Entfernen von Einträgen bereitzustellen oder ältere Einträge regelmäßig zu entfernen.

Schnittstellen

ContentIndex

Bietet Funktionalität, um offline verfügbare Inhalte zu registrieren.

ContentIndexEvent

Definiert das Objekt, das das contentdelete-Ereignis repräsentiert.

Erweiterungen zu anderen Schnittstellen

Die folgenden Ergänzungen zur ServiceWorker wurden im Content Index API-Spezifikationsentwurf spezifiziert, um einen Einstiegspunkt für die Inhaltsindexierung bereitzustellen.

ServiceWorkerRegistration.index Schreibgeschützt

Gibt eine Referenz auf die ContentIndex-Schnittstelle zur Indizierung zwischengespeicherter Seiten zurück.

contentdelete-Ereignis

Wird ausgelöst, wenn Inhalte vom Benutzeragenten entfernt werden.

Beispiele

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

Feature-Erkennung und Schnittstellenzugriff

Hier erhalten wir eine Referenz auf die ServiceWorkerRegistration und prüfen dann, ob die index-Eigenschaft vorhanden ist, die uns Zugang zur Content-Index-Schnittstelle gewährt.

// 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 richtigen Format und erstellen eine asynchrone Funktion, die die add()-Methode verwendet, um es dem Inhaltsindex hinzuzufügen.

// 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 im Inhaltsindex abruft und über jeden Eintrag iteriert, um eine Liste für die Schnittstelle zu erstellen.

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);
  }
}

Löschen von indizierten Inhalten

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

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 Geltungsbereich des Service Workers verfügbar. Sie sind über die WorkerGlobalScope.self-Eigenschaft zugänglich:

// 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 Benutzeragenten-Schnittstelle entfernt wird, empfängt der Service Worker ein contentdelete-Ereignis.

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 aufgrund der Interaktion mit der integrierten Benutzeroberfläche des Browsers erfolgt. Es wird nicht ausgelöst, wenn die ContentIndex.delete()-Methode aufgerufen wird.

Spezifikationen

Browser-Kompatibilität

api.ContentIndex

api.ServiceWorkerRegistration.index

Siehe auch

• Ein einführender Artikel zur Content Index API
• Service Worker API, zusammen mit Informationen zu Cache und CacheStorage