Novedades de Chrome 85

Pete LePage

Chrome 85 comienza a lanzarse en la versión estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage, trabajo y grabo desde casa. ¡Comencemos y veamos las novedades para desarrolladores en Chrome 85!

Visibilidad del contenido

Proceso de renderización de navegadores

Para convertir tu código HTML en algo que el usuario pueda ver, el navegador debe realizar varios pasos antes de poder pintar el primer píxel. Y lo hace para toda la página, incluso para el contenido que no es visible en el viewport.

Cuando se aplica content-visibility: auto a un elemento, se le indica al navegador que puede omitir el trabajo de renderización de ese elemento hasta que se desplace al viewport, lo que proporciona una renderización inicial más rápida.


.my-class {
  content-visibility: auto;
}

Para obtener el mayor impacto de content-visibility, aplícalo a secciones superiores con algoritmos de diseño más complejos, como flexbox y grid, o que tengan elementos secundarios con diseños propios.

Cuando se segmentó el contenido y se agregó content-visibility: auto;, esta página pasó de un tiempo de renderización de 232 ms a solo 30 ms.

Consulta la visibilidad del contenido para ver cómo puedes usarla para mejorar el rendimiento de la renderización.

@property y variables de CSS

Las variables de CSS, técnicamente llamadas propiedades personalizadas, son increíbles. Con la API de propiedades y valores de CSS de Houdini, puedes definir un tipo y un valor de resguardo predeterminado para tus propiedades personalizadas. Anteriormente, los mencioné en Novedades de Chrome 78, cuando agregamos compatibilidad para definirlos en JavaScript.

A partir de Chrome 85, también puedes definir y establecer propiedades de CSS directamente en tu CSS. Lo que me encanta de las propiedades CSS es que le otorgan a la propiedad un significado semántico, valores de resguardo y hasta habilitan las pruebas de CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una tiene una gran publicación @property: otorga superpoderes a las variables de CSS que te muestra cómo puedes usarlas.

Cómo obtener apps relacionadas instaladas

La API de getInstalledRelatedApps() te permite verificar si tu app está instalada y, luego, personalizar la experiencia del usuario.

Por ejemplo, muestra contenido diferente al usuario en una página de destino si tu app already está instalada. Centraliza la funcionalidad superpuesta en una app para evitar confusiones. O bien, si tu app nativa ya está instalada, no promociones la instalación de la AWP.

Cuando se lanzó por primera vez en Chrome 80, solo funcionaba para apps para Android. Ahora, en Android, también puede verificar si tu PWA está instalada. Además, en Windows, puede verificar si tu app UWP para Windows está instalada.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Consulta mi artículo ¿Está instalada tu app? getInstalledRelatedApps() te lo dirá. Consulta web.dev para ver cómo funciona y cómo firmar tus apps para demostrar que son tuyas.

Accesos directos a íconos de apps

Combinación de teclas del ícono de la app en Windows

En Chrome 84, agregamos compatibilidad con los atajos de íconos de apps. Dije por error que estaban disponibles en todas partes, pero solo están disponibles en Android. Ahora, en Chrome 85, están disponibles en Android y Windows, y en Chrome y Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Consulta el artículo Accesos directos de íconos de apps en web.dev para obtener todos los detalles. Lamento la confusión.

Prueba de origen: Solicitudes de transmisión con fetch()

A partir de Chrome 85, la transmisión de carga de fetch está disponible como prueba de origen. Te permite iniciar una recuperación antes de que el cuerpo de la solicitud esté listo. Anteriormente, solo podías iniciar una solicitud una vez que tenías todo el cuerpo listo para comenzar. Ahora, puedes comenzar a enviar contenido, incluso mientras lo generas.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Por ejemplo, úsalo para activar el servidor o transmitir audio o video a medida que se captura desde el micrófono o la cámara.

Jake tiene un análisis detallado de las solicitudes de transmisión con la API de recuperación en web.dev y también lo analizó en el video más reciente HTTP203: Solicitudes de transmisión con recuperación.

Y mucho más

Por supuesto, hay mucho más.

Promise.any muestra una promesa que se cumple con la primera promesa dada que se cumple o se rechaza.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Reemplazar todas las instancias de una cadena es más fácil con .replaceAll(). ¡No más expresiones regulares!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 agrega compatibilidad con la decodificación de AVIF, un formato de imagen codificado con AV1 y estandarizado por la Alliance for Open Media. AVIF ofrece mejoras significativas en la compresión en comparación con JPEG y WebP. Un estudio reciente de Netflix muestra un ahorro del 50% en comparación con el JPEG estándar y más del 60% en el contenido 4:4:4.

Y comenzó la eliminación de AppCache.

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 85.

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Desarrolladores de Chrome y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage y, por fin, me corté el pelo.

En cuanto se lance Chrome 86, estaré aquí para contarte las novedades.