Novedades de Chrome 76

Pete LePage

En Chrome 76, agregamos compatibilidad con lo siguiente:

Soy Pete LePage. Comencemos y veamos las novedades para desarrolladores en Chrome 76.

Botón de instalación del cuadro multifunción de la AWP

En Chrome 76, agregamos un botón de instalación a la barra de direcciones, que a veces denominada cuadro multifunción, para facilitar que los usuarios instalen apps web progresivas en el escritorio.

Si tu sitio cumple con los criterios de instalación de apps web progresivas, Chrome mostrará un botón de instalación en el cuadro multifunción para indicarle al usuario que se puede instalar la AWP. Si el usuario hace clic en el botón de instalación, es básicamente lo mismo que llamar a prompt() en el evento beforeinstallprompt, ya que muestra el diálogo de instalación, lo que facilita la instalación de tu AWP.

Consulta Instalación de la barra de direcciones para apps web progresivas en el escritorio para obtener más detalles.


Más control sobre la minibarra de información de la AWP

Ejemplo de la minibarra informativa para agregar a la pantalla principal de AirHorner

En dispositivos móviles, Chrome muestra la minibarra de información la primera vez que un usuario visita tu sitio si este cumple con los criterios de capacidad de instalación de las apps web progresivas. Nos informaron que quieren evitar que aparezca la minibarra de información y, en su lugar, ofrecer su propia promoción de instalación.

A partir de Chrome 76, si llamas a preventDefault() en el evento beforeinstallprompt, dejará de aparecer la minibarra de información.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

Asegúrate de actualizar la IU para que los usuarios sepan que se puede instalar la AWP. Consulta Patrones para promocionar la instalación de AWP a fin de conocer nuestras prácticas recomendadas para promocionar la instalación de tus apps web progresivas.

Actualizaciones más rápidas de WebAPK

Cuando se instala una app web progresiva en Android, Chrome solicita e instala automáticamente un APK web. Después de instalarla, Chrome verifica periódicamente si cambió el manifiesto de la app web, por ejemplo, si actualizaste los íconos, los colores o cambiaste el nombre de la app para ver si se requiere un WebAPK nuevo.

A partir de Chrome 76, Chrome revisará el manifiesto con mayor frecuencia y lo revisará todos los días, en lugar de cada tres días. Si cambió alguna de las propiedades clave, Chrome solicitará e instalará un nuevo WebAPK para asegurarse de que el título, los íconos y otras propiedades estén actualizados.

Para obtener información completa, consulta Cómo actualizar los WebAPK con más frecuencia.

Modo oscuro

Muchos sistemas operativos ahora admiten un modo oscuro o tema oscuro.

La consulta de medios prefers-color-scheme te permite ajustar el aspecto de tu sitio para que coincida con el modo preferido del usuario.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom tiene un excelente artículo Hello oscuridad, mi viejo amigo en web.dev con todo lo que necesitas saber, además de sugerencias para diseñar tus hojas de estilo de modo que admitan tanto el modo claro como el oscuro.

Y mucho más.

Estos son solo algunos de los cambios en Chrome 76 para desarrolladores; por supuesto, hay mucho más.

Promise.allSettled()

En lo personal, me entusiasma mucho Promise.allSettled(). Es similar a Promise.all(), pero espera hasta que todas las promesas se establezcan antes de regresar.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

Leer BLOB es más fácil

Los elementos Blob son más fáciles de leer con tres métodos nuevos: text(), arrayBuffer() y stream(). Esto significa que ya no tenemos que crear un wrapper alrededor del lector de archivos.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Compatibilidad de imágenes en la API del portapapeles asíncrono

Además, agregamos compatibilidad con imágenes en la API de portapapeles asíncrono, lo que facilita copiar y pegar imágenes de manera programática.

Lecturas adicionales

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

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 77, estaré aquí para contarte todo lo nuevo de Chrome.