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.
Il est un peu plus facile d'effectuer une recherche dans des tableaux à partir de la fin.
Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

Bonne année ! Je m'appelle Pete LePage. Allons-y et découvrons les nouveautés de Chrome 97 pour les développeurs.

Web Transport

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

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

Il permet d'envoyer des données de manière fiable avec ses API de flux et de manière non fiable avec ses API de datagrammes. Il est compatible avec les nœuds de calcul Web. Et comme il expose une interface compatible avec Streams, il prend en charge les optimisations liées à la contre-pression.

Pour l'utiliser, vous aurez besoin d'un serveur compatible avec HTTP/3, ce qui est généralement plus facile que de configurer et d'entretenir un serveur WebRTC. Ouvrez une nouvelle instance WebTransport, attendez qu'elle se connecte, puis commencez à 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 Expérimenter WebTransport sur web.dev.

Détection de fonctionnalités de 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, plusieurs nouvelles propositions de fonctionnalités sont en cours de développement, telles que les cartes d'importation, les règles de spéculation et le préchargement de groupes. Nous devons pouvoir savoir ce qu'un navigateur accepte.

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. Array et TypedArray sont désormais compatibles avec les méthodes statiques findLast() et findLastIndex().

Ces fonctions sont en fait identiques à find() et findIndex(), mais elles effectuent une recherche à partir de la fin d'un tableau plutôt qu'au 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.

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, nous atteindrons Chrome 100, avec un 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 les trois chiffres.

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

Page des indicateurs Chrome mettant en avant la nouvelle option #force-major-version-to-100

Et bien plus !

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

Les nouvelles lignes dans les entrées de formulaires 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 d'indices client en leur ajoutant le préfixe sec-ch. Par exemple, dpr devient sec-ch-dpr. Nous continuerons de prendre en charge les versions existantes de ces conseils, mais vous devez vous préparer à leur abandon et à leur suppression à terme.

Les éléments <details> fermés sont désormais disponibles pour la recherche et peuvent être associés. Ces éléments masqués se développeront automatiquement lorsque la recherche sur la page, ScrollToTextFragment et la navigation dans les fragments d'éléments seront utilisées.

Documentation complémentaire

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

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 98 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.