Diese Seite wurde von der Cloud Translation API übersetzt.

Offlinefähige Seiten mit der Content Indexing API indexieren

Service Worker können Browsern mitteilen, welche Seiten offline funktionieren

Jeff Posnick

Was ist die Content Index API?

Die Verwendung einer progressiven Web-App bedeutet, dass Sie auf Informationen wie Bilder, Videos, Artikel usw. zugreifen, des aktuellen Status Ihrer Netzwerkverbindung angezeigt. Technologien wie Service Worker die Cache Storage API, und IndexedDB bieten Ihnen die Bausteine zum Speichern und Bereitstellen von Daten, wenn Menschen direkt mit einer PWA interagieren. Das Erstellen einer hochwertigen Offline-PWA ist jedoch nur einen Teil der Geschichte. Wenn Nutzer nicht wissen, dass der Inhalt einer Webanwendung während sie offline sind, nutzen sie Ihre Arbeit in die Implementierung dieser Funktionalität stecken.

Dies ist ein Erkennungsproblem: Wie kann Ihre PWA Nutzer auf ihre kompatible Inhalte, damit sie verfügbare Inhalte entdecken und ansehen können? Die Die Content Index API ist eine Lösung für dieses Problem. Der entwicklerorientierte Teil dieser Lösung ist eine Erweiterung für Service Worker, mit der Entwickler URLs und Metadaten von offline-fähigen Seiten einem lokalen Index hinzufügen, der von im Browser. Diese Verbesserung ist in Chrome 84 und höher verfügbar.

Sobald der Index Inhalte aus Ihrer PWA sowie aus anderen PWAs installiert haben, wird sie wie unten dargestellt im Browser angezeigt.

Screenshot des Menüpunkts „Downloads“ auf der Seite „Neuer Tab“ in Chrome — </ph> Wählen Sie zuerst auf der Seite „Neuer Tab“ in Chrome den Menüpunkt **Downloads** aus.

</ph> Medien und Artikel, die dem Index hinzugefügt wurden, werden im **Artikel für mich**.

Außerdem kann Chrome proaktiv Inhalte empfehlen, wenn erkannt wird, Nutzer ist offline.

Die Content API ist keine alternative Möglichkeit, Inhalte im Cache zu speichern. Es ist eine Möglichkeit, Metadaten über Seiten bereitzustellen, die bereits von Ihrem Dienst im Cache gespeichert wurden sodass der Browser die Seiten genau dann anzeigen kann, die sie sich ansehen möchten. Mit der API zur Content-Indexierung können Sie die Auffindbarkeit von im Cache gespeicherter Seiten.

Beispiele ansehen

Probieren Sie am besten ein Beispiel aus, um sich mit der Content Index API vertraut zu machen. .

Achten Sie darauf, dass Sie einen unterstützten Browser und eine unterstützte Plattform verwenden. Derzeit die auf Chrome 84 oder höher unter Android beschränkt ist. Gehe zu about://version, um sie dir anzusehen welche Chrome-Version Sie verwenden.
Rufen Sie https://contentindex.dev auf.
Klicken Sie neben mindestens einem Eintrag in der Liste auf die Schaltfläche +.
Optional: Deaktivieren Sie die WLAN- und die mobile Datenverbindung Ihres Geräts oder aktivieren Sie um zu simulieren, dass Ihr Browser offline geschaltet wird.
Wählen Sie im Chrome-Menü Downloads aus und wechseln Sie zum Tab Artikel für mich.
Durchsuchen Sie die zuvor gespeicherten Inhalte.

Sie können sich die Quelle der Beispielanwendung auf GitHub ansehen.

Eine weitere Beispielanwendung, eine Scrapbook-PWA, zeigt die Verwendung der Content Index API mit der Web Share Target API. Der Code zeigt ein Verfahren zur Synchronisierung der Content Index API mit von einer Web-App gespeicherten Elementen mithilfe der Cache Storage API.

API verwenden

Damit du die API verwenden kannst, muss deine App einen Service Worker und aufrufbare URLs haben offline. Wenn Ihre Webanwendung derzeit keinen Service Worker hat, können die Workbox-Bibliotheken und eines erstellen.

Welche Arten von URLs können als offline-fähig indexiert werden?

Die API unterstützt die Indexierung von URLs, die HTML-Dokumenten entsprechen. Eine URL für ein im Cache gespeichertes kann beispielsweise nicht direkt indexiert werden. Stattdessen müssen Sie Eine URL für eine Seite, auf der Medien angezeigt werden und die offline funktioniert.

Wir empfehlen, einen „Viewer“ zu erstellen, HTML-Seite akzeptieren, die den der zugrunde liegenden Medien-URL als Suchparameter an und zeigen dann den Inhalt der -Datei, möglicherweise mit zusätzlichen Steuerelementen oder Inhalten auf der Seite.

Web-Apps können dem Inhaltsindex nur URLs hinzufügen, die sich unter der Umfang des aktuellen Service Workers. Mit anderen Worten: Eine Webanwendung kann keine URL die zu einer völlig anderen Domain gehören.

Übersicht

Die API für die Content-Indexierung unterstützt drei Vorgänge: Hinzufügen, Auflisten und um Metadaten zu entfernen. Diese Methoden werden über das neue Attribut index bereitgestellt, das wurde zum ServiceWorkerRegistration .

Der erste Schritt bei der Indexierung von Inhalten ist das Abrufen eines Verweises auf den aktuellen ServiceWorkerRegistration Die Verwendung von navigator.serviceWorker.ready ist die einfachste Methode:

const registration = await navigator.serviceWorker.ready;

// Remember to feature-detect before using the API:
if ('index' in registration) {
  // Your Content Indexing API code goes here!
}

Wenn Sie die Content Index API aus einem Service Worker aufrufen, anstatt auf einer Webseite zu platzieren, können Sie den ServiceWorkerRegistration direkt über registration. Er ist bereits definiert im Rahmen der ServiceWorkerGlobalScope.

Zum Index hinzufügen

Verwenden Sie die Methode add(), um URLs und die zugehörigen Metadaten zu indexieren. Es liegt an Sie wählen aus, wann Elemente zum Index hinzugefügt werden. Sie können den Index als Reaktion auf eine Eingabe wie z. B. das Klicken auf „Offline speichern“ Schaltfläche. Oder Sie kann jedes Mal automatisch Elemente hinzufügen, wenn Daten im Cache durch einen Mechanismus aktualisiert werden. wie regelmäßige Hintergrundsynchronisierung.

await registration.index.add({
  // Required; set to something unique within your web app.
  id: 'article-123',

  // Required; url needs to be an offline-capable HTML page.
  url: '/articles/123',

  // Required; used in user-visible lists of content.
  title: 'Article title',

  // Required; used in user-visible lists of content.
  description: 'Amazing article about things!',

  // Required; used in user-visible lists of content.
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],

  // Optional; valid categories are currently:
  // 'homepage', 'article', 'video', 'audio', or '' (default).
  category: 'article',
});

Das Hinzufügen eines Eintrags wirkt sich nur auf den Inhaltsindex aus. wird nichts hinzugefügt, cache.

Grenzfall: Rufen Sie `add()` aus dem `window`-Kontext auf, wenn Ihre Symbole auf einen `fetch`-Handler angewiesen sind.

Wenn Sie add() aufrufen, sendet Chrome eine Anfrage für jedes Symbols ein, um sicherzustellen, dass es eine Kopie des Symbols enthält, das verwendet werden kann, wenn Anzeige einer Liste indexierten Contents.

Wenn Sie add() über den window-Kontext aufrufen, also über Ihr Web löst diese Anfrage ein fetch-Ereignis für Ihren Service Worker aus.
Wenn Sie add() innerhalb Ihres Service Workers aufrufen (vielleicht innerhalb eines anderen Ereignisses) -Handler) wird durch die Anfrage nicht der fetch-Handler des Service Workers ausgelöst. Die Symbole werden direkt und ohne Beteiligung des Service Workers abgerufen. Notizen Beachten Sie dies, wenn für Ihre Symbole der fetch-Handler erforderlich ist, z. B. weil sie sind nur im lokalen Cache und nicht im Netzwerk vorhanden. Wenn ja, achten Sie darauf, Sie rufen add() nur aus dem Kontext window auf.

Indexinhalte auflisten

Die Methode getAll() gibt ein Promise für eine iterierbare Liste indexierter Einträge zurück und deren Metadaten. Die zurückgegebenen Einträge enthalten alle Daten, die mit add()

const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Elemente aus dem Index entfernen

Um ein Element aus dem Index zu entfernen, rufen Sie delete() mit dem id des Elements auf, Entfernen:

await registration.index.delete('article-123');

Der Aufruf von delete() wirkt sich nur auf den Index aus. Aus dem Feld cache.

Löschereignisse von Nutzern verarbeiten

Wenn der Browser den indexierten Content anzeigt, kann er einen eigenen Nutzer Löschen, über den Nutzer angeben können, dass sie zuvor indexierten Content abgeschlossen haben. So wird die Löschung sieht in Chrome 80 aus:

Wenn jemand diesen Menüpunkt auswählt, erhält der Service Worker Ihrer Webanwendung ein contentdelete-Ereignis. Die Verarbeitung dieses Ereignisses ist zwar optional, bietet aber Wahrscheinlichkeit, dass Ihr Service Worker „aufräumen“ z. B. lokal im Cache gespeicherte Medien, Dateien, die jemand als erledigt markiert hat.

Sie müssen registration.index.delete() nicht in Ihrem contentdelete-Handler; Wenn das Ereignis ausgelöst wurde, ist der relevante Index der Löschvorgang wurde bereits vom Browser durchgeführt.

self.addEventListener('contentdelete', (event) => {
  // event.id will correspond to the id value used
  // when the indexed content was added.
  // Use that value to determine what content, if any,
  // to delete from wherever your app stores it—usually
  // the Cache Storage API or perhaps IndexedDB.
});

Hinweis: Das Ereignis contentdelete wird nur ausgelöst, wenn der Löschvorgang folgende Gründe hat: mit der integrierten Benutzeroberfläche des Browsers. Es wird nicht ausgelöst, wenn registration.index.delete() wird aufgerufen. Wenn Ihre Webanwendung den Index auslöst mit dieser API-Methode löschen, sollte auch im Cache gespeicherte .

Feedback zum API-Design

Gibt es etwas an der API, das umständlich ist oder nicht wie erwartet funktioniert? Oder fehlen noch Teile, die du zur Umsetzung deiner Idee benötigst?

Du kannst ein Problem im Erläuterungs-GitHub-Repository zur Content API-Erklärung melden oder Feedback geben. auf ein bestehendes Problem.

Probleme bei der Implementierung?

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden?

Melden Sie den Fehler unter https://new.crbug.com. Genauso viele wie möglich, einfache Anweisungen zum Reproduzieren und Festlegen von Komponenten. an Blink>ContentIndexing.

Möchten Sie die API verwenden?

Möchten Sie die Content Index API in Ihrer Webanwendung verwenden? Deine öffentliche Unterstützung hilft Chrome dabei, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig der Browser ist um sie zu unterstützen.

Sende einen Tweet mit dem Hashtag an @ChromiumDev #ContentIndexingAPI und Informationen darüber, wo und wie Sie es nutzen.

Welche Auswirkungen hat die Inhaltsindexierung auf Sicherheit und Datenschutz?

Sieh dir die Antworten an. als Antwort auf den Fragebogen zu Sicherheit und Datenschutz des W3C bereitgestellt. Wenn Sie Sollten Sie weitere Fragen haben, können Sie über das GitHub-Repository des Projekts eine Diskussion starten.

Hero-Image von Maksym Kaharlytskyi auf Unsplash