Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Content Index API
Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Hinweis: Diese Funktion ist inWeb Workers verfügbar.
DieContent Index API ermöglicht es Entwicklern, ihre offline verfügbaren Inhalte im Browser zu registrieren.
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 derService 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
ContentIndexExperimentellBietet Funktionen zum Registrieren von offline verfügbaren Inhalten.
ContentIndexEventExperimentellDefiniert das Objekt, das das
contentdelete-Ereignis darstellt.
Erweiterungen zu anderen Schnittstellen
Die folgenden Ergänzungen zurServiceWorker sind in der Content Index API-Spezifikation definiert, um einen Einstiegspunkt für die Inhaltsindizierung zu bieten.
ServiceWorkerRegistration.indexSchreibgeschütztExperimentellGibt eine Referenz auf die
ContentIndex-Schnittstelle zum Indizieren gecachter Seiten zurück.contentdelete-EreignisExperimentellWird 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 derService Worker API.
Funktionsprüfung und Schnittstellensuche
Hier erhalten wir eine Referenz zurServiceWorkerRegistration und prüfen dieindex-Eigenschaft, die uns Zugriff auf die Content-Index-Schnittstelle gibt.
// reference registrationconst registration = await navigator.serviceWorker.ready;// feature detectionif ("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 dieadd()-Methode verwendet, um es im Inhaltsindex zu registrieren.
// our contentconst 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 contentasync 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.
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.
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 desService Workers verfügbar. Sie sind von derWorkerGlobalScope.self-Eigenschaft aus zugänglich:
// service worker scriptself.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 eincontentdelete-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});Dascontentdelete-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 dieContentIndex.delete()-Methode aufgerufen wird.
Spezifikationen
| Specification |
|---|
| Content Index |