Novedades de Chrome 124

Pete LePage

Estos son los aspectos más destacados de Chrome 124:

¿Quieres conocer todos los detalles? Consulta las notas de la versión de Chrome 124.

Usa el DOM secundario declarativo en JavaScript

Hay dos APIs nuevas que permiten usar el shadow DOM declarativo desde JavaScript.

setHTMLUnsafe() es similar a innerHTML y te permite establecer el código HTML interno de un elemento en la cadena proporcionada. Esto es útil cuando tienes un código HTML que incluye un DOM secundario declarativo, como este.

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

Si solo usas innerHTML, el navegador no lo analizará correctamente y no habrá DOM secundario. Sin embargo, con setHTMLUnsafe(), se crea tu shadow DOM y se analiza el elemento como esperas.

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

La otra API es parseHTMLUnsafe() y funciona de manera similar a DOMParser.parseFromString().

Ambas APIs son inseguras, lo que significa que no realizan ninguna limpieza de entradas. Por lo tanto, debes asegurarte de que lo que le des sea seguro. En una próxima versión, esperamos ver una versión que proporcione limpieza de la entrada.

Por último, ambas APIs ya son compatibles con la versión más reciente de Firefox y Safari.

API de WebSocket Stream

Los WebSockets son una excelente manera de enviar datos entre el navegador del usuario y el servidor sin tener que depender de sondeos. Esto es ideal para elementos como las apps de chat, en las que deseas tratar la información en cuanto llega.

Pero, ¿qué sucede si los datos llegan más rápido de lo que puedes manejar?

Eso se denomina contrapresión y puede causarte algunos dolores de cabeza graves. Lamentablemente, la API de WebSocket no tiene una buena manera de controlar la presión hacia atrás.

La API de WebSocket Stream te brinda la potencia de los flujos y los WebSockets, lo que significa que se puede aplicar la contrapresión sin ningún costo adicional.

Para comenzar, construye un WebSocketStream nuevo y pásale la URL del servidor de 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);
}

A continuación, esperas a que se abra la conexión, lo que genera un ReadableStream y un WritableStream. Si llamas al método ReadableStream.getReader(), obtienes un ReadableStreamDefaultReader desde el cual puedes usar read() hasta que finalice la transmisión.

Para escribir datos, llama al método WritableStream.getWriter(), que te proporciona un WritableStreamDefaultWriter en el que luego puedes write() usar datos.

Ver mejoras de las transiciones

Me entusiasman las funciones de transiciones de vistas. Hay dos funciones nuevas en Chrome 124 diseñadas para facilitar las transiciones de vistas.

El evento pageswap se activa en el objeto de ventana de un documento cuando una navegación reemplazará el documento por uno nuevo.

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

Y el bloqueo de renderización de documentos, que te permite bloquear la renderización de un documento hasta que se analice el contenido crítico, lo que garantiza una primera pintura coherente en todos los navegadores.

Y mucho más.

Por supuesto, hay mucho más.

  • disallowReturnToOpener le indica al navegador que no debe mostrar un botón en la ventana de pantalla en pantalla que le permita al usuario volver a la pestaña del abridor.

  • Los contenedores de desplazamiento enfocables en el teclado mejoran la accesibilidad, ya que permiten que los contenedores de desplazamiento sean enfocables con la navegación de enfoque secuencial.

  • Además, la instalación universal permite a los usuarios instalar cualquier página, incluso aquellas que no cumplen con los criterios actuales de AWP.

Lecturas adicionales

Esto abarca solo algunos aspectos destacados. Consulta los siguientes vínculos para conocer más cambios en Chrome 124.

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage y, en cuanto se lance Chrome 125, estaremos aquí para contarte las novedades.