Nouveautés de Chrome 107

Adriana Jara

Voici quelques points à retenir :

Je m'appelle Adriana Jara. Découvrons les nouveautés de Chrome 107 pour les développeurs.

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

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

DisplayMediaStreamOptions a ajouté la propriété selfBrowserSurface. Grâce à 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);

Cela permet d'éviter de se capturer soi-même par accident et d'éviter l'effet "galerie des glaces" que l'on observe dans les visioconférences.

DisplayMediaStreamOptions dispose désormais de la propriété surfaceSwitching. Cette propriété ajoute une option permettant de contrôler de manière programmatique si Chrome affiche un bouton pour 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, ce comportement est exposé de manière conditionnelle au cas où 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 si elle préfère qu'un des types de surface soit proposé de manière plus visible.

Par exemple, cela peut aider à éviter le partage excessif par accident, car le partage d'un seul onglet peut être l'option par défaut. Captures d'écran des anciennes et nouvelles invites du sélecteur de fichiers multimédias.

Identifier les ressources bloquant l'affichage

Pour que les développeurs puissent créer des expériences utilisateur rapides, il est essentiel qu'ils disposent d'insights fiables sur les performances d'une page. Jusqu'à présent, ils s'appuyaient sur des heuristiques complexes pour déterminer si une ressource bloquait l'affichage ou non.

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

L'extrait de code ci-dessous montre comment obtenir la liste de toutes vos ressources et 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 Core Web Vitals et à offrir une meilleure expérience utilisateur. Consultez la documentation MDN pour en savoir plus sur l'API Performance, recherchez les ressources qui bloquent l'affichage et optimisez-les.

Essai Origin Trial de l'API PendingBeacon

L'API PendingBeacon déclarative permet au navigateur de contrôler l'envoi des balises.

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'y a pas de bon moment pour effectuer cet appel d'envoi. Cette API délègue l'envoi au navigateur lui-même, ce qui lui permet de prendre en charge les balises sur page unload ou sur page hide, sans que le développeur ait à implémenter des appels d'envoi au moment opportun.

Inscrivez-vous à l'essai Origin Trial, essayez l'API et envoyez-nous vos commentaires pour améliorer les cas d'utilisation.

Et bien plus !

Bien sûr, il y en a beaucoup d'autres.

  • 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, j'ai mentionné l'interpolation grid-template. Cette fois, elle doit être incluse.

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 rester à jour, abonnez-vous à la chaîne YouTube Chrome Developers. Vous recevrez une notification par e-mail chaque fois que nous publierons une nouvelle vidéo.

Je m'appelle Adriana Jara et, dès que Chrome 108 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.