- 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 pago basadas en la Web admitan la experiencia de Payment Request.
¡Y hay mucho más!
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 que realice una acción, 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 hace clic en el botón de instalación, llama a prompt()
en el evento beforeinstallprompt
guardado y, luego, Chrome muestra 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);
});
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 Cambios para agregar al comportamiento de la pantalla principal, encontrarás todos los detalles, incluidas 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 tener una suscripción excesiva, 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 derribó.
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 Phil sobre la API de Page Lifecycle para obtener muchos más detalles, incluidos ejemplos de código, sugerencias y mucho más. Puedes encontrar la especificación y un documento explicativo en GitHub.
API de Payment Handler
La Payment Request API 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 basada en la Web existente 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 gran publicación en la que muestra cómo implementar esto en los sitios de comercios y en los controladores de pagos.
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 paragrab
ygrabbing
tienen prefijos, por lo que ahora admitimos los valores estándar sin prefijos. Por último. - Y esto es importante. La caché HTTP ahora se ignora cuando se solicitan actualizaciones a un trabajador de servicio, lo que alinea a Chrome con la especificación 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.
Suscribirse
Luego, haz clic en el botón Suscribirse en 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.