asyncetawaitvous permettent d'écrire du code basé sur des promesses comme s'il était synchrone, mais sans bloquer le thread principal.- Les événements de pointeur offrent un moyen unifié de gérer tous les événements d'entrée.
- Les sites ajoutés à l'écran d'accueil reçoivent automatiquement l'autorisation de stockage persistant.
Et ce n'est pas tout.
Je m'appelle Pete LePage. Voici les nouveautés de Chrome 55 pour les développeurs.
Événements de pointeur
Il était autrefois simple de pointer sur des éléments sur le Web. Vous aviez une souris, vous la déplaciez, parfois vous appuyiez sur des boutons, et c'était tout. Mais cela ne fonctionne pas très bien ici.
Les événements tactiles sont utiles, mais pour prendre en charge la tactile et la souris, vous deviez prendre en charge deux modèles d'événements:
elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);
Chrome permet désormais une gestion unifiée des entrées en distribuant des PointerEvents:
elem.addEventListener('pointermove', pointerMoveEvent);
Les événements de pointeur unifient le modèle d'entrée de pointeur pour le navigateur, en regroupant les entrées tactiles, les stylets et les souris dans un seul ensemble d'événements. Ils sont compatibles avec IE11, Edge, Chrome, Opera et partiellement avec Firefox.
Pour en savoir plus, consultez Pointing the Way Forward.
async et await
Le code JavaScript asynchrone peut être difficile à raisonner. Prenez cette fonction avec tous ses rappels "adorables" :
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();
}
En le réécrivant avec promises, vous évitez le problème d'imbrication:
function logFetch(url) {
return fetch(url)
.then(response => response.text())
.then(text => {
console.log(text);
}).catch(err => {
console.error('fetch failed', err);
});
}
Toutefois, le code basé sur les promesses peut toujours être difficile à lire en présence de longues chaînes de dépendances asynchrones.
Chrome est désormais compatible avec les mots clés JavaScript async et await, ce qui vous permet d'écrire du code JavaScript basé sur des promesses qui peut être aussi structuré et lisible que le code synchrone.
À la place, notre fonction asynchrone peut être simplifiée comme suit:
async function logFetch(url) {
try {
const response = await fetch(url);
console.log(await response.text());
}
catch (err) {
console.log('fetch failed', err);
}
}
Jake a écrit un excellent article intitulé Fonctions asynchrones – Construire des promesses adaptées qui contient tous les détails.
Stockage persistant
La phase d'évaluation de l'origine du stockage persistant est maintenant terminée. Vous pouvez désormais marquer l'espace de stockage Web comme persistant, ce qui empêche Chrome de le vider automatiquement pour votre site.
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.");
});
}
De plus, les sites qui enregistrent un engagement élevé, qui ont été ajoutés à l'écran d'accueil ou dont les notifications push sont activées reçoivent automatiquement l'autorisation de persistance.
Consultez l'article Stockage persistant de Chris Wilson pour en savoir plus et découvrir comment demander un stockage persistant pour votre site.
Césure automatique CSS
La césure automatique CSS, l'une des fonctionnalités de mise en page les plus demandées dans Chrome, est désormais disponible sur Android et Mac.
API Web Share
Enfin, il est désormais plus facile d'invoquer les fonctionnalités de partage natif avec la nouvelle API Web Share, disponible en version d'essai d'origine. Paul (Mr. Web Intents) Kinlan fournit tous les détails dans son article sur le partage dans le navigateur.
Conclusion
Ce ne sont là que quelques-uns des changements apportés à Chrome 55 pour les développeurs.
Si vous souhaitez vous tenir informé de Chrome et connaître les nouveautés à venir, n'oubliez pas de vous abonner et de regarder les vidéos du Chrome Dev Summit pour en savoir plus sur certaines des fonctionnalités exceptionnelles sur lesquelles l'équipe Chrome travaille.
Je m'appelle Pete LePage. Dès que Chrome 56 sera disponible, je reviendrai ici pour vous présenter les nouveautés de Chrome.