Nouveautés de Chrome 124

Pete LePage

Voici les points forts de Chrome 124:

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.

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 !