Nouveautés de Chrome 124

Pete LePage

Voici les principales nouveautés de Chrome 124:

Vous voulez en savoir plus ? Consultez le 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 depuis JavaScript.

setHTMLUnsafe() est semblable à innerHTML et vous permet de définir le code HTML interne de un élément à la chaîne fournie. Cela est utile lorsque vous avez 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 et non le Shadow DOM. Mais avec setHTMLUnsafe(), votre Shadow DOM est créé, et le est analysé comme prévu.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

L'autre API est parseHTMLUnsafe(), et son fonctionnement est semblable à celui de DOMParser.parseFromString()

Ces deux API sont non sécurisées, c'est-à-dire qu'elles ne fournissent aucune entrée le nettoyage. Vous devez donc vous assurer que tout ce que vous les nourrissez est sûr. Dans une prochaine version, nous nous attendons à voir une version qui permet de nettoyer de l'entrée.

Enfin, ces deux API sont déjà prises en charge dans la dernière version de Firefox et Safari !

API WebSocket Stream

Les WebSockets sont un excellent moyen d'échanger des données entre les le navigateur et le serveur sans avoir à dépendre de l'interrogation. C'est idéal pour comme les applications de chat, qui vous permettent de traiter des informations entre en jeu.

Mais que se passe-t-il si les données arrivent plus rapidement que vous ne pouvez en gérer ?

C'est ce qu'on appelle la contre-pression qui peut vous causer de sérieux maux de tête. Malheureusement, l'API WebSocket ne permet pas de gérer efficacement de pression.

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

Commencez par construire un nouveau WebSocketStream et transmettez-lui l'URL de 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 entraîne dans un ReadableStream et un WritableStream. En appelant la méthode ReadableStream.getReader(), vous obtenez une ReadableStreamDefaultReader à partir duquel vous pouvez read() des données jusqu'à la fin du flux.

Pour écrire des données, appelez la méthode WritableStream.getWriter(), qui génère une WritableStreamDefaultWriter, que vous pouvez ensuite utiliser pour write() des données.

Améliorations apportées aux transitions

J'ai hâte de découvrir les transitions de vues. Il y a deux nouvelles dans Chrome 124 conçue pour faciliter les transitions d'affichage.

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

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

Blocage de l'affichage des documents, qui vous permet de bloquer l'affichage d'un document tant que le contenu critique n'a pas été analysé, ce qui garantit une qualité initiale cohérente sur tous les navigateurs.

Et bien plus !

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

  • disallowReturnToOpener Des indications au navigateur lui indiquent qu'il ne devrait pas afficher de bouton en mode Picture-in-picture. qui permet à l'utilisateur de revenir à l'onglet d'ouverture.

  • Conteneurs de défilement sélectionnables au clavier améliore l'accessibilité en rendant les conteneurs de défilement sélectionnables à l'aide d'une séquence sélection de la navigation.

  • Et l'installation universelle permet aux utilisateurs d'installer n'importe quelle page, même celles qui répondant aux critères actuels des PWA.

Documentation complémentaire

Cela ne couvre que certains points clés. Consultez les liens suivants pour modifications supplémentaires dans Chrome 124.

S'abonner

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

Je m'appelle Pete LePage. Dès la sortie de Chrome 125, nous serons là pour vous informer des nouveautés de Chrome !