Novedades de Chrome 79

¡Chrome 79 se está lanzando ahora!

Soy Pete LePage. Comencemos y veamos las novedades para desarrolladores en Chrome 79.

Íconos enmascarables

Si ejecutas Android O o una versión posterior, e instalaste una app web progresiva, es probable que hayas notado el molesto círculo blanco alrededor del ícono.

Afortunadamente, Chrome 79 ahora admite íconos enmascarables para apps web progresivas instaladas.Deberás diseñar el ícono de modo que se ajuste a la zona segura, básicamente un círculo con un diámetro que representa el 80% del lienzo.

Luego, en el manifiesto de la app web, deberás agregar una nueva propiedad purpose al ícono y establecer su valor en maskable.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes tiene una excelente publicación sobre trucos de CSS: Íconos enmascarables: íconos adaptables de Android para tu AWP con todos los detalles y tiene una gran herramienta que puedes usar para probar los íconos y asegurarte de que se ajusten.

Web XR

Ahora puedes crear experiencias envolventes para smartphones y pantallas de cabeza con la API de WebXR Device.

WebXR ofrece un espectro completo de experiencias envolventes. desde usar realidad aumentada para ver cómo se vería un nuevo sofá en tu casa antes de comprarlo, hasta juegos de realidad virtual, películas en 360° y mucho más.

Para comenzar a usar la nueva API, lee La realidad virtual llega a la Web.

Nuevas pruebas de origen

Las pruebas de origen nos brindan la oportunidad de validar las funciones experimentales y las APIs, y permitirte enviar comentarios sobre su usabilidad y eficacia en una implementación más amplia.

Por lo general, las funciones experimentales solo están disponibles detrás de una marca, pero cuando ofrecemos una prueba de origen para una función, puedes registrarte en esa prueba si quieres habilitarla para todos los usuarios del origen.

Participar en una prueba de origen te permite compilar demostraciones y prototipos que los usuarios de pruebas beta pueden probar durante la prueba sin necesidad de activar marcas especiales en Chrome.

Hay más información sobre las pruebas de origen en la Guía de pruebas de origen para desarrolladores web. Puedes ver una lista de las pruebas de origen activas y registrarte para obtenerlas en la página Pruebas de origen de Chrome.

Bloqueo de activación

Una de mis mayores molestias de Presentaciones de Google es que si dejas la presentación abierta en una sola diapositiva durante mucho tiempo, se activa el protector de pantalla. Antes de continuar, debes desbloquear la computadora. ¡Uf!

Sin embargo, con la nueva API de Wake Lock, una página puede solicitar un bloqueo y evitar que se atenúe la pantalla o que se active el protector de pantalla. Es perfecto para Presentaciones, pero también es útil para actividades como sitios de recetas, en los que quizás desees mantener la pantalla encendida mientras sigues las instrucciones.

Para solicitar un bloqueo de activación, debes llamar a navigator.wakeLock.request() y guardar el objeto WakeLockSentinel que muestra.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

El bloqueo se mantiene hasta que el usuario sale de la página o hasta que llamas a release en el objeto WakeLockSentinel que guardaste antes.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Obtén más información en web.dev/wakelock.

Atributo rendersubtree

A veces, no querrás que parte del DOM se represente de inmediato. Por ejemplo, desplazadores con una gran cantidad de contenido o IU con pestañas en las que solo una parte del contenido es visible en un momento determinado.

El nuevo atributo rendersubtree le indica al navegador que puede omitir la renderización de ese subárbol. De esta manera, el navegador puede dedicar más tiempo a procesar el resto de la página, lo que aumenta el rendimiento.

Cuando rendersubtree se establece en invisible, el contenido del elemento no se dibuja ni se somete a pruebas de posicionamiento, lo que permite optimizaciones de renderización.

Si cambias el rendersubtree a activatable, el contenido será visible. Para ello, debes quitar el atributo invisible y renderizar el contenido.

Chrome Dev Summit 2019

Si te perdiste la Chrome Dev Summit, todas las charlas están en nuestro canal de YouTube.

Jake también tiene una excelente conversación en Twitter con todo el contenido divertido que se mantuvo entre las charlas, incluido el miembro más nuevo de nuestro equipo, Surjiko.

Lecturas adicionales

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

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