Nouveautés de Chrome 124

Pete LePage

Voici les principales nouveautés de Chrome 124:

Vous voulez en savoir plus ? Consultez les notes de version de Chrome 124.

Utiliser le Shadow DOM déclaratif en JavaScript

Deux nouvelles API permettent d'utiliser le DOM fantôme 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 est utile lorsque vous disposez d'un code HTML qui inclut un DOM fantôme déclaratif, comme ci-dessous.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Si vous utilisez simplement innerHTML, le navigateur ne l'analysera pas correctement et il n'y aura pas de DOM fantôme. Toutefois, 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 elle fonctionne de manière semblable à DOMParser.parseFromString().

Ces deux API sont non sécurisées, ce qui signifie qu'elles n'effectuent aucune désinfection des entrées. Vous devez donc vous assurer que ce que vous leur donnez est sans danger. Dans une prochaine version, nous prévoyons de proposer une version qui nettoie l'entrée.

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 l'interrogation. Cela est particulièrement utile pour les applications de chat, où vous souhaitez traiter les informations dès qu'elles sont reçues.

Mais que faire si les données arrivent plus vite que vous ne pouvez les traiter ?

C'est ce qu'on appelle la contre-pression, et cela peut vous causer de sérieux problèmes. Malheureusement, l'API WebSocket n'a pas de moyen pratique de gérer la pression en arrière.

L'API WebSocket Stream vous offre la puissance des flux et des sockets Web, ce qui signifie que la contre-pression peut être appliquée sans frais supplémentaires.

Commencez par créer un WebSocketStream et lui transmettre 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, vous attendez que la connexion soit ouverte, ce qui génère un ReadableStream et un WritableStream. En appelant la méthode ReadableStream.getReader(), vous obtenez un ReadableStreamDefaultReader à partir duquel vous pouvez read() des données jusqu'à ce que le flux soit terminé.

Pour écrire des données, appelez la méthode WritableStream.getWriter(), qui vous fournit un WritableStreamDefaultWriter, auquel vous pouvez ensuite write() des données.

Améliorations des transitions

Je suis ravi des fonctionnalités de transition de vue. Chrome 124 propose deux nouvelles fonctionnalités conçues pour faciliter les transitions de vue.

L'événement pageswap est déclenché sur l'objet de fenêtre d'un document lorsqu'une navigation remplace le document par un nouveau document.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

Et le blocage du rendu du document, qui vous permet de bloquer le rendu d'un document jusqu'à ce que le contenu critique ait été analysé, ce qui garantit une première peinture cohérente dans tous les navigateurs.

Et bien plus !

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

  • disallowReturnToOpener indique au navigateur qu'il ne doit pas afficher de bouton dans la fenêtre Picture-in-picture permettant à 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 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.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens suivants pour en savoir plus sur les modifications apportées à Chrome 124.

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 125 sera disponible, nous vous présenterons les nouveautés de Chrome.