Novedades de Chrome 68

Pete LePage

Además, hay mucho más.

Soy Pete LePage. Veamos las novedades para desarrolladores en Chrome 68.

¿Quieres ver la lista completa de cambios? Consulta la lista de cambios del repositorio de código fuente de Chromium.

Agregar cambios a la pantalla principal

Si tu sitio cumple con los criterios para agregar a la pantalla principal, Chrome ya no mostrará el banner para agregar a la pantalla principal. En cambio, tienes el control sobre cuándo y cómo preguntarle al usuario.

Para pedirle al usuario, escucha el evento beforeinstallprompt. Luego, guarda el evento y agrega un botón o algún otro elemento de la IU a tu app para indicar que se puede instalar.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

Cuando el usuario haga clic en el botón de instalación, llama a prompt() en el evento beforeinstallprompt guardado; luego, Chrome mostrará el diálogo para agregar a la pantalla principal.


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

A fin de que tengas tiempo para actualizar tu sitio, Chrome mostrará una minibarra de información la primera vez que un usuario visite un sitio que cumpla con los criterios de agregar a la pantalla principal. Una vez descartada, la minibarra de información no se volverá a mostrar por un tiempo.

En Cambios en el comportamiento de Agregar a la pantalla principal, se incluyen todos los detalles, incluidas las muestras de código que puedes usar y mucho más.

API de Page Lifecycle

Cuando un usuario tiene una gran cantidad de pestañas en ejecución, los recursos críticos, como la memoria, la CPU, la batería y la red, pueden suscribirse en exceso, lo que genera una mala experiencia del usuario.

Si tu sitio se ejecuta en segundo plano, es posible que el sistema lo suspenda para conservar los recursos. Con la nueva API de Page Lifecycle, ahora puedes escuchar esos eventos y responder a ellos.

Por ejemplo, si un usuario tuvo una pestaña en segundo plano durante un tiempo, el navegador puede decidir suspender la ejecución de la secuencia de comandos en esa página para conservar recursos. Antes de hacerlo, se activará el evento freeze, lo que te permitirá cerrar las conexiones de red o de IndexedDB abiertas, o guardar el estado de vista no guardado. Luego, cuando el usuario vuelve a enfocar la pestaña, se activa el evento resume, en el que puedes reiniciar cualquier elemento que se haya eliminado.

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

Consulta la publicación de la API de Page Lifecycle de Phil para obtener muchos detalles, que incluyen muestras de código, sugerencias y mucho más. Puedes encontrar la spec y un documento de explicación en GitHub.

API de Payment Handler

La API de Payment Request es una forma abierta de aceptar pagos basada en estándares. La API de Payment Handler amplía el alcance de la solicitud de pago, ya que permite que las apps de pagos basadas en la Web faciliten los pagos directamente dentro de la experiencia de la solicitud de pago.

Como vendedor, agregar una app de pagos existente basada en la Web es tan fácil como agregar una entrada a la propiedad supportedMethods.

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

Si se instala un service worker que puede manejar la forma de pago especificada, aparecerá en la IU de Payment Request y el usuario podrá pagar con ella.

Eiji tiene una publicación excelente que muestra cómo implementar esto para los sitios de comercios y los controladores de pago.

Y mucho más.

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

Novedades de Herramientas para desarrolladores

Asegúrate de consultar las novedades de las Herramientas para desarrolladores de Chrome en Chrome 68.

Suscribirse

Luego, haz clic en el botón Suscribirse de nuestro canal de YouTube y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y apenas se lance Chrome 69, estaré aquí para contarte las novedades de Chrome.