Voici les points forts de Chrome 124:
- Deux nouvelles API permettent d'utiliser le DOM déclaratif Shadow DOM à partir de JavaScript.
- Vous pouvez utiliser des flux dans WebSockets.
- Les transitions d'affichage ont été améliorées.
- Et ce n'est pas tout : ce n'est pas tout.
Vous voulez tout savoir ? Consultez les notes de version de Chrome 124.
Utiliser le Shadow DOM déclaratif en JavaScript
Deux nouvelles API permettent d'utiliser le Shadow DOM déclaratif à partir de JavaScript.
setHTMLUnsafe()
est semblable à innerHTML
et vous permet de définir le code HTML interne d'un élément sur la chaîne fournie. Cela peut être utile lorsque vous avez du code HTML incluant un Shadow DOM déclaratif, comme celui-ci.
<my-custom-element>
<template shadowrootmode="open">
<style>
:host {
display: block;
color: yellow;
}
</style>
Hello, <slot></slot>
</template>
</my-custom-element>
Si vous n'utilisez que innerHTML
, le navigateur ne l'analysera pas correctement et il n'y aura pas de Shadow DOM. Mais avec setHTMLUnsafe()
, votre Shadow DOM est créé, et l'élément est analysé comme prévu.
const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);
L'autre API est parseHTMLUnsafe()
et fonctionne de la même manière que DOMParser.parseFromString()
.
Ces deux API sont non sécurisées, ce qui signifie qu'elles n'effectuent aucune opération de nettoyage des entrées. Vous devez donc vous assurer que tout ce que vous les alimentez ne présente aucun risque. Dans une prochaine version, nous nous attendons à voir une version qui nettoiera les entrées.
Enfin, ces deux API sont déjà compatibles avec la dernière version de Firefox et Safari.
API WebSocket Stream
Les WebSockets sont un excellent moyen d'échanger des données entre le navigateur de l'utilisateur et le serveur sans avoir à s'appuyer sur une interrogation. C'est la solution idéale pour des outils tels que les applications de chat, où vous souhaitez gérer les informations dès qu'elles arrivent.
Mais que se passe-t-il si les données arrivent plus rapidement que vous ne pouvez le gérer ?
C'est ce qu'on appelle la contre-pression, qui peut vous causer de graves maux de tête. Malheureusement, l'API WebSocket ne permet pas de gérer efficacement la contre-pression.
L'API WebSocket Stream vous offre la puissance des flux et des WebSockets, ce qui signifie que la contre-pression peut être appliquée sans frais supplémentaires.
Commencez par créer un nouveau fichier WebSocketStream
et transmettez-lui l'URL du serveur WebSocket.
const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();
while (true) {
const {value, done} = await reader.read();
if (done) {
break;
}
const result = await process(value);
await writer.write(result);
}
Ensuite, attendez que la connexion soit ouverte, ce qui génère une ReadableStream
et une WritableStream
. En appelant la méthode ReadableStream.getReader()
, vous obtenez un ReadableStreamDefaultReader
dont vous pouvez ensuite read()
exporter les données jusqu'à ce que le flux soit terminé.
Pour écrire des données, appelez la méthode WritableStream.getWriter()
, ce qui vous donne un WritableStreamDefaultWriter
dans lequel vous pouvez ensuite write()
.
Améliorations apportées aux transitions d'affichage
Je suis ravi des fonctionnalités de transition d'affichage. Chrome 124 propose deux nouvelles fonctionnalités conçues pour faciliter les transitions d'affichage.
L'événement pageswap
est déclenché sur l'objet de fenêtre d'un document lorsqu'une navigation remplacera le document par un nouveau document.
document.addEventListener("pageswap", event => {
if (!event.viewTransition) {
return;
}
});
Enfin, le blocage de l'affichage des documents vous permet de bloquer l'affichage d'un document jusqu'à ce que le contenu critique ait été analysé, ce qui garantit une première peinture cohérente sur tous les navigateurs.
Et bien plus !
Bien sûr, ce n’est pas tout.
disallowReturnToOpener
indique au navigateur qu'il ne devrait pas afficher de bouton dans la fenêtre Picture-in-picture, qui permet à l'utilisateur de revenir à l'onglet d'ouverture.Les conteneurs de défilement sélectionnables au clavier améliorent l'accessibilité en rendant les conteneurs de défilement sélectionnables à l'aide de la navigation de sélection séquentielle.
L'installation universelle permet aux utilisateurs d'installer n'importe quelle page, même celles qui ne répondent pas aux critères actuels des PWA.
Complément d'informations
Nous n'aborderons ici que certains points clés. Consultez les liens suivants pour obtenir des modifications supplémentaires dans Chrome 124.
- Notes de version de Chrome 124
- Nouveautés des outils pour les développeurs Chrome (124)
- Mises à jour du site ChromeStatus.com pour Chrome 124
- Liste des modifications du dépôt source Chromium
- Agenda des versions Chrome
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 Pete LePage. Dès la sortie de Chrome 125, nous serons là pour vous dire les nouveautés de Chrome !