Indexez vos pages hors ligne avec l'API d'indexation de contenu

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

12 déc.2019
Mise à jour 26 mai 2020

¿Qué es la API de indexage de Contenu?

Utilisant un application web progressive cela signifie avoir accès aux informations qui intéressent les gens - images, vidéos, articles, etc. - quel que soit l'état actuel de votre connexion réseau. Des technologies comme travailleurs des services, les API de mise en cachey IndexedDB
proporcionarle los componentes básicos para almacenar y entregar datos cuando las gens 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 la toile está disponible mientras están desconectadas, no aprovecharán al máximo el trabajo que dedicó a implementar esa funcionalidad.

C'est un Découverte 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 métadonnées de páginas con capacidad sin conexión a un índice local mantenido por el le navigateur. Esa mejora está disponible en Chrome 84 y versiones posteriores.

Une fois que l'index est rempli avec le contenu de votre PWA, ainsi que de tout autre PWA installé, le navigateur l'affichera comme indiqué ci-dessous.

Además, Chrome puede recomendar contenido de forma proactiva cuando detecta que un Nom d'utilisateur está desconectado.

L'API d'indexation de contenu no es una forma alternativa de almacenar contenido en cache. C'est un moyen de fournir des métadonnées sur les pages que votre technicien de service met déjà en cache, afin que le navigateur puisse afficher ces pages lorsque les gens sont susceptibles de vouloir les voir. L'API d'indexation de contenu aide à Découverte pages mises en cache.

Voyez-le en action

La meilleure façon de se familiariser avec l'API d'indexation de contenu est d'essayer un exemple d'application.

1. Assurez-vous que vous utilisez un navigateur et une plate-forme pris en charge. Actuellement, cela se limite à Chrome 84 ou version ultérieure sur Android. Aller chrome://version pour voir quelle version de Chrome vous utilisez.
2. Visiter https://contentindex.dev
3. Clique sur le + à côté d'un ou plusieurs éléments de la liste.
4. (Facultatif) Désactivez la connexion Wi-Fi et de données mobiles de votre appareil, ou activez le mode avion pour faire semblant que votre navigateur est hors ligne.
5. Choisir téléchargements dans le menu Chrome et passez à Articles pour vous langue.
6. Parcourez le contenu que vous avez enregistré précédemment.

Tu peux voir la source de l'exemple d'application sur GitHub.

Un autre exemple d'application, un Album PWA, illustre l'utilisation de l'API d'indexation de contenu avec l'API Web Share Target. Les le code montre une technique
pour garder l'API d'indexation de contenu synchronisée avec les éléments stockés par une application Web à l'aide de API de mise en cache.

Utilisation de l'API

Pour utiliser l'API, votre application doit disposer d'URL navigables hors connexion et d'un service worker. Si votre application Web ne dispose actuellement d'aucun technicien de service, le Bibliothèques de boîtes de travail cela peut simplifier la création d'un.

Quels types d'URL peuvent être indexées comme étant hors ligne?

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.

Un modèle recommandé consiste à créer une page HTML "visualiseur" qui peut accepter l'URL du média sous-jacent en tant que paramètre de requête, puis afficher le contenu du fichier, éventuellement avec des contrôles ou du contenu supplémentaires sur la page.

Les applications Web peuvent uniquement ajouter des URL à l'index de contenu qui se trouvent sous le
portée
del trabajador del servicio actual. En otras palabras, una aplicación web no puede agregar una URL que pertenezca a un domaine completamente diferente en el índice de contenido.

Vue d'ensemble

L'API d'indexation de contenu prend en charge trois opérations: ajouter, répertorier et supprimer des métadonnées. Ces méthodes sont exposées à partir d'une nouvelle propriété, indice, qui a été ajouté à la
ServiceWorkerInscription
Interface.

La première étape de l'indexation du contenu consiste à obtenir une référence au
ServiceWorkerInscription. Utilisant navigator.serviceWorker.ready Est le moyen le plus simple:

const enregistrement = attendre navigateur.serviceWorker.prêt;

si ('index' dans enregistrement) {
}

Si vous appelez l'API d'indexation de contenu depuis un service worker plutôt que depuis une page Web, vous pouvez consulter le ServiceWorkerInscription
directement à travers enregistrement. Aller à est déjà défini
en tant que membre de ServiceWorkerGlobalScope.

Ajout à l'index

Utilisez le ajouter () méthode pour indexer l'URL et ses métadonnées associées. C'est à vous de choisir quand les éléments sont ajoutés à l'index. Vous souhaiterez peut-être ajouter à l'index en réponse à une entrée, par exemple en cliquant sur le bouton «enregistrer hors ligne». Ou vous pouvez ajouter des éléments automatiquement chaque fois que les données mises en cache sont mises à jour à l'aide d'un mécanisme tel que synchronisation périodique en arrière-plan.

attendre enregistrement.indice.ajouter({
va: 'article-123',

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

Titre: 'Article title',

la description: 'Amazing article about things!',

Icônes: [{
src: '/img/article-123.png',
les tailles: '64x64',
taper: 'image/png',
}],

Catégorie: 'article',
});

L'ajout d'une entrée n'affecte que la table des matières; n'ajoute rien à
cache.

Cas de bord: appel ajouter () de la fenêtre contexte si vos icônes sont basées sur un aller chercher manipulateur

Quand vous appelez ajouter ()Chrome demandera l'URL de chaque icône pour s'assurer que vous disposez d'une copie de l'icône à utiliser lors de l'affichage d'une liste de contenu indexé.

• Si vous appelez ajouter () depuis le la fenêtre contexte (en d'autres termes, à partir de votre page web), cette requête déclenchera un aller chercher un événement en su trabajador de servicio.

• Si vous appelez ajouter () à l'intérieur de votre service worker (peut-être dans un autre gestionnaire d'événements), la requête non déclencheur de service worker aller chercher manipulateur. Les icônes seront récupérées directement, sans l'intervention d'aucun technicien de service. Gardez cela à l'esprit si vos icônes dépendent de votre aller chercher gestionnaire, peut-être parce qu'ils n'existent que dans le cache local et non sur le réseau. Si c'est le cas, assurez-vous d'appeler uniquement ajouter () depuis le la fenêtre le contexte.

Indexer la liste du contenu

Les Avoir tout () La méthode renvoie la promesse d'une liste itérative d'entrées indexées et de leurs métadonnées. Les entrées renvoyées contiendront toutes les données enregistrées avec
ajouter ().

const entrées = attendre enregistrement.indice.getAll();
pour (const entry of entrées) {
}

Supprimer des éléments de l'index

Pour supprimer un élément de l'index, appelez effacer () avec lui va de l'élément à supprimer:

attendre enregistrement.indice.delete('article-123');

Vocation effacer () il n'affecte que l'index. Il ne supprime rien de la
cache.

Gestion d'un événement de suppression d'utilisateur

Cuando el navegador muestra el contenido indexado, puede incluir su propia interface utilisateur avec un Se débarrasser de élément de menu, donnant aux utilisateurs la possibilité d'indiquer qu'ils ont fini de visionner le contenu précédemment indexé. Voici à quoi ressemble l'interface de suppression dans Chrome 80:

Lorsque quelqu'un sélectionne cet élément de menu, votre agent de service d'application Web recevra un contentdelete un événement. Bien que la gestion de cet événement soit facultative, elle donne à votre technicien de service la possibilité de «nettoyer» le contenu, tel que les fichiers multimédias mis en cache localement, que quelqu'un a indiqué avoir terminé.

Tu n'as pas besoin d'appeler registration.index.delete () à l'intérieur de votre
contentdelete manipulateur; si l'événement a été déclenché, le navigateur a déjà effectué la suppression de l'index correspondant.

soi.addEventListener('contentdelete', (un événement) => {
});

Commentaires sur la conception de l'API

Y a-t-il quelque chose dans l'API qui est gênant ou qui ne fonctionne pas comme prévu? Ou y a-t-il des pièces manquantes dont vous avez besoin pour mettre en œuvre votre idée?

Signaler un problème dans le Dépôt GitHub expliquant l'API d'indexation de contenuou ajoutez vos réflexions à un problème existant.

Problème avec la mise en œuvre?

Vous avez trouvé un bogue avec la mise en œuvre de Chrome?

Signaler un bogue dans https://new.crbug.com. Incluez autant de détails que possible, des instructions simples à reproduire et à configurer Composants (modifier)
à Clignoter> Indexer le contenu.

Vous prévoyez d'utiliser l'API?

Vous envisagez d'utiliser l'API d'indexation de contenu dans votre application Web? Votre assistance publique aide Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est important de les prendre en charge.

• Envoyer un tweeter à @Cromodev avec
  #ContentIndexingAPI et des détails sur où et comment vous l'utilisez.

Quelles sont les implications de l'indexation de contenu sur la sécurité et la confidentialité?

Vérifier réponses
proporcionado en respuesta a los W3C Questionnaire sur la sécurité et la confidentialité. Si vous avez d'autres questions, lancez une discussion via le Dépôt GitHub.

L'image du héros de Maksym Kaharlytskyi sur Unsplash.