Novedades de Chrome 84

Pete LePage

Ya se está lanzando Chrome 84 estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage, y trabajo y grabo desde casa. Ahora veremos las novedades para los desarrolladores en Chrome 84.

Accesos directos para íconos de apps

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

Los accesos directos para íconos de apps facilitan a los usuarios el inicio rápido de 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. Agregar un acceso directo a tu AWP es sencillo, crea una nueva propiedad shortcuts en el manifiesto de tu app web, describe el acceso directo 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

En Chrome 84, se agregan muchas funciones que antes no eran compatibles 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.

Simplemente no puedo hacer justicia por todas las mejoras ni ofrecer buenos ejemplos aquí, así que consulta Mejoras de la API de Web Animations en Chromium 84 para obtener más detalles.

API de Content Indexing

Si tu contenido está disponible sin conexión de red. Pero el usuario no lo sabe. ¿De verdad está 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 lo que ya hay en tu índice? Llama a index.getAll() en el registro del service worker.

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

Para obtener más información, consulta Indexa tus páginas que admiten el uso sin conexión con la API de Content Indexing.

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, SIMD de Web Assembly inicia una prueba de origen. Presenta operaciones que se asignan a instrucciones SIMD comúnmente disponibles en hardware. Las operaciones SIMD se usan para mejorar el rendimiento, especialmente en aplicaciones multimedia.

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

Y mucho más

Chrome 84 es grande, pero quiero destacar algunas otras actualizaciones importantes.

Lecturas adicionales

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

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 aún necesito un corte de cabello, pero en cuanto se lance Chrome 85, estaré aquí para contarte las novedades de Chrome.