Novedades de Chrome 97

Pete LePage

Tenga en cuenta lo siguiente:

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

Transporte web

Si usas sockets web o la API de WebRTC Data Channel para enviar mensajes entre el servidor y la página, hay una nueva opción disponible. WebTransport es una API nueva que ofrece mensajería bidireccional y de baja latencia, entre clientes y servidores.

Tiene una latencia más baja que WebSockets y, a diferencia de la API de Data Channel de RTC, 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 manera confiable con sus APIs de transmisión y no confiable con sus APIs de datagramas. Es compatible con los trabajadores web. Además, como expone una interfaz compatible con Streams, admite optimizaciones en torno a la contrapresión.

Para usarla, necesitarás un servidor que admita HTTP/3, que generalmente 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 Experimenta con WebTransport en web.dev para obtener más detalles.

Detección de funciones de tipos de secuencias de comandos

Actualmente, podemos usar el atributo nomodule para detectar la compatibilidad con módulos de JavaScript en el navegador. Sin embargo, hay varias propuestas de funciones nuevas en la canalización, como la importación de mapas, las reglas de especulación y la precarga 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 enviar la mejor opción al navegador.

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

Nuevos prototipos de array

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

En la práctica, estas funciones son las mismas que find() y findIndex(), pero buscan desde el final de un array en lugar del principio.

Por ejemplo, para encontrar el último número en un array superior a 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

Emular Chrome 100 en la cadena de UA

En solo unos meses, llegaremos a Chrome 100, un número de versión de tres dígitos. Cualquier código que verifique los números de versión o analice la cadena UA se debe verificar para garantizar que maneje tres dígitos.

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

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

Y mucho más.

Por supuesto que hay mucho más.

Las líneas nuevas en las entradas de los formularios ahora están normalizadas de la misma manera que Gecko y WebKit, lo que mejora la interoperabilidad entre navegadores.

Estandarizamos los nombres de sugerencias de clientes a través del prefijo sec-ch. Por ejemplo, dpr se convierte en sec-ch-dpr. Seguiremos admitiendo versiones existentes de estas sugerencias, pero debes planificar su baja y eliminación.

Los elementos <details> cerrados ahora se pueden buscar y es posible vincularlos. Estos elementos ocultos se expandirán automáticamente cuando se use la navegación de find in la página, ScrollToTextFragment y fragmentos de elementos.

Lecturas adicionales

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

Suscribirse

Para mantenerte al día, 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 98, estaré aquí para contarte las novedades de Chrome.