Novedades de Chrome 84

Ahora el lanzamiento de Chrome 84 es estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage, y trabajo y disparo desde casa. Profundicemos y veamos las novedades para desarrolladores en Chrome 84.

Accesos directos a íconos de apps

Accesos directos a los íconos de la app para la AWP de Twitter

Las combinaciones de teclas para íconos permiten a los usuarios iniciar con rapidez tareas comunes dentro de la app. Por ejemplo, redactar un nuevo tweet, enviar un mensaje o ver sus notificaciones. Son compatibles con Chrome para Android.

Para invocar estos accesos directos, se debe mantener 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 completar tareas rápidamente con accesos directos a aplicaciones para obtener más detalles.

API de Web Animations

En Chrome 84, se agrega una serie de funciones que antes no eran compatibles a la API de Web Animations.

  • Se prometeron animation.ready y animation.finished.
  • Ahora, el navegador puede limpiar y quitar animaciones antiguas, lo que ahorra memoria y mejora el rendimiento.
  • Ahora, puedes combinar animaciones con modos compuestos, con las opciones add y accumulate.

No puedo hacer justicia por todas las mejoras ni ofrecer buenos ejemplos aquí, así que consulta las mejoras de la API de animaciones web en Chromium 84 para obtener más detalles.

API de indexación de contenido

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

Con la API de Content Indexing, que acaba de finalizar la prueba original, puedes agregar URL 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 service worker 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 el contenido que ya está 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 Cómo indexar las páginas que pueden funcionar sin conexión con la API de Content Indexing.

API de bloqueo de activación

Implementación de bloqueos de activación en el sitio web de Betty Crocker

Me gusta cocinar, pero me parece muy frustrante cuando se sigue una receta, y aparece el protector de pantalla. Con la API de bloqueo de activación, que también cambia de su 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 la usa hoy 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 mucho más que eso, así que consulta Cómo mantenerse activo con la API de Screen Wake Lock, pero al menos mi pantalla ya no estará cubierta de harina.

Pruebas de origen

Hay dos pruebas de origen nuevas que quiero destacar. 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 estado inactivo

La API de Idle Detection te notifica cuando un usuario está inactivo, lo que indica que posiblemente esté lejos de la computadora. Esto es ideal para aplicaciones de chat o sitios de redes sociales, que les permiten 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 Detecta 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 ensamblaje web

Además, la SIMD de Web Assembly inicia una prueba de origen. Presenta operaciones que se asignan a instrucciones SIMD disponibles comúnmente en hardware. Las operaciones SIMD se usan para mejorar el rendimiento, especialmente en las aplicaciones multimedia.

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

Y mucho más

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

Lecturas adicionales

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

Suscribirse

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

Mi nombre es Pete LePage y todavía necesito un corte de pelo, pero en cuanto se lance Chrome 85, estaré aquí para comentarte las novedades de Chrome.