Nouveautés de Chrome 55

Regarder sur YouTube

  • async et await vous 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 constituent une méthode unifiée de gestion de tous les événements d'entrée.
  • Les sites ajoutés à l'écran d'accueil se voient automatiquement attribuer l'autorisation de stockage persistant.

Et ce n'est pas tout !

Je m'appelle Pete LePage. Voici les nouveautés pour les développeurs dans Chrome 55.

Événements du pointeur

Auparavant, il était simple de pointer du doigt des informations sur le Web. Vous aviez une souris, vous l'avez déplacée, parfois en appuyant sur des boutons, et c'est tout. Mais cela, ne fonctionne pas si bien ici.

Les événements tactiles sont utiles, mais pour prendre en charge le tactile et le souris, vous devez prendre en charge deux modèles d'événements:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

Chrome permet désormais de gérer les entrées unifiées en envoyant des événements PointerEvents:

elem.addEventListener('pointermove', pointerMoveEvent);

Les événements de pointeur unifient le modèle d'entrée du pointeur pour le navigateur, réunissant les éléments tactiles, les stylos et les souris en un seul ensemble d'événements. Ils sont compatibles avec IE11, Edge, Chrome et Opera, et partiellement compatibles avec Firefox.

Pour en savoir plus, consultez Indiquer la voie vers l'avant.

async et await

Le code JavaScript asynchrone n'est pas toujours facile à comprendre. 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();
}

Si vous le réécrivez avec promises, vous pouvez éviter 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 Promise peut toujours être difficile à lire lorsqu'il existe de longues chaînes de dépendances asynchrones.

Chrome accepte désormais 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 du code synchrone.

À la place, notre fonction asynchrone peut être simplifiée de la manière suivante:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Jake a un excellent post : Async Functions - making promesses friendly (Fonctions asynchrones - faire des promesses amicales) avec tous les détails.

Stockage persistant

La phase d'évaluation est maintenant terminée. Vous pouvez désormais marquer l'espace de stockage Web comme persistant, ce qui empêchera Chrome d'effacer automatiquement l'espace de stockage de 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.");
  });
}

En outre, les sites qui génèrent un engagement élevé, qui ont été ajoutés à l'écran d'accueil ou pour lesquels les notifications push sont activées se voient automatiquement accorder l'autorisation de persistance.

Consultez l'article de Chris Wilson sur le stockage persistant pour en savoir plus et découvrir comment demander un stockage persistant pour votre site.

Trait d'union automatique CSS

La fonctionnalité de trait d'union automatique CSS, l'une des fonctionnalités de mise en page les plus demandées par Chrome, est désormais compatible avec Android et Mac.

API Web Share

Enfin, il est désormais plus facile d'appeler des fonctionnalités de partage natives avec la nouvelle API Web Share, disponible en tant qu'évaluation. Paul (Mr. Web Intents) Kinlan contient toutes les informations dans son article Navigator Share (Partage du navigateur).

Conclusion

Ce ne sont là que quelques-unes des modifications apportées à Chrome 55 pour les développeurs.

Si vous souhaitez suivre l'actualité de Chrome et connaître les nouveautés à venir, abonnez-vous et regardez les vidéos du Chrome Dev Summit afin de découvrir plus en détail certains des projets formidables de l'équipe Chrome.

Je m'appelle Pete LePage et, dès la sortie de Chrome 56, je serai là pour vous dire les nouveautés de Chrome !