Novedades de Chrome 107

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Profundicemos y veamos 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 compartir pantalla.

DisplayMediaStreamOptions agregó la propiedad selfBrowserSurface. Con esta sugerencia, la aplicación puede indicarle al navegador que, cuando 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);

Ayuda a evitar que se capturen imágenes accidentales y evita el efecto “pasillo de espejos” que se ve en las videoconferencias.

DisplayMediaStreamOptions ahora 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 agetDisplayMedia(). El botón Share this tab instead permite a los usuarios cambiar a una pestaña nueva sin volver a la pestaña de videoconferencia ni seleccionar una de una larga lista 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 le ofrece al usuario una opción de plataformas de visualización: pestañas, ventanas o monitores. Mediante la restricción displaySurface, la app web ahora puede sugerirle al navegador si prefiere que uno de los tipos de superficie se ofrezca de forma más destacada.

Por ejemplo, puede ayudar a evitar el uso compartido excesivo por accidente, ya que compartir una sola pestaña puede ser la opción predeterminada. Capturas de pantalla de los mensajes del selector de medios antiguos y nuevos.

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 se basan en heurísticas complejas para determinar si un recurso bloquea o no la renderización.

Ahora, la API de Performance incluye la propiedad renderBlockingStatus, que proporciona una señal directa del navegador que identifica los recursos que impiden que se muestre tu página hasta que se descargan.

En el fragmento de código que se muestra aquí, se indica 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');

La optimización de la carga de tus recursos ayuda con las Métricas web esenciales y con la entrega de una mejor experiencia del usuario. Consulta la documentación de MDN para obtener más información sobre la API de Performance, busca los recursos que bloquean la renderización y elimínalos.

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 píxel contador es un paquete de datos que se envía a un servidor de backend sin esperar una respuesta en particular.

A menudo, las aplicaciones desean enviar estas balizas al final de la visita de un usuario, pero no hay un buen momento para que se haga esa llamada de "envío". Esta API delega el envío al navegador para que pueda admitir píxeles contadores en page unload o en page hide, sin que el desarrollador tenga que implementar llamadas de envío en los momentos adecuados.

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.
  • El atributo rel ahora es compatible con los elementos <form>.
  • La última vez que mencioné la interpolación grid-template, esta vez debería incluirse.

Lecturas adicionales

Esto solo abarca algunos aspectos clave. Consulta los vínculos que aparecen a continuación para ver los cambios adicionales en Chrome 107.

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 Adriana Jara y, en cuanto se lance Chrome 108, estaré aquí para contarte las novedades.