Nouveautés de Chrome 97

Pete LePage

Voici les informations à retenir :

Bonne année ! Je m'appelle Pete LePage. Voyons ce que Chrome 97 propose aux 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 bidirectionnelle et à faible latence entre client et serveur.

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 workers Web. Et comme il expose une interface conforme à 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 de gérer 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 des 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 d'étude, comme les cartes d'importation, les règles de spéculation et le préchargement de bundles. 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 remplace 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 a bien d'autres choses.

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 des 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 prévoir 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 en savoir plus sur les modifications apportées à Chrome 97.

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 Pete LePage. Dès que Chrome 98 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.