Indizieren Sie Ihre Seiten offline mit der Content Indexing API

Permitir que los trabajadores del servicio le digan a los Browser qué páginas funcionan sin conexión

12. Dezember 2019
Aktualisiert 26. Mai 2020

¿Qué es la API von Indizierung von Inhalt?

Verwendung einer progressive Web-App Dies bedeutet, dass Sie unabhängig vom aktuellen Status Ihrer Netzwerkverbindung Zugriff auf die Informationen haben, die den Menschen wichtig sind - Bilder, Videos, Artikel und mehr. Technologien wie Servicemitarbeiter, das Caching-APIy IndexedDB
proporcionarle los componentes básicos para almacenar y entregar datos cuando las Personen interactúan directamente con una PWA. Pero construir una PWA de alta calidad, primero sin conexión, es solo una parte de la historia. Si las personas no se dan cuenta de que el contenido de una aplicación Netz está disponible mientras están desconectadas, no aprovecharán al máximo el trabajo que dedicó a implementar esa funcionalidad.

Das ist ein Entdeckung problema; ¿Cómo puede su PWA hacer que los usuarios conozcan su contenido sin conexión para que puedan descubrir y ver lo que está disponible? La API de indexación de contenido es una solución a este problema. La parte de esta solución orientada al desarrollador es una extensión para los trabajadores del servicio, que permite a los desarrolladores agregar Url y Metadaten de páginas con capacidad sin conexión a un índice local mantenido por el Browser. Esa mejora está disponible en Chrome 84 y versiones posteriores.

Sobald der Index mit dem Inhalt Ihrer PWA sowie allen anderen installierten PWAs gefüllt ist, zeigt der Browser ihn wie unten gezeigt an.

Además, Chrome puede recomendar contenido de forma proactiva cuando detecta que un Nutzername está desconectado.

Die Inhaltsindizierungs-API no es una forma alternativa de almacenar contenido en Zwischenspeicher. Auf diese Weise können Metadaten zu Seiten bereitgestellt werden, die Ihr Servicemitarbeiter bereits zwischengespeichert hat, sodass der Browser diese Seiten anzeigen kann, wenn Personen sie wahrscheinlich sehen möchten. Die Inhaltsindizierungs-API hilft bei Entdeckung zwischengespeicherte Seiten.

Sehen Sie es in Aktion

Der beste Weg, sich mit der Inhaltsindizierungs-API vertraut zu machen, besteht darin, eine Beispielanwendung auszuprobieren.

1. Stellen Sie sicher, dass Sie einen unterstützten Browser und eine unterstützte Plattform verwenden. Derzeit ist das auf beschränkt Chrome 84 oder höher auf Android. Gehen chrome://version um zu sehen, welche Version von Chrome Sie ausführen.
2. Besuchen https://contentindex.dev
3. Klicke auf das + neben einem oder mehreren Elementen in der Liste.
4. (Optional) Schalten Sie die WLAN- und mobile Datenverbindung Ihres Geräts aus oder aktivieren Sie den Flugzeugmodus, um so zu tun, als wäre Ihr Browser offline.
5. Wählen Downloads im Chrome-Menü und wechseln Sie zu Artikel für Sie Zunge.
6. Durchsuchen Sie den zuvor gespeicherten Inhalt.

Du kannst sehen die Quelle der Beispiel-App auf GitHub.

Eine weitere Beispiel-App, a Sammelalbum PWAveranschaulicht die Verwendung der Inhaltsindizierungs-API mit der Web Share-Ziel-API. das Der Code demonstriert eine Technik
um die Inhaltsindizierungs-API mit Elementen zu synchronisieren, die von einer Webanwendung mithilfe von gespeichert wurden Caching-API.

Verwenden der API

Um die API verwenden zu können, muss Ihre Anwendung über offline durchsuchbare URLs und einen Service Worker verfügen. Wenn Ihre Webanwendung derzeit keinen Servicemitarbeiter hat, wird die Workbox-Bibliotheken es kann das Erstellen eines vereinfachen.

Welche Art von URLs kann als offline indiziert werden?

La API admite la indexación de URL correspondientes a documentos HTML. Una URL para un archivo de medios en caché, por ejemplo, no se puede indexar directamente. En su lugar, debe proporcionar una URL para una página que muestre medios y que funcione sin conexión.

Ein empfohlenes Muster besteht darin, eine HTML-Seite "Viewer" zu erstellen, die die URL des zugrunde liegenden Mediums als Abfrageparameter akzeptiert und dann den Inhalt der Datei anzeigt, möglicherweise mit zusätzlichen Steuerelementen oder Inhalten auf der Seite.

Webanwendungen können nur URLs zum Inhaltsindex hinzufügen, die sich unter befinden
Umfang
del trabajador del servicio actual. En otras palabras, una aplicación web no puede agregar una URL que pertenezca a un Domain completamente diferente en el índice de contenido.

Übersicht

Die Inhaltsindizierungs-API unterstützt drei Vorgänge: Hinzufügen, Auflisten und Löschen von Metadaten. Diese Methoden werden aus einer neuen Eigenschaft verfügbar gemacht. Index, die dem hinzugefügt wurde
ServiceWorkerRegistration
Schnittstelle.

Der erste Schritt bei der Indizierung von Inhalten besteht darin, einen Verweis auf die zu erhalten
ServiceWorkerRegistration. Verwenden von navigator.serviceWorker.ready Ist der einfachste Weg:

const Anmeldung = erwarten Navigator.serviceWorker.bereit;

wenn ('index' im Anmeldung) {
}

Wenn Sie die Inhaltsindizierungs-API nicht von einer Webseite, sondern von einem Service Worker aus aufrufen, können Sie auf die verweisen ServiceWorkerRegistration
direkt durch Anmeldung. Ich gehe zu ist bereits definiert
Im Rahmen des ServiceWorkerGlobalScope.

Hinzufügen zum Index

Verwenden Sie die hinzufügen () Methode zum Indizieren der URL und der zugehörigen Metadaten. Sie können selbst entscheiden, wann die Elemente zum Index hinzugefügt werden. Möglicherweise möchten Sie den Index als Antwort auf einen Eintrag hinzufügen, z. B. indem Sie auf die Schaltfläche "Offline speichern" klicken. Oder Sie können Elemente automatisch jedes Mal hinzufügen, wenn die zwischengespeicherten Daten mithilfe eines Mechanismus wie aktualisiert werden periodische Hintergrundsynchronisation.

erwarten Anmeldung.Index.hinzufügen({
gehen: 'article-123',

URL: '/articles/123',
launchUrl: '/articles/123',

Titel: 'Article title',

Beschreibung: 'Amazing article about things!',

Symbole: [{
src: '/img/article-123.png',
Größen: '64x64',
Art: 'image/png',
}],

Kategorie: 'article',
});

Das Hinzufügen eines Eintrags wirkt sich nur auf das Inhaltsverzeichnis aus. fügt nichts hinzu
Zwischenspeicher.

Randfall: Anruf hinzufügen () von Fenster Kontext, wenn Ihre Symbole auf a basieren holen Manipulator

Wenn du anrufst hinzufügen ()Chrome fragt nach der URL jedes Symbols, um sicherzustellen, dass Sie eine Kopie des Symbols haben, die Sie beim Anzeigen einer Liste indizierter Inhalte verwenden können.

• Wenn Sie anrufen hinzufügen () von dem Fenster Kontext (mit anderen Worten, von Ihrer Webseite), diese Anfrage löst a aus holen Veranstaltung en su trabajador de servicio.

• Wenn Sie anrufen hinzufügen () innerhalb Ihres Servicemitarbeiters (möglicherweise innerhalb eines anderen Ereignishandlers) die Anfrage nein Servicemitarbeiter auslösen holen Manipulator. Die Symbole werden direkt abgerufen, ohne dass ein Servicemitarbeiter beteiligt ist. Denken Sie daran, wenn Ihre Symbole von Ihren abhängen holen Handler, möglicherweise weil sie nur im lokalen Cache und nicht im Netzwerk vorhanden sind. Wenn dies der Fall ist, rufen Sie nur an hinzufügen () von dem Fenster Kontext.

Auflistung der Indexinhalte

das Nimm alle () Die Methode gibt das Versprechen einer iterierbaren Liste indizierter Einträge und ihrer Metadaten zurück. Die zurückgegebenen Einträge enthalten alle mit gespeicherten Daten
hinzufügen ().

const Einträge = erwarten Anmeldung.Index.getAll();
zum (const entry of Einträge) {
}

Entfernen Sie Elemente aus dem Index

Rufen Sie auf, um ein Element aus dem Index zu entfernen delete () mit dem gehen des zu entfernenden Gegenstands:

erwarten Anmeldung.Index.delete('article-123');

Berufung delete () es wirkt sich nur auf den Index aus. Es wird nichts aus dem entfernt
Zwischenspeicher.

Behandeln eines Benutzerlöschereignisses

Cuando el navegador muestra el contenido indexado, puede incluir su propia Benutzeroberfläche mit einer Beseitigen, abschütteln Menüpunkt, mit dem Benutzer angeben können, dass sie zuvor indizierte Inhalte nicht mehr angezeigt haben. So sieht die Löschoberfläche in Chrome 80 aus:

Wenn jemand diesen Menüpunkt auswählt, erhält Ihr Webanwendungsdienstmitarbeiter eine contentdelete Veranstaltung. Die Behandlung dieses Ereignisses ist zwar optional, bietet Ihrem Servicemitarbeiter jedoch die Möglichkeit, Inhalte wie lokal zwischengespeicherte Mediendateien zu "bereinigen", von denen jemand angegeben hat, dass sie fertig sind.

Sie müssen nicht anrufen Registration.index.delete () in deinem
contentdelete Manipulator; Wenn das Ereignis ausgelöst wurde, hat der Browser bereits das Entfernen des entsprechenden Index durchgeführt.

selbst.addEventListener('contentdelete', (Veranstaltung) => {
});

Kommentare zum API-Design

Gibt es etwas in der API, das umständlich ist oder nicht wie erwartet funktioniert? Oder fehlen Teile, die Sie benötigen, um Ihre Idee umzusetzen?

Datei ein Problem in der GitHub-Repository, das die Inhaltsindizierungs-API erklärtoder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.

Problem mit der Implementierung?

Haben Sie einen Fehler bei der Chrome-Implementierung gefunden?

Einen Fehler einreichen https://new.crbug.com. Geben Sie so viele Details wie möglich an, einfache Anweisungen zum Reproduzieren und Einrichten Komponenten (bearbeiten)
zu Blinken> ContentIndexing.

Planen Sie die Verwendung der API?

Planen Sie die Verwendung der Inhaltsindizierungs-API in Ihrer Webanwendung? Ihr öffentlicher Support hilft Chrome bei der Priorisierung von Funktionen und zeigt anderen Browser-Anbietern, wie wichtig es ist, diese zu unterstützen.

• Sende ein Tweet zu @Cromodev mit
  #ContentIndexingAPI und Details darüber, wo und wie Sie es verwenden.

Welche Auswirkungen hat die Indizierung von Inhalten auf Sicherheit und Datenschutz?

Überprüfen die Antworten
proporcionado en respuesta a los W3C Sicherheits- und Datenschutzfragebogen. Wenn Sie weitere Fragen haben, starten Sie eine Diskussion über die GitHub-Repository.

Maksym Kaharlytskyis Heldenbild auf Unsplash.