Nouveautés de Chrome 96

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Je tourne enfin en studio. Découvrons les nouveautés de Chrome 96 pour les développeurs.

Fichier id du fichier manifeste pour les PWA

Lorsqu'un utilisateur installe une PWA, le navigateur doit pouvoir l'identifier de manière unique. Mais jusqu'à récemment, la spécification du fichier manifeste d'application Web ne spécifiait pas comment identifier une PWA, ce qui laissait le choix aux navigateurs et conduisait à différentes implémentations. Dans certains navigateurs, start_url est utilisé, tandis que dans d'autres, le chemin d'accès au fichier manifeste est utilisé.

Il est donc impossible de modifier l'un ou l'autre de ces champs sans interrompre l'expérience d'installation. Il existe désormais une nouvelle propriété facultative id, qui vous permet de définir explicitement l'identifiant utilisé pour votre PWA.

L'ajout de la propriété id au fichier manifeste supprime la dépendance à start_url ou à l'emplacement du fichier manifeste, et permet de mettre à jour ces champs.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

La propriété id est disponible dans les navigateurs pour ordinateur basés sur Chromium à partir de Chrome 96. La compatibilité avec la version mobile, qui utilise actuellement l'URL du fichier manifeste comme identifiant unique, devrait être disponible au cours du premier semestre 2022.

Outils de développement affichant l'ID d'application calculé

Si vous avez déjà une PWA en production et que vous souhaitez ajouter un id à votre fichier manifeste, vous devez utiliser l'ID attribué par le navigateur. Vous trouverez le fichier id dans le volet Manifest (Fichier manifeste) du panneau Application (Application) dans les outils de développement.

Pour une toute nouvelle PWA, vous pouvez définir id sur la valeur de chaîne de votre choix. Toutefois, n'oubliez pas que vous ne pourrez plus la modifier à l'avenir. Choisissez donc bien la valeur de votre choix.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Pour en savoir plus, consultez Identifier de manière unique les PWA avec la propriété d'ID du fichier manifeste d'application Web.

Gestionnaires de protocoles d'URL pour les PWA

Les applications Web peuvent utiliser navigator.registerProtocolHandler() pour s'enregistrer en tant que gestionnaires de protocoles. Par exemple, Gmail peut enregistrer le protocole mailto. Lorsqu'un utilisateur clique ensuite sur un lien comportant le préfixe mailto:, Gmail s'ouvre, ce qui lui permet d'envoyer facilement un e-mail.

À partir de Chrome 96, une PWA peut s'enregistrer en tant que gestionnaire de protocoles lors de son installation. Pour ce faire, pour votre PWA, ajoutez une propriété protocol_handlers au fichier manifeste de votre application Web, puis spécifiez le protocol que vous souhaitez gérer et l'url qui doit s'ouvrir lorsque vous cliquez dessus.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Il existe des restrictions, et vous ne pouvez pas vous contenter d'enregistrer n'importe quel protocole. Consultez la section Enregistrement du gestionnaire de protocoles d'URL pour les PWA pour obtenir tous les détails et pour savoir comment utiliser la syntaxe web+ pour créer vos propres protocoles.

Indices prioritaires (phase d'évaluation)

Lorsqu'un navigateur analyse une page Web, et commence à découvrir et télécharger des ressources telles que des images, des scripts ou des CSS, il lui attribue une priorité de récupération pour essayer d'optimiser le chargement de la page. Les navigateurs sont assez efficaces pour attribuer des priorités, mais ne sont pas forcément optimaux dans tous les cas.

Les indications prioritaires sont une fonctionnalité expérimentale, disponible en tant que phase d'évaluation à partir de Chrome 96, et peuvent vous aider à optimiser les Core Web Vitals. L'attribut importance vous permet de spécifier la priorité des types de ressources tels que les fichiers CSS, les polices, les scripts, les images et les iFrames.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Par exemple, voici la page Google Flights. Cette image de fond est le LCP (Largest Contentful Paint).

Capture d&#39;écran de Google Flights avec une grande image de fond

Voyons qu'elle est chargée avec et sans les indications de priorité. Lorsque la priorité est définie sur high sur l'image de fond, le LCP passe de 2,6 secondes à 1,9 seconde.

Consultez Optimiser le chargement des ressources avec l'API Fetch Priority pour en savoir plus, pour découvrir comment vous inscrire à la phase d'évaluation et pour découvrir quelques exemples intéressants d'amélioration des performances d'affichage.

Émuler Chrome 100 dans la chaîne UA

Au début de l'année prochaine, Chrome 100 sera un numéro de version à trois chiffres. Tout code qui vérifie les numéros de version ou analyse la chaîne UA doit être vérifié pour s'assurer qu'il gère trois chiffres.

À partir de Chrome 96, un nouvel indicateur #force-major-version-to-100 va remplacer le numéro de version actuel par 100 afin que vous puissiez vous assurer que tout fonctionne comme prévu.

Page des indicateurs Chrome mettant en évidence la nouvelle option #force-major-version-to-100

Pour en savoir plus, consultez Forcer la version majeure de Chrome sur 100 dans la chaîne user-agent.

Chrome Dev Summit

Le Chrome Dev Summit s'achève. Toutes les vidéos et tous les contenus sont disponibles en ligne. Consultez le site du Chrome Dev Summit. Si vous avez manqué le discours d'ouverture ou la diffusion en direct, consultez la playlist CCS sur la chaîne YouTube pour les développeurs Chrome.

Et bien plus !

Bien sûr, ce n’est pas tout.

  • Le cache amélioré (ou bfcache) est désormais disponible en version stable et aligne Chrome avec Firefox et Safari.

Complément d'informations

Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 96.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Je m'appelle Pete LePage. Dès que Chrome 97 sera disponible, je serai là pour vous dire les nouveautés de Chrome !