Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 97

Pete LePage

Voici les informations à retenir :

WebTransport est une nouvelle option permettant d'envoyer des messages en temps réel entre le client et le serveur.
Vous pouvez utiliser la détection de fonctionnalités pour voir les types de scripts compatibles avec un navigateur.
Rechercher des tableaux en partant de la fin devient un peu plus facile.
Et ce n'est pas tout : ce n'est pas tout.

Bonne année ! Je m'appelle Pete LePage. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 97.

Transport Web

Si vous utilisez Web Sockets ou l'API WebRTC Data Channel pour envoyer des messages entre votre serveur et la page, une nouvelle option vous est proposée. WebTransport est une nouvelle API offrant une messagerie client-serveur, bidirectionnelle et à faible latence.

Elle offre une latence inférieure à celle des connexions WebSockets. De plus, contrairement à l'API RTC Data Channel, qui est conçue pour la messagerie peer-to-peer, l'API Web Transport est spécifiquement conçue pour la messagerie client-serveur.

Il accepte l'envoi de données de manière fiable avec ses API de flux et de manière non fiable avec ses API de datagramme. Elle est prise en charge par les workers Web. De plus, comme il expose une interface conforme aux flux, il est compatible avec les optimisations de contre-pression.

Pour l'utiliser, vous devez disposer d'un serveur compatible avec HTTP/3, ce qui est généralement plus simple que de configurer et de gérer un serveur WebRTC. Ouvrez une nouvelle instance WebTransport, attendez qu'elle se connecte pour commencer à envoyer des données.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Pour en savoir plus, consultez l'article Tester WebTransport sur web.dev.

Détection des fonctionnalités du type de script

Aujourd'hui, nous pouvons utiliser l'attribut nomodule pour détecter la prise en charge des modules JavaScript dans le navigateur. Toutefois, le pipeline propose plusieurs nouvelles fonctionnalités, telles que des cartes d'importation, des règles de spéculation et le préchargement des groupes. Nous avons besoin d'un moyen de savoir ce qu'un navigateur prend en charge.

Saisissez HTMLScriptElement.supports(). Vous pouvez l'utiliser pour déterminer les types de scripts que vous pouvez utiliser et envoyer au navigateur la meilleure option.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Nouveaux prototypes de tableaux

J'adore quand JavaScript devient plus facile. Mise à jour de Array et TypedArray, qui acceptent désormais les méthodes statiques findLast() et findLastIndex().

Ces fonctions sont identiques à find() et findIndex(), mais la recherche est effectuée à partir de la fin d'un tableau plutôt que du début.

Par exemple, pour trouver le dernier nombre d'un tableau supérieur à 10, appelez findLast() avec une fonction de test qui vérifie si la valeur est supérieure à 10, et le tour est joué.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Émuler Chrome 100 dans la chaîne UA

Dans quelques mois, Chrome 100 sera le 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.

Un indicateur appelé #force-major-version-to-100 permet de remplacer le numéro de version actuel par 100 afin de vous assurer que tout fonctionne comme prévu.

Page des drapeaux Chrome mettant en évidence la nouvelle option #force-major-version-to-100

Et bien plus !

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

Les nouvelles lignes dans les entrées de formulaire sont désormais normalisées de la même manière que Gecko et WebKit, ce qui améliore l'interopérabilité entre les navigateurs.

Nous standardisons les noms des indications client en leur ajoutant le préfixe sec-ch. Par exemple, dpr devient sec-ch-dpr. Nous continuerons à prendre en charge les versions existantes de ces suggestions, mais vous devez planifier leur abandon et leur suppression.

Les éléments <details> fermés sont désormais inclus dans l'index de recherche et peuvent être liés. Ces éléments cachés se développeront automatiquement lors de leur recherche sur la page, de ScrollToTextFragment et de la navigation par fragment d'éléments.

Complément d'informations

Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour connaître les modifications supplémentaires apportées à Chrome 97.

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 Pete LePage. Dès la sortie de Chrome 98, je serai là pour vous dire quelles sont les nouveautés de Chrome !