Nouveautés de Chrome 96

Pete LePage

Voici les informations à retenir :

Je suis Pete LePage, et je tourne enfin en studio. Je vais vous présenter les nouveautés de Chrome 96 pour les développeurs.

id de fichier manifeste pour les PWA

Lorsqu'un utilisateur installe une PWA, le navigateur doit pouvoir l'identifier de manière unique. Toutefois, jusqu'à récemment, la spécification du fichier manifeste d'application Web ne spécifiait pas comment identifier une PWA, laissant les navigateurs décider, ce qui a entraîné 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 de ces champs sans interrompre l'expérience d'installation. Il existe désormais une nouvelle propriété id facultative 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 vis-à-vis du start_url ou de l'emplacement du fichier manifeste, et permet de mettre à jour ces champs.

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

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

DevTools 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 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 n'importe quelle valeur de chaîne de votre choix, mais n'oubliez pas que vous ne pourrez plus la modifier par la suite. Choisissez donc judicieusement.

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

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

Gestionnaires de protocoles d'URL pour les PWA

Les applications Web peuvent utiliser navigator.registerProtocolHandler() pour s'enregistrer en tant que gestionnaire de protocole. Par exemple, Gmail peut enregistrer le protocole mailto. Lorsqu'un utilisateur clique sur un lien avec 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 protocole lors de son installation. Pour ce faire pour votre PWA, ajoutez une propriété protocol_handlers à votre fichier manifeste d'application Web, spécifiez le protocol que vous souhaitez gérer et le 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 certaines restrictions, et vous ne pouvez pas enregistrer n'importe quel protocole. Consultez Enregistrement du gestionnaire de protocoles d'URL pour les PWA pour en savoir plus et découvrir comment utiliser la syntaxe web+ pour créer vos propres protocoles.

Conseils de priorité (essai Origin Trial)

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 fichiers CSS, il leur attribue une priorité de récupération pour essayer d'optimiser le chargement de la page. Les navigateurs sont plutôt bons pour attribuer des priorités, mais ils ne sont pas toujours optimaux.

Les indices de priorité sont une fonctionnalité expérimentale, disponible en tant que phase d'évaluation de l'origine à partir de Chrome 96. Ils peuvent aider à optimiser les Core Web Vitals. L'attribut importance vous permet de spécifier la priorité pour les types de ressources tels que les 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>

Voici par exemple la page Google Flights. Cette image d'arrière-plan correspond au Largest Contentful Paint (LCP).

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

Voyons comment il se charge avec et sans indications de priorité. Lorsque la priorité est définie sur high pour 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, découvrir comment vous inscrire au test de l'origine et obtenir d'excellents exemples de la façon dont elle peut vous aider à améliorer vos performances de rendu.

Émuler Chrome 100 dans la chaîne UA

Début de l'année prochaine, nous atteindrons Chrome 100, avec 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 nouveau flag #force-major-version-to-100 remplacera le numéro de version actuel par 100. Vous pourrez ainsi vous assurer que tout fonctionne comme prévu.

Page des indicateurs Chrome mettant en avant 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.

Sommet des développeurs Chrome

Le sommet des développeurs Chrome est terminé. Toutes les vidéos et tous les contenus sont disponibles en ligne. Consultez le site du sommet des développeurs Chrome. Si vous avez manqué la keynote ou la diffusion en direct, regardez la playlist CDS sur la chaîne YouTube des développeurs Chrome.

Et bien plus !

Bien sûr, il y a bien d'autres choses.

  • Le cache "Retour", "Avant" (ou bfcache) est désormais disponible en version stable et permet de mettre Chrome en conformité avec Firefox et Safari.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications apportées à Chrome 96.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

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