Novedades de Chrome 107

Adriana Jara

Tenga en cuenta lo siguiente:

• Hay nuevas propiedades en la API de Screen Capture que mejoran las experiencias de compartir pantalla.
• Ahora puedes identificar con precisión si un recurso de tu página está bloqueando la renderización o no.

• Existe una nueva forma de enviar datos a un servidor de backend con la API de PendingBeacon declarativa en la prueba de origen. Y hay mucho más.

• Además, hay mucho más.

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

Nuevas propiedades de 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 prevenir la autorretrato accidental y evita el efecto “Salón de los espejos” que vimos en las videoconferencias.

DisplayMediaStreamOptions ahora también tiene la propiedad surfaceSwitching. Esta propiedad agrega una opción para controlar de manera 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 a los usuarios cambiar a una pestaña nueva sin tener que volver a la pestaña de videoconferencias o seleccionar entre 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 ofrece al usuario la posibilidad de elegir entre distintas plataformas de visualización: pestañas, ventanas o monitores. Con la restricción displaySurface, la app web ahora puede sugerir al navegador una sugerencia para el navegador si prefiere que uno de los tipos de plataformas 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.

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 han recurrido a 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 un indicador directo del navegador que identifica los recursos que impiden que se muestre tu página hasta que se descarguen.

Este fragmento de código 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 Métricas web esenciales y a proporcionar 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 de bloqueo de renderización y realiza optimizaciones.

Prueba de origen de la API de pixel contador pendiente

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

Un píxel contador es un conjunto 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 realice esa llamada de "enviar". Esta API delega el envío al navegador, por lo que puede admitir balizas en page unload o page hide, sin que el desarrollador tenga que implementar llamadas de envío en los momentos precisos.

Regístrese en la prueba de origen, pruebe la API y envíe comentarios sobre nuestra forma de mejorar los casos de uso.

Y mucho más.

Por supuesto que 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 abarca solo algunos aspectos destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 107.

• Novedades de las Herramientas para desarrolladores de Chrome (107)
• Bajas y eliminaciones de Chrome 107
• Actualizaciones de ChromeStatus.com para Chrome 107
• Lista de cambios del repositorio de código fuente de Chromium
• Calendario de lanzamientos de Chrome

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