asyncyawaitte permiten escribir un código basado en promesas como si fuese síncrono, pero sin bloquear el subproceso principal.- Los eventos del puntero proporcionan una forma unificada de controlar todos los eventos de entrada.
- Los sitios que se agregan a la pantalla principal obtienen automáticamente el permiso de almacenamiento persistente.
Y hay mucho más.
Soy Pete LePage y te presento las novedades de Chrome 55 para desarrolladores.
Eventos de puntero
Señalar elementos en la Web solía ser sencillo. Tenías un mouse, lo movías, a veces presionabas botones y eso era todo. Pero esto no funciona tan bien aquí.
Los eventos táctiles son buenos, pero para admitir toque y mouse, debías admitir dos modelos de eventos:
elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);
Chrome ahora habilita el manejo de entradas unificado mediante el envío de PointerEvents:
elem.addEventListener('pointermove', pointerMoveEvent);
Los eventos del puntero unifican el modelo de entrada del puntero para el navegador, lo que une la función táctil, los lápices y los mouse en un solo conjunto de eventos. Son compatibles con IE11, Edge, Chrome, Opera y, de forma parcial, con Firefox.
Consulta Pointing the Way Forward para obtener más detalles.
async y await
El JavaScript asíncrono puede ser difícil de razonar. Toma esta función con todas sus devoluciones de llamada "preciosas":
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();
}
Rescribirlo 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 cadenas largas de dependencias asíncronas.
Chrome ahora admite las palabras clave de JavaScript async y await, lo que te permite escribir JavaScript basado en promesas que puede ser tan estructurado y legible como el código síncrono.
En su lugar, nuestra función asíncrona se puede simplificar a lo 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 gran publicación: Async Functions - making promises friendly con todos los detalles.
Almacenamiento persistente
Finalizó la prueba del origen de almacenamiento persistente. Ahora puedes marcar el almacenamiento web como persistente, lo que evita que Chrome borre 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, los sitios que tienen una participación alta, se agregaron a la pantalla principal o tienen habilitadas las notificaciones push obtienen automáticamente el permiso de persistencia.
Consulta la publicación Persistent Storage de Chris Wilson para obtener detalles completos y saber cómo puedes solicitar almacenamiento persistente para tu sitio.
Traducción automática de guiones en CSS
La división automática de palabras 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 las funciones de uso compartido nativas con la nueva API de Web Share, que está disponible como prueba de origen. Paul (Mr. Web Intents) Kinlan tiene todos los detalles en su publicación sobre Navigator Share.
Closing
Estos son solo algunos de los cambios en Chrome 55 para desarrolladores.
Si quieres mantenerte al tanto de las novedades de Chrome y saber qué está por llegar, asegúrate de suscribirte y de ver los videos de Chrome Dev Summit para obtener más información sobre algunas de las funciones increíbles en las que está trabajando el equipo de Chrome.
Soy Pete LePage y, en cuanto se lance Chrome 56, estaré aquí para contarte las novedades.