Novedades de Chrome 84

Pete LePage

Chrome 84 comienza a lanzarse en la versión estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage, trabajo y grabo desde casa. ¡Comencemos y veamos las novedades para desarrolladores en Chrome 84!

Accesos directos a íconos de apps

Atajos del ícono de la app para la AWP de Twitter

Los accesos directos del ícono de la app permiten que los usuarios inicien rápidamente tareas comunes dentro de tu app. Por ejemplo, redactar un tweet nuevo, enviar un mensaje o ver sus notificaciones. Son compatibles con Chrome para Android.

Para invocar estos atajos, mantén presionado el ícono de la app en Android. Es fácil agregar un atajo a tu AWP. Crea una nueva propiedad shortcuts en el manifiesto de tu app web, describe el atajo y agrega tus íconos.


"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 Cómo hacer las cosas rápidamente con atajos de apps para obtener todos los detalles.

API de Web Animations

Chrome 84 agrega una gran cantidad de funciones que antes no se admitían a la API de Web Animations.

  • animation.ready y animation.finished se convirtieron en promesas.
  • Ahora, el navegador puede limpiar y quitar animaciones antiguas, lo que ahorra memoria y mejora el rendimiento.
  • Además, ahora puedes combinar animaciones con modos compuestos con las opciones add y accumulate.

No puedo hacer justicia a todas las mejoras ni ofrecer buenos ejemplos aquí, así que consulta las mejoras de la API de Web Animations en Chromium 84 para obtener todos los detalles.

API de Content Indexing

Si tu contenido está disponible sin conexión de red. Pero el usuario no lo sabe. ¿Está realmente disponible? Hay un problema de descubrimiento.

Con la API de Content Indexing, que acaba de salir de la prueba original, puedes agregar URLs y metadatos para el contenido que está disponible sin conexión. Con esos metadatos, el contenido se muestra al usuario, lo que mejora la visibilidad.

Para agregar contenido al índice, llama a index.add() en el registro del trabajador de servicio y proporciona los metadatos necesarios sobre el contenido.


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

¿Quieres ver qué contenido ya está en tu índice? Llama a index.getAll() en el registro del trabajador de servicio.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Consulta Cómo indexar tus páginas compatibles con la conexión sin conexión con la API de Content Indexing para obtener todos los detalles.

API de Wake Lock

Implementación del bloqueo de activación en el sitio web de Betty Crocker.

Me gusta cocinar, pero me resulta muy frustrante seguir una receta y que se active el protector de pantalla. Con la API de bloqueo de activación, que también pasa de la prueba de origen en Chrome 84, los sitios pueden solicitar un bloqueo de activación para evitar que la pantalla se atenúe y se bloquee.

De hecho, el sitio web de Betty Crocker ya lo utiliza y publicó un caso de éxito en web.dev que muestra un aumento del 300% en los indicadores de intención de compra.

Para obtener un bloqueo de activación, llama a navigator.wakeLock.request(), que muestra un objeto WakeLockSentinel, que se usa para "liberar" el bloqueo de activación.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Por supuesto, hay un poco más que eso, así que consulta Cómo mantener la pantalla activa con la API de Screen Wake Lock, pero, al menos, mi pantalla ya no estará cubierta de harina.

Pruebas de origen

Quiero destacar dos pruebas de origen nuevas. Si es la primera vez que usas las pruebas de origen, consulta Cómo comenzar a usar las pruebas de origen de Chrome.

Detección de inactividad

La API de detección de inactividad te notifica cuando un usuario está inactivo, lo que indica que es posible que no esté en su computadora. Esto es muy útil para aplicaciones de chat o sitios de redes sociales, ya que les permite a los usuarios saber si sus contactos están disponibles o no.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

Consulta Cómo detectar usuarios inactivos con la API de Idle Detection para obtener más información sobre la API y cómo puedes comenzar a experimentar con ella hoy mismo.

SIMD de Web Assembly

Además, el SIMD de Web Assembly inicia una prueba de origen. Presenta operaciones que se asignan a instrucciones SIMD de uso general en el hardware. Las operaciones SIMD se usan para mejorar el rendimiento, especialmente en aplicaciones multimedia.

Para obtener más información sobre SIMD de WebAssembly, consulta Aplicaciones paralelas y rápidas con SIMD de WebAssembly.

Y mucho más

Chrome 84 es importante, pero hay otras actualizaciones importantes que quiero destacar.

Lecturas adicionales

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

Suscribirse

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

Soy Pete LePage y aún necesito un corte de cabello, pero en cuanto se lance Chrome 85, estaré aquí para contarte las novedades de Chrome.