Nouveautés de Chrome 107

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 107.

Nouvelles propriétés de l'API Capture d'écran

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

DisplayMediaStreamOptions a ajouté la propriété selfBrowserSurface. Cet indice permet à l'application d'indiquer au navigateur que l'onglet actif 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 les auto-captures accidentelles et l'effet "Hall of Miroir" que nous observons lors des visioconférences.

DisplayMediaStreamOptions comporte 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 lors du 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 effectuer de sélection dans une longue liste d'onglets. Toutefois, le comportement est exposé 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);

De plus, MediaTrackConstraintSet ajoute la propriété displaySurface. Lorsque getDisplayMedia() est appelé, le navigateur offre à l'utilisateur le choix entre plusieurs surfaces d'affichage: onglets, fenêtres ou écrans. Avec la contrainte displaySurface, l'application Web peut désormais suggérer au navigateur si elle préfère que l'un des types de surfaces soit mis en avant.

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

Identifier les ressources qui bloquent l'affichage

Pour que les développeurs puissent créer rapidement des expériences utilisateur, il est essentiel d'obtenir des informations fiables sur les performances d'une page. Jusqu'à présent, ils se sont appuyés sur des méthodes heuristiques complexes pour déterminer si une ressource bloque ou non l'affichage.

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

L'extrait de code présenté ici vous montre comment obtenir la liste de toutes vos ressources et utiliser la nouvelle propriété renduBlockingStatus pour répertorier 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 contribue à utiliser Core Web Vitals et à offrir une meilleure expérience utilisateur. Consultez la documentation MDN pour en savoir plus sur l'API Performance, identifiez les ressources qui bloquent l'affichage et optimisez-les.

Phase d'évaluation de l'API PendingBeacon

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

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

Les applications souhaitent souvent envoyer ces balises à la fin de la visite d'un utilisateur, mais le moment n'est pas idéal pour effectuer cette opération. Cette API délègue l'envoi au navigateur, de sorte qu'elle puisse prendre en charge les balises sur page unload ou page hide, sans que le développeur n'ait à implémenter l'envoi des appels au bon moment.

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

Et bien plus !

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

  • 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, cette fois-ci, elle devrait être incluse.

Complément d'informations

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

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 Adriana Jara et dès la sortie de Chrome 108, je serai là pour vous dire les nouveautés de Chrome.