Novedades de Chrome 107

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Analicemos las novedades para desarrolladores en Chrome 107.

Nuevas propiedades en la API de Screen Capture

En esta versión, la API de Screen Capture agrega nuevas propiedades para mejorar las experiencias de uso compartido de pantalla.

El DisplayMediaStreamOptions agregó la propiedad selfBrowserSurface. Con esta sugerencia, la aplicación puede indicarle al navegador que, cuando se llame a getDisplayMedia(), se debe excluir la pestaña actual.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Esto ayuda a evitar la captura accidental de uno mismo y el efecto de “sala de espejos” que hemos visto en las videoconferencias.

DisplayMediaStreamOptionsahora también tiene la propiedad surfaceSwitching. Esta propiedad agrega una opción para controlar de forma programática si Chrome muestra un botón para cambiar de pestaña mientras se comparte la pantalla. Estas opciones se pasarán a getDisplayMedia(). El botón Share this tab instead permite que los usuarios cambien a una pestaña nueva sin volver a la pestaña de videoconferencia ni seleccionar una de una lista larga de pestañas, pero el comportamiento se expone de forma condicional en caso de que la aplicación web no lo controle.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Además, MediaTrackConstraintSet agrega la propiedad displaySurface. Cuando se llama a getDisplayMedia(), el navegador ofrece al usuario una selección de plataformas de visualización: pestañas, ventanas o monitores. Con la restricción displaySurface, la app web ahora puede sugerirle al navegador si prefiere que se ofrezca uno de los tipos de superficie de forma más destacada.

Por ejemplo, puede ayudar a evitar que se comparta contenido de más por accidente, ya que compartir una sola pestaña puede ser la opción predeterminada. Capturas de pantalla de los mensajes del selector de contenido multimedia antiguo y nuevo.

Identifica los recursos que bloquean la renderización

Las estadísticas confiables sobre el rendimiento de una página son fundamentales para que los desarrolladores creen experiencias del usuario rápidas. Hasta ahora, los desarrolladores dependían de heurísticas complejas para determinar si un recurso bloquea la renderización o no.

Ahora, la API de Performance incluye la propiedad renderBlockingStatus, que proporciona un indicador directo del navegador que identifica los recursos que impiden que se muestre tu página hasta que se descarguen.

En el siguiente fragmento de código, se muestra cómo obtener una lista de todos tus recursos y usar la nueva propiedad renderBlockingStatus para enumerar todos los que bloquean la renderización.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Optimizar la forma en que cargas tus recursos ayuda con las Core Web Vitals y a brindar una mejor experiencia del usuario. Consulta la documentación de MDN para obtener más información sobre la API de Performance, busca esos recursos que bloquean la renderización y optimízalos.

Prueba de origen de la API de PendingBeacon

La API de PendingBeacon declarativa permite que el navegador controle cuándo se envían las balizas.

Un beacon es un paquete de datos que se envía a un servidor de backend sin esperar una respuesta en particular.

A menudo, las aplicaciones quieren enviar estas balizas al final de la visita de un usuario, pero no hay un buen momento para realizar esa llamada de "envío". Esta API delega el envío al navegador, por lo que puede admitir balizas en page unload o en page hide, sin que el desarrollador tenga que implementar llamadas de envío en los momentos exactos.

Regístrate en la prueba de origen, prueba la API y envíanos tus comentarios para mejorar los casos de uso.

Y mucho más

Por supuesto, hay mucho más.

  • El encabezado HTTP expect-ct dejó de estar disponible.
  • Ahora se admite el atributo rel en los elementos <form>.
  • La última vez mencioné la interpolación de grid-template, esta vez debería incluirse.

Lecturas adicionales

Esto solo abarca algunos aspectos destacados. Consulta los vínculos que aparecen a continuación para conocer otros cambios en Chrome 107.

Suscribirse

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

Soy Adriana Jara y, en cuanto se lance Chrome 108, estaré aquí para contarte las novedades de Chrome.