Novedades de Chrome 85

Pete LePage

Chrome 85 está comenzando a lanzarse de forma estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage. Trabajo y disparo desde casa. Veamos las novedades para desarrolladores en Chrome 85.

Visibilidad del contenido

Proceso de procesamiento de navegadores

Para convertir tu HTML en algo que el usuario pueda ver, es necesario que el navegador realice una serie de 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.

Si aplicas 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 contenidos.

Cuando se fragmentó 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 y descubre cómo puedes usarla para mejorar el rendimiento de la renderización.

Variables @property y CSS

Las variables de CSS, técnicamente denominadas propiedades personalizadas, son geniales. 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 abordamos en Novedades de Chrome 78, cuando agregamos la compatibilidad para definirlos en JavaScript.

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

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

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

Cómo instalar apps relacionadas

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

Por ejemplo, puedes mostrar contenido diferente a los usuarios en una página de destino si la app ya 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 envió por primera vez en Chrome 80, solo funcionaba con apps para Android. Ahora, en Android, también puede comprobar si la AWP está instalada. Y en Windows, puede comprobar si tu app de UWP de Windows está instalada.

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

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

Combinaciones de teclas para íconos de apps

Acceso directo al ícono de la app en Windows

En Chrome 84, agregamos compatibilidad con combinaciones de teclas del ícono de la app. Accidentalmente dije que estaban disponibles en todas partes, pero solo en Android. Ahora, en Chrome 85, están disponibles para Android y Windows, y también 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 del ícono de la app en web.dev para obtener más información. Lamento la confusión que causé.

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

A partir de Chrome 85, la transmisión de cargas 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 usar. Sin embargo, ahora puedes comenzar a enviar contenido, incluso mientras se genera.

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

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

Por ejemplo, úsalo para preparar el servidor o transmitir audio o video mientras se captura con el micrófono o la cámara.

Jake analiza en detalle las solicitudes de transmisión con la API de recuperación en web.dev y el video anterior HTTP203: Solicitudes de transmisión con recuperación.

Más entornos

Por supuesto, hay mucho más.

Promise.any muestra una promesa que cumple la primera promesa determinada que se cumplirá o rechazará.

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

Reemplazar todas las instancias en una string es más fácil con .replaceAll(): ya no hay 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 para AVIF, un formato de imagen codificado con AV1 y estandarizado por Alliance for Open Media. AVIF ofrece mejoras de compresión significativas en comparación con JPEG y WebP, con un estudio reciente de Netflix que muestra un ahorro del 50% en comparación con los archivos JPEG estándar y más del 60% de ahorro en contenido de 4:4:4.

Además, comenzó la eliminación de AppCache.

Lecturas adicionales

Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver más cambios en Chrome 85.

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete a nuestro canal de YouTube para desarrolladores de Chrome. 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 de Chrome.