Novedades de Chrome 85

Pete LePage

Chrome 85 ya comenzó a lanzarse en la versión estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage, trabajo y grabo desde casa. Veamos las novedades para desarrolladores en Chrome 85.

Visibilidad del contenido

Proceso de renderización de los navegadores

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

Aplicar content-visibility: auto a un elemento le indica al navegador que puede omitir el trabajo de renderización de ese elemento hasta que se desplace a la ventana gráfica, 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 principales con algoritmos de diseño más complejos, como flexbox y grid, o que tengan elementos secundarios con diseños contenidos propios.

Al dividir el contenido en fragmentos y agregar content-visibility: auto;, esta página pasó de un tiempo de procesamiento de 232 ms a solo 30 ms.

Consulta la visibilidad del contenido para ver cómo puedes usarla y 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 Houdini CSS Properties and Values, puedes definir un tipo y un valor de resguardo predeterminado para tus propiedades personalizadas. Ya los había explicado 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 de CSS es que le dan a la propiedad un significado semántico, valores de resguardo y hasta permiten realizar pruebas de CSS.

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

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

Obtener apps relacionadas instaladas

La API de getInstalledRelatedApps() permite que tú verifiques si tu app está instalada y, luego, personalices la experiencia del usuario.

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

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

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

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

Combinaciones de teclas de íconos de apps

Atajo al ícono de la app en Windows

En Chrome 84, agregamos compatibilidad con los accesos directos de íconos de apps. Por accidente, dije que estaban disponibles en todas partes, pero solo estaban 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 Atajos de íconos de apps en web.dev para obtener todos los detalles. Lamento la confusión que causé.

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. Pero 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 calentar el servidor o transmitir audio o video a medida que se captura desde el micrófono o la cámara.

Jake analiza en detalle las solicitudes de transmisión con la API de Fetch en web.dev y también las abordó en el video más reciente de HTTP203: Solicitudes de transmisión con Fetch.

Y mucho más

Por supuesto, hay mucho más.

Promise.any devuelve 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 en una cadena es más fácil con .replaceAll(), ¡ya no se necesitan 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 ganancias significativas en la compresión en comparación con JPEG y WebP. Un reciente estudio de Netflix mostró un ahorro del 50% en comparación con JPEG estándar y más del 60% en el contenido 4:4:4.

Además, se inició la eliminación de AppCache.

Lecturas adicionales

Esto abarca solo algunos de los aspectos destacados clave. Consulta los vínculos 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 Chrome Developers 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 cabello.

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