Nouveautés de Chrome 107

Adriana Jara

Voici les informations à retenir :

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. Grâce à cette indication, 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);

Cela permet d'éviter de s'enregistrer accidentellement et d'éviter l'effet "Hall of Mirrors" (effet miroir) que l'on a pu observer dans les 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 de visioconférence ni sélectionner un onglet dans une longue liste. Toutefois, le comportement est exposé de manière conditionnelle au cas où l'application Web ne le gérerait 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 de l'outil de sélection 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.

L'extrait de code suivant montre comment obtenir la liste de toutes vos ressources et utiliser la nouvelle propriété renderBlockingStatus pour lister toutes celles qui bloquent le rendu.

// 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.

Un signal est un ensemble de données envoyé à 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.