Novedades de Chrome 79

Pete LePage

Ya está disponible Chrome 79.

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 Progressive Web App, es probable que hayas notado el molesto círculo blanco alrededor del ícono.

Por suerte, Chrome 79 ahora admite íconos enmascarables para las apps web progresivas instaladas. Deberás diseñar tu ícono para que se ajuste a la zona segura, que es, en esencia, un círculo con un diámetro que es 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 en CSS Tricks: Maskable Icons: Android Adaptive Icons for Your PWA con todos los detalles y una excelente herramienta que puedes usar para probar tus íconos y asegurarte de que se ajusten.

Web XR

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

WebXR permite un amplio espectro de experiencias envolventes. Desde usar la realidad aumentada para ver cómo se vería un sofá nuevo en tu casa antes de comprarlo, hasta juegos de realidad virtual y películas de 360 grados, 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 te permiten proporcionar 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 ofertamos una prueba de origen para una función, puedes registrarte en esa prueba para habilitar la función para todos los usuarios de tu origen.

Si habilitas una prueba de origen, podrás compilar demostraciones y prototipos que los usuarios de pruebas beta puedan probar durante la prueba sin que deban activar ninguna marca especial en Chrome.

Obtén 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 pruebas de origen activas y registrarte en ellas en la página Pruebas de origen de Chrome.

Bloqueo de activación

Una de mis mayores manías sobre Presentaciones de Google es que, si dejas la presentación abierta en una sola diapositiva durante demasiado 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 la pantalla se atenúe o que se active el protector de pantalla. Es perfecto para Presentaciones, pero también es útil para sitios de recetas, en los que es posible que quieras 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 salga de la página o llame 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

Hay ocasiones en las que no quieres que parte del DOM se represente de inmediato. Por ejemplo, desplazadores con una gran cantidad de contenido o IUs 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. Esto permite que el navegador dedique 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 prueba, lo que permite realizar optimizaciones de renderización.

Si cambias rendersubtree a activatable, se hace visible el contenido quitando el atributo invisible y renderizándolo.

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 cadena de Twitter con todo lo divertido que sucedió entre las charlas, incluido el miembro más nuevo de nuestro equipo, Surjiko.

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

Suscribirse

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

Soy Pete LePage y, en cuanto se lance Chrome 80, estaré aquí para contarte las novedades de Chrome.