Se usó la API de Cloud Translation para traducir esta página.

Novedades de Chrome 68

Pete LePage

El comportamiento de Agregar a la pantalla principal en Android cambiará para brindarte más control.
La API de Page Lifecycle te indica cuándo se suspendió o restauró tu pestaña.
Además, la API de Payment Handler permite que las apps de pagos basadas en la Web admitan la experiencia de Payment Request.

Soy Pete LePage. Analicemos 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.

Cambios en la opción Agregar 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 control sobre cuándo y cómo solicitarle al usuario.

Para solicitarle al usuario, escucha el evento beforeinstallprompt, luego, guárdalo 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 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);
});

Para darte 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 para agregarlo a la pantalla principal. Una vez que se descarte, la minibarra de información no se volverá a mostrar durante un tiempo.

En Changes to Add to Add to Home Screen Behavior, encontrarás 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 recursos. Con la nueva API de Page Lifecycle, ahora puedes detectar estos eventos y responderlos.

Por ejemplo, si un usuario tiene una pestaña en segundo plano durante un tiempo, el navegador puede 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 IndexedDB abiertas, o guardar cualquier estado de vista no guardado. Luego, cuando el usuario vuelve a enfocar la pestaña, se activa el evento resume, en el que puedes volver a inicializar todo lo que se desmanteló.

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 en Phil para obtener muchos detalles, incluidas muestras de código, sugerencias y mucho más. Puedes encontrar la especificación y un documento explicativo en GitHub.

API de Payment Handler

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

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 trabajador de servicio que puede controlar la forma de pago especificada, aparecerá en la IU de la solicitud de pago y el usuario podrá pagar con ella.

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

Y mucho más.

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

El contenido incorporado en un iframe requiere un gesto del usuario para navegar por el contexto de navegación de nivel superior a un origen diferente.
Desde Chrome 1, los valores cursor de CSS para grab y grabbing tienen un prefijo, y ahora admitimos los valores estándar sin prefijo. Por último.
Y esto es importante. La caché de HTTP ahora se ignora cuando se solicitan actualizaciones a un service worker, lo que vincula a Chrome con las especificaciones y otros navegadores.

Novedades de DevTools

Asegúrate de consultar Novedades de las Herramientas para desarrolladores de Chrome para conocer las funciones nuevas de DevTools en Chrome 68.

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