asyncyawaitte permiten escribir código basado en promesas como si fuera síncrono, pero sin bloquear el subproceso principal.- Los eventos de puntero proporcionan una forma unificada de controlar todos los eventos de entrada.
- A los sitios que se agreguen a la pantalla principal se les concede automáticamente el permiso de almacenamiento continuo.
Y hay mucho más.
Soy Pete LePage. Estas son las novedades para desarrolladores en Chrome 55.
Eventos de puntero
Señalar cosas en la Web solía ser simple. Tenías un mouse, lo moviste, a veces pulsaste botones y eso fue todo. Pero esto no funciona tan bien aquí.
Los eventos táctiles son buenos, pero para ser compatibles con los modos táctil y mouse, tuviste que admitir dos modelos de eventos:
elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);
Chrome ahora habilita el control unificado de entradas mediante el despacho de PointerEvents:
elem.addEventListener('pointermove', pointerMoveEvent);
Los eventos del puntero unifican el modelo de entrada del puntero para el navegador y reúnen elementos táctiles, bolígrafos y mouse en un solo conjunto de eventos. Son compatibles con IE11, Edge, Chrome, Opera y parcialmente compatibles con Firefox.
Consulta Cómo apuntar hacia adelante para obtener más detalles.
async y await
El JavaScript asíncrono puede ser difícil de entender. Toma esta función con todas sus devoluciones de llamada "encantadas":
function logFetch(url) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('xhr failed', xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.open('GET', url);
xhr.send();
}
Volver a escribirlo con promises ayuda a evitar el problema de anidación:
function logFetch(url) {
return fetch(url)
.then(response => response.text())
.then(text => {
console.log(text);
}).catch(err => {
console.error('fetch failed', err);
});
}
Sin embargo, el código basado en promesas puede ser difícil de leer cuando hay largas cadenas de dependencias asíncronas.
Chrome ahora admite las palabras clave async y await de JavaScript, lo que te permite escribir código JavaScript basado en promesas que puede ser tan estructurado y legible como código síncrono.
En cambio, nuestra función asíncrona se puede simplificar a la siguiente:
async function logFetch(url) {
try {
const response = await fetch(url);
console.log(await response.text());
}
catch (err) {
console.log('fetch failed', err);
}
}
Jake tiene una excelente publicación: Async Functions - make Promise friendly con todos los detalles.
Almacenamiento persistente
La prueba de origen del almacenamiento persistente finalizó. Ahora puedes marcar el almacenamiento web como persistente, lo que evita que Chrome libere automáticamente el almacenamiento de tu sitio.
if (navigator.storage && navigator.storage.persist) {
navigator.storage.persist().then(granted => {
if (granted)
alert("Storage will not be cleared except by explicit user action");
else
alert("Storage may be cleared by the UA under storage pressure.");
});
}
Además, a los sitios con participación alta, que se agregaron a la pantalla principal o que tienen habilitadas las notificaciones push se les otorga automáticamente el permiso de persistencia.
Consulta la publicación sobre Almacenamiento persistente de Chris Wilson para obtener todos los detalles y descubrir cómo solicitar almacenamiento persistente para tu sitio.
Guion automático de CSS
La separación silábica automática de CSS, una de las funciones de diseño más solicitadas de Chrome, ahora es compatible con Android y Mac.
API de Web Share
Por último, ahora es más fácil invocar capacidades de uso compartido nativo con la nueva API de Web Share, que está disponible como una prueba de origen. Paul (Mr. Web Intents) Kinlan tiene todos los detalles en su publicación de Navigator Share.
Closing
Estos son solo algunos de los cambios en Chrome 55 para desarrolladores.
Si quieres estar al tanto de Chrome y conocer las novedades, suscríbete y mira los videos de Chrome Dev Summit para obtener más detalles sobre algunas de las funciones increíbles en las que está trabajando el equipo de Chrome.
Soy Pete LePage, y apenas se lance Chrome 56, estaré aquí para contarte las novedades de Chrome.