Nouveautés de Chrome 107

Adriana Jara

Voici les informations à retenir :

  • L'API Screen Capture contient de nouvelles propriétés pour améliorer les expériences de partage d'écran.
  • Vous pouvez désormais identifier précisément si une ressource de votre page est bloquante pour l'affichage ou non.

  • Une nouvelle méthode d'envoi de données à un serveur backend est disponible avec l'API PendingBeacon déclarative dans le test d'origine. Et ce n'est pas tout.

  • Et ce n'est pas tout !

Je m'appelle Adriana Jara. Voyons ce que Chrome 107 propose aux développeurs.

Nouvelles propriétés de l'API Screen Capture

Dans cette version, l'API Screen Capture ajoute de nouvelles propriétés pour améliorer les expériences de partage d'écran.

La propriété selfBrowserSurface a été ajoutée à DisplayMediaStreamOptions. Avec cet indice, l'application peut indiquer au navigateur que l'onglet actuel doit être exclu lors de l'appel de getDisplayMedia().

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Elle permet d'éviter les autocaptures accidentelles et l'effet de la galerie des miroirs que nous avons constaté lors des visioconférences.

DisplayMediaStreamOptions possède désormais également la propriété surfaceSwitching. Cette propriété ajoute une option permettant de contrôler de manière programmatique si Chrome affiche un bouton permettant de changer d'onglet pendant le partage d'écran. Ces options seront transmises à getDisplayMedia(). Le bouton Share this tab instead permet aux utilisateurs de passer à un nouvel onglet sans revenir à l'onglet "Visioconférence" ou sélectionner un onglet dans une longue liste. Toutefois, le comportement est affiché de manière conditionnelle si l'application Web ne le gère pas.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

MediaTrackConstraintSet ajoute également la propriété displaySurface. Lorsque getDisplayMedia() est appelé, le navigateur propose à l'utilisateur de choisir une surface d'affichage: onglets, fenêtres ou écrans. À l'aide de la contrainte displaySurface, l'application Web peut désormais indiquer au navigateur s'il préfère que l'un des types de surface soit proposé de manière plus visible.

Par exemple, cela peut vous aider à éviter de partager trop d'informations par accident, car le partage d'un seul onglet peut être défini par défaut. Capture d'écran des anciennes et nouvelles invites du sélecteur de contenu multimédia.

Identifier les ressources bloquant le rendu

Les insights fiables sur les performances d'une page sont essentiels pour les développeurs afin de créer des expériences utilisateur rapides. Jusqu'à présent, ils s'appuyaient sur des heuristiques complexes pour déterminer si une ressource est bloquante pour le rendu ou non.

L'API Performance inclut désormais la propriété renderBlockingStatus, qui fournit un signal direct du navigateur qui identifie les ressources qui empêchent l'affichage de votre page jusqu'à ce qu'elles soient téléchargées.

Cet extrait de code montre comment obtenir la liste de toutes vos ressources et comment utiliser la nouvelle propriété "RenderBlockingStatus" pour lister toutes celles qui bloquent l'affichage.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Optimiser le chargement de vos ressources vous aide à améliorer les métriques Core Web Vitals et à offrir une meilleure expérience utilisateur. Consultez la documentation MDN pour en savoir plus sur l'API Performances, recherchez les ressources bloquant le rendu et optimisez-les.

Phase d'évaluation de l'API PendingBeacon

L'API PendingBeacon déclarative permet au navigateur de contrôler quand les balises sont envoyées.

Une balise est un ensemble de données envoyées à un serveur backend, sans attendre de réponse particulière.

Les applications souhaitent souvent envoyer ces balises à la fin de la visite d'un utilisateur, mais il n'existe pas de bon moment pour effectuer cet appel d'envoi. Cette API délègue l'envoi au navigateur lui-même. Elle peut ainsi prendre en charge les balises sur page unload ou page hide, sans que le développeur ait à implémenter des appels d'envoi au moment précis.

Inscrivez-vous à la phase d'évaluation, testez l'API et envoyez-nous vos commentaires pour nous aider à améliorer les cas d'utilisation.

Et bien plus !

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

  • L'en-tête HTTP expect-ct est obsolète.
  • L'attribut rel est désormais compatible avec les éléments <form>.
  • La dernière fois que j'ai mentionné l'interpolation grid-template, elle n'était pas incluse. Cette fois, elle devrait l'être.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens ci-dessous pour découvrir d'autres modifications apportées à Chrome 107.

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 Adriana Jara. Dès que Chrome 108 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.