¡Chrome 79 se está lanzando ahora!
- Las apps web progresivas instaladas en Android ahora admiten íconos enmascarables.
- Ahora puedes crear experiencias envolventes con la API de WebXR Device.
- La API de Wake Lock está disponible como prueba de origen.
- El atributo
rendersubtree
está disponible como prueba de origen. - Los videos de la Chrome DevSummit ahora están en línea.
- y mucho más.
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.
- Novedades de las Herramientas para desarrolladores de Chrome (79)
- Bajas y eliminaciones de Chrome 79
- Actualizaciones de ChromeStatus.com para Chrome 79
- Novedades de JavaScript en Chrome 79
- Lista de cambios del repositorio de código fuente de Chromium
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.