Novedades de Chrome 97

Pete LePage

Tenga en cuenta lo siguiente:

¡Feliz año nuevo! Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 97.

Transporte web

Si usas Web Sockets o la API de WebRTC Data Channel para enviar mensajes entre tu servidor y la página, hay una nueva opción para ti. WebTransport es una nueva API que ofrece mensajería bidireccional y de baja latencia entre cliente y servidor.

Tiene una latencia más baja que WebSockets y, a diferencia de la API de RTC Data Channel, que está diseñada para la mensajería entre pares, la API de Web Transport está diseñada específicamente para la mensajería cliente-servidor.

Admite el envío de datos de forma confiable con sus APIs de flujos y de forma no confiable con sus APIs de datagramas. Es compatible con los trabajadores web. Y, como expone una interfaz compatible con Streams, admite optimizaciones en torno a la contrapresión.

Para usarlo, necesitarás un servidor que admita HTTP/3, que, por lo general, es más fácil que configurar y mantener un servidor WebRTC. Abre una instancia nueva de WebTransport, espera a que se conecte y podrás comenzar a enviar datos.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Consulta el artículo Experimentar con WebTransport en web.dev para obtener todos los detalles.

Detección de características de tipo de secuencia de comandos

Hoy, podemos usar el atributo nomodule para detectar la compatibilidad con los módulos de JavaScript en el navegador. Sin embargo, hay varias propuestas de funciones nuevas en la canalización, como mapas de importación, reglas de especulación y carga previa de paquetes. Necesitamos una forma de saber qué admite un navegador.

Ingresa HTMLScriptElement.supports(). Puedes usarlo para determinar qué tipos de secuencias de comandos puedes usar y enviarle al navegador la mejor opción.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Nuevos prototipos de arrays

Me encanta cuando JavaScript se vuelve más fácil. Array y TypedArray ahora admiten los métodos estáticos findLast() y findLastIndex().

Estas funciones son, en esencia, las mismas que find() y findIndex(), pero buscan desde el final de un array en lugar de desde el principio.

Por ejemplo, para encontrar el último número de un array que sea mayor que diez, llama a findLast() con una función de prueba que verifique si el valor es mayor que diez y listo.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Emula Chrome 100 en la cadena UA

En unos pocos meses, llegaremos a Chrome 100, un número de versión de tres dígitos. Se debe verificar cualquier código que compruebe los números de versión o analice la cadena de UA para asegurarse de que controle tres dígitos.

Hay una marca llamada #force-major-version-to-100 que cambiará el número de versión actual a 100, de modo que puedas asegurarte de que todo funcione como se espera.

Página de funciones experimentales de Chrome en la que se destaca la nueva opción #force-major-version-to-100

Y mucho más.

Por supuesto, hay mucho más.

Las nuevas líneas en las entradas de formulario ahora se normalizan de la misma manera que Gecko y WebKit, lo que mejora la interoperabilidad entre navegadores.

Estamos estandarizando los nombres de sugerencias de cliente con el prefijo sec-ch. Por ejemplo, dpr se convierte en sec-ch-dpr. Seguiremos admitiendo las versiones existentes de estas sugerencias, pero debes planificar su baja y eliminación definitivas.

Los elementos <details> cerrados ahora se pueden buscar y vincular. Estos elementos ocultos se expandirán automáticamente cuando se usen la función Find in page, ScrollToTextFragment y la navegación de fragmentos de elementos.

Lecturas adicionales

Esto solo abarca algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver los cambios adicionales en Chrome 97.

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 apenas se lance Chrome 98, estaré aquí para contarte las novedades de Chrome.