Indexer vos pages hors connexion avec l'API Content Indexing

Permettre aux service workers d'indiquer aux navigateurs les pages qui fonctionnent hors connexion

Qu'est-ce que l'API Content Indexing ?

L'utilisation d'une application Web progressive implique d'avoir accès aux informations qui intéressent les internautes (images, vidéos, articles, etc.), quels que soient de l'état actuel de votre connexion réseau. Les technologies telles que les service workers, l'API Cache Storage, et IndexedDB vous fournir les éléments de base pour stocker et diffuser des données lorsque les utilisateurs interagissent directement avec une PWA. Mais créer une PWA de haute qualité, orientée hors connexion, qu'une partie de l'histoire. Si les individus ne réalisent pas que le contenu d'une application web est disponibles hors connexion, ils ne tireront pas pleinement parti du travail que vous à mettre en œuvre cette fonctionnalité.

Il s'agit d'un problème de découverte. comment votre PWA peut-elle informer les utilisateurs disponibles hors connexion pour qu'ils puissent découvrir et visionner les contenus disponibles ? La L'API Content Indexing constitue une solution à ce problème. La partie destinée aux développeurs de cette solution est une extension des service workers qui permet aux développeurs de d'ajouter les URL et les métadonnées des pages accessibles hors connexion à un index local géré par le navigateur. Cette amélioration est disponible dans Chrome 84 et versions ultérieures.

Une fois l'index rempli avec le contenu de votre PWA, ainsi que toute autre les PWA installées, elles sont présentées par le navigateur comme indiqué ci-dessous.

<ph type="x-smartling-placeholder">
</ph> Capture d&#39;écran de l&#39;élément de menu &quot;Téléchargements&quot; sur la page &quot;Nouvel onglet&quot; de Chrome. <ph type="x-smartling-placeholder">
</ph> Tout d'abord, sélectionnez l'élément de menu Téléchargements sur la page "Nouvel onglet" de Chrome.
<ph type="x-smartling-placeholder">
</ph> Médias et articles ajoutés à l&#39;index. <ph type="x-smartling-placeholder">
</ph> Les médias et les articles ajoutés à l'index s'afficheront dans le Articles pour vous.

De plus, Chrome peut recommander des contenus de façon proactive lorsqu'il détecte qu'un l'utilisateur est hors connexion.

L'API Content Indexing ne constitue pas une autre méthode de mise en cache du contenu. Il est un moyen de fournir des métadonnées sur les pages déjà mises en cache par votre service afin que le navigateur puisse les afficher au moment opportun vous souhaitez les voir. L'API Content Indexing contribue à la visibilité des les pages mises en cache.

Démonstration

Le meilleur moyen de vous familiariser avec l'API Content Indexing est d'essayer un exemple application.

  1. Vérifiez que vous utilisez un navigateur et une plate-forme compatibles. Actuellement, est limité à Chrome 84 ou version ultérieure sur Android. Accédez à about://version pour en savoir plus la version de Chrome que vous utilisez.
  2. Accédez à https://contentindex.dev.
  3. Cliquez sur le bouton + à côté d'un ou de plusieurs éléments de la liste.
  4. (Facultatif) Désactivez la connexion Wi-Fi et la connexion de données mobiles de votre appareil, ou activez mode Avion pour simuler la mise hors connexion de votre navigateur.
  5. Sélectionnez Téléchargements dans le menu de Chrome, puis accédez à l'onglet Articles pour vous.
  6. Parcourez le contenu que vous avez enregistré précédemment.

Vous pouvez afficher la source de l'exemple d'application sur GitHub.

Un autre exemple d'application, une PWA de scrapbook, illustre l'utilisation de l'API Content Indexing avec l'API Web Share Target. Le code illustre une technique. qui permet de synchroniser l'API Content Indexing avec les éléments stockés par une application Web à l'aide de l'API Cache Storage.

Utilisation de l'API

Pour que vous puissiez utiliser l'API, votre application doit disposer d'un service worker et d'URL navigables hors connexion. Si votre application Web n'a pas de service worker, les bibliothèques Workbox peuvent simplifier en créant une.

Quels types d'URL peuvent être indexés comme accessibles hors connexion ?

L'API prend en charge l'indexation des URL correspondant à des documents HTML. L'URL d'une mise en cache fichier multimédia, par exemple, ne peut pas être indexé directement. Au lieu de cela, vous devez fournir L'URL d'une page qui affiche du contenu multimédia et qui fonctionne hors connexion.

Nous vous recommandons de créer un lecteur page HTML pouvant accepter le l'URL multimédia sous-jacente en tant que paramètre de requête, puis afficher le contenu de la et éventuellement des commandes ou du contenu supplémentaires sur la page.

Les applications Web ne peuvent ajouter à l'index de contenu que des URL situées sous portée du service worker actuel. En d'autres termes, une application Web n'a pas pu ajouter d'URL appartenant à un domaine complètement différent dans l'index de contenu.

Présentation

L'API Content Indexing accepte trois opérations: l'ajout, l'affichage de fiches et en supprimant les métadonnées. Ces méthodes sont exposées à partir d'une nouvelle propriété, index, qui a été ajouté à la section ServiceWorkerRegistration de commande.

La première étape de l'indexation du contenu consiste à faire référence ServiceWorkerRegistration L'utilisation de navigator.serviceWorker.ready est la méthode la plus simple:

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!
}

Si vous appelez l'API Content Indexing depuis un service worker, plutôt que dans une page Web, reportez-vous au ServiceWorkerRegistration directement via registration. Il est déjà défini. dans le cadre de l'ServiceWorkerGlobalScope.

Ajouter à l'index

Utilisez la méthode add() pour indexer les URL et les métadonnées associées. C'est à vous de vous permet de choisir à quel moment les éléments sont ajoutés à l'index. Vous pouvez ajouter en réponse à une entrée, par exemple en cliquant sur "Enregistrer hors connexion" . Ou vous peut ajouter des éléments automatiquement chaque fois que des données mises en cache sont mises à jour par le biais d'un mécanisme comme la synchronisation périodique en arrière-plan.

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

L'ajout d'une entrée n'affecte que l'index de contenu. cela n'ajoute rien à la cache.

Cas particulier: appelez add() à partir du contexte window si vos icônes dépendent d'un gestionnaire fetch.

Lorsque vous appelez add(), Chrome envoie une demande pour l'URL de chaque icône pour s'assurer qu'il existe bien une copie de l'icône à utiliser pour afficher une liste de contenus indexés.

  • Si vous appelez add() à partir du contexte window (en d'autres termes, depuis votre navigateur Web) ), cette requête déclenche un événement fetch sur votre service worker.

  • Si vous appelez add() dans votre service worker (peut-être dans un autre événement la requête ne déclenche pas le gestionnaire fetch du service worker. Les icônes seront récupérées directement, sans aucune intervention de la part d'un service worker. Conserver à l'esprit si vos icônes s'appuient sur votre gestionnaire fetch, peut-être parce qu'elles n'existent que dans le cache local et non sur le réseau. Si c’est le cas, assurez-vous que vous n'appelez add() qu'à partir du contexte window.

Répertorier le contenu de l'index

La méthode getAll() renvoie une promesse pour une liste itérable d'entrées indexées. et leurs métadonnées. Les entrées renvoyées contiendront toutes les données enregistrées avec add()

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

Supprimer des éléments de l'index

Pour supprimer un élément de l'index, appelez delete() avec le id de l'élément pour supprimer:

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

L'appel de delete() n'affecte que l'index. Elle ne supprime rien du cache.

Gérer un événement de suppression d'utilisateur

Lorsque le navigateur affiche le contenu indexé, il peut inclure son propre utilisateur avec un élément de menu Supprimer, qui permet aux utilisateurs d'indiquer qu'ils n'ont plus accès au contenu indexé précédemment. C'est ainsi que la suppression interface dans Chrome 80:

Élément de menu &quot;Supprimer&quot;.

Lorsqu'un utilisateur sélectionne cet élément de menu, le service worker de votre application Web reçoit un événement contentdelete. Bien que la gestion de cet événement soit facultative, elle fournit une le risque que votre service worker "nettoie" du contenu, comme les médias mis en cache localement les fichiers que quelqu'un a indiqués qu'ils n'en ont plus.

Vous n'avez pas besoin d'appeler registration.index.delete() dans votre contentdelete manager; si l'événement a été déclenché, l'index la suppression a déjà été effectuée par le navigateur.

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

Commentaires sur la conception de l'API

Y a-t-il un aspect de l'API gênant ou qui ne fonctionne pas comme prévu ? Ou s'il manque des éléments dont vous avez besoin pour mettre en œuvre votre idée ?

Signalez un problème dans le dépôt GitHub d'explications de l'API Content Indexing ou donnez votre avis à un problème existant.

Vous rencontrez un problème lors de l'implémentation ?

Avez-vous détecté un bug dans l'implémentation de Chrome ?

Signalez un bug sur https://new.crbug.com. Inclure autant d'éléments détails autant que possible, des instructions simples pour reproduire le problème et définissez Components à Blink>ContentIndexing.

Vous prévoyez d'utiliser l'API ?

Vous prévoyez d'utiliser l'API Content Indexing dans votre application Web ? Votre soutien public aide Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel pour les soutenir.

Quelles sont les implications de l'indexation de contenu en termes de sécurité et de confidentialité ?

Consultez les réponses en réponse au questionnaire de sécurité et de confidentialité du W3C. Si vous Si vous avez d'autres questions, lancez une discussion sur le dépôt GitHub du projet.

Image principale de Maksym Kaharlytskyi sur Unsplash.