Novedades de Chrome 76

Pete LePage

En Chrome 76, agregamos compatibilidad con lo siguiente:

Mi nombre es Pete LePage. Profundicemos y veamos las novedades para los desarrolladores en Chrome 76.

Botón de instalación de la AWP en el cuadro multifunción

En Chrome 76, facilitamos que los usuarios instalen apps web progresivas en computadoras de escritorio. Para ello, agregamos un botón de instalación a la barra de direcciones, que a veces se denomina barra omni.

Si tu sitio cumple con los criterios de instalabilidad de apps web progresivas, Chrome mostrará un botón de instalación en la barra omnibúsqueda que le indicará al usuario que puede instalar tu AWP. Si el usuario hace clic en el botón de instalación, es lo mismo que llamar a prompt() en el evento beforeinstallprompt. Muestra el diálogo de instalación, lo que facilita que el usuario instale tu AWP.

Consulta Instalación de la barra de direcciones para aplicaciones web progresivas en computadoras para obtener todos los detalles.


Mayor control sobre la barra de información en miniatura de la AWP

Ejemplo de la minibarra de información Agregar a la pantalla principal para AirHorner

En dispositivos móviles, Chrome muestra la minibarra de información la primera vez que un usuario visita tu sitio si cumple con los criterios de instalabilidad de apps web progresivas. Nos enteraste de que quieres evitar que aparezca la minibarra de información y proporcionar tu propia promoción de instalación.

A partir de Chrome 76, llamar a preventDefault() en el evento beforeinstallprompt impedirá que aparezca 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 tu AWP. Consulta Patrones para promover la instalación de AWP para conocer nuestras prácticas recomendadas para promover la instalación de tus apps web progresivas.

Actualizaciones más rápidas de WebAPKs

Cuando se instala una app web progresiva en Android, Chrome solicita e instala automáticamente un APK web. Después de instalarse, Chrome verifica de forma periódica 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 nuevo WebAPK.

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

Consulta Cómo actualizar WebAPKs con más frecuencia para obtener todos los detalles.

Modo oscuro

Muchos sistemas operativos ahora admiten un modo oscuro o un 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 darkness, my old friend en web.dev con todo lo que necesitas saber, además de sugerencias para diseñar tus hojas de estilo para admitir un modo claro y uno oscuro.

Y mucho más.

Estos son solo algunos de los cambios que se implementarán en Chrome 76 para desarrolladores, por supuesto, hay muchos más.

Promise.allSettled()

En lo personal, estoy muy emocionado por Promise.allSettled(). Es similar a Promise.all(), excepto que 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).

Es más fácil leer los blobs

Los Blob son más fáciles de leer con tres métodos nuevos: text(), arrayBuffer() y stream(), lo que 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 con imágenes en la API de Async Clipboard

Además, agregamos compatibilidad con imágenes a la API de Asynchronous Clipboard, lo que facilita copiar y pegar imágenes de forma programática.

Lecturas adicionales

Aquí se incluyen solo algunos de los aspectos más destacados. Consulta los vínculos que se indican a continuación para ver cambios adicionales en Chrome 76.

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, en cuanto se lance Chrome 77, estaré aquí para contarte las novedades.