Novedades de Chrome 124

Pete LePage

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

¿Quieres ver un resumen completo? Consulta las Notas de la versión de Chrome 124.

Usa shadow DOM 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 HTML interno de un elemento en la cadena proporcionada. Esto ayuda cuando tienes algo de HTML que incluye un shadow DOM 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 hay shadow DOM. Sin embargo, con setHTMLUnsafe(), se crea tu shadow DOM y el elemento se analiza 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 no son seguras, lo que significa que no realizan ninguna limpieza de entradas. Así que debes asegurarte de que lo que les alimentes sea seguro. En una próxima versión, esperamos ver una versión que sí 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 transmisión de WebSocket

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

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

Esto se denomina contrapresión y puede causarle algunos dolores de cabeza. Lamentablemente, la API de WebSocket no tiene una buena manera de tratar la contrapresión.

La API de WebSocket Stream te brinda la potencia de las transmisiones y sockets web, lo que significa que se puede aplicar la contrapresión sin ningún costo adicional.

Para comenzar, crea un WebSocketStream nuevo y pásale la URL del servidor 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, espera 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 del que puedes usar los datos de read() hasta que finalice la transmisión.

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

Mejoras en las transiciones de vistas

Me entusiasman las funciones de las transiciones de vistas, ya que hay dos funciones nuevas en Chrome 124 diseñadas para facilitar las transiciones.

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

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

Además, bloquea la renderización de documentos, que te permite bloquear la renderización de un documento hasta que se haya analizado el contenido crítico, lo que garantiza un primer procesamiento de imagen coherente en todos los navegadores.

Y mucho más.

Por supuesto que hay mucho más.

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

  • Los contenedores de desplazamiento enfocables en el teclado mejoran la accesibilidad, ya que hacen que los contenedores de desplazamiento se puedan enfocar con la navegación con enfoque secuencial.

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

Lecturas adicionales

Esto abarca solo algunos aspectos destacados. Consulta los siguientes vínculos para ver cambios adicionales en Chrome 124.

Suscribirse

Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers. 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 de Chrome.