Nouveautés de Chrome 63

Et ce n'est pas tout : beaucoup plus !

Je m'appelle Pete LePage. C'est parti pour découvrir les nouveautés de Chrome 63 pour les développeurs.

Vous souhaitez consulter la liste complète des modifications ? Consultez la liste des modifications apportées au dépôt source Chromium.

Importations de modules dynamiques

L'importation de modules JavaScript est très pratique, mais elle est statique. Vous ne pouvez pas importer de modules en fonction de conditions d'exécution.

Heureusement, cela change dans Chrome 63 avec la nouvelle syntaxe d'importation dynamique. Elle vous permet de charger dynamiquement du code dans des modules et des scripts au moment de l'exécution. Il peut être utilisé pour charger un script en différé uniquement lorsque cela est nécessaire, ce qui améliore les performances de votre application.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Au lieu de charger l'ensemble de votre application lorsque l'utilisateur accède à votre page pour la première fois, vous pouvez récupérer les ressources dont vous avez besoin pour vous connecter. Votre chargement initial est faible et crie rapidement. Une fois que l'utilisateur s'est connecté, chargez le reste. Vous pouvez l'utiliser.

Itérateurs et générateurs asynchrones

Écrire du code qui effectue n'importe quelle itération avec les fonctions async peut être moche. En fait, c'est la partie centrale de ma question préférée sur le codage des entretiens.

Avec les async generator functions et l'itération asynchrone protocole, la consommation ou l'implémentation des sources de flux de données devient beaucoup plus simple.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Les itérateurs asynchrones peuvent être utilisés dans les boucles for-of et permettent de créer vos propres itérateurs asynchrones personnalisés via des fabriques d'itérateurs asynchrones.

Comportement du défilement hors limites

Le défilement est l'un des moyens les plus fondamentaux d'interagir avec une page, mais certains modèles peuvent s'avérer difficiles à gérer. Par exemple, avec la fonctionnalité d'actualisation du navigateur, qui consiste à balayer l'écran vers le bas en haut de la page, effectue une actualisation forcée.

Avant, avec une actualisation complète de la page.

Ensuite, actualisez uniquement le contenu.

Dans certains cas, vous pouvez ignorer ce comportement et proposer votre propre expérience. C'est ce que fait la progressive web app de Twitter. Lorsque vous faites glisser l'écran vers le bas, au lieu d'actualiser toute la page, il ajoute simplement tous les nouveaux tweets à l'affichage actuel.

Chrome 63 est désormais compatible avec la propriété CSS overscroll-behavior, ce qui permet de remplacer facilement le comportement de défilement par dépassement par défaut du navigateur.

Vous pouvez l'utiliser pour :

Bonne nouvelle : overscroll-behavior n'a pas d'impact négatif sur les performances de votre page.

Modifications apportées à l'interface des autorisations

J'adore les notifications push sur le Web, mais je suis très frustré par le nombre de sites qui demandent une autorisation au chargement de la page, sans aucun contexte - et je ne suis pas seul.

90% de toutes les demandes d'autorisation sont ignorées ou bloquées temporairement.

Dans Chrome 59, nous avons commencé à résoudre ce problème en bloquant temporairement une autorisation si l'utilisateur a ignoré la requête trois fois. Dans m63, Chrome pour Android créera des boîtes de dialogue modales de demande d'autorisation.

N'oubliez pas que cela ne concerne pas seulement les notifications push, mais également toutes les demandes d'autorisation. Si vous demandez l'autorisation au bon moment et dans le contexte, nous avons constaté que les utilisateurs sont deux fois et demie plus susceptibles de le faire.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées à Chrome 63 pour les développeurs, bien sûr, mais il y en a bien d'autres.

  • finally est désormais disponible sur les instances Promise et est appelé après qu'un Promise a été traité ou refusé.
  • La nouvelle API Device Memory JavaScript vous aide à comprendre les contraintes de performances en vous donnant des indications sur la quantité totale de RAM sur l'appareil de l'utilisateur. Vous pouvez personnaliser votre expérience au moment de l'exécution, ce qui réduit la complexité sur les appareils bas de gamme et offre aux utilisateurs une meilleure expérience tout en limitant les frustrations.
  • L'API Intl.PluralRules vous permet de créer des applications qui comprennent le pluriel d'une langue donnée en indiquant quelle forme plurielle s'applique à un nombre donné, ainsi que la langue. et peut vous aider avec les nombres ordinaux.

Assurez-vous de vous abonner à notre chaîne YouTube. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera mise en ligne.

Je m'appelle Pete LePage. Dès la sortie de Chrome 64, je serai là pour vous dire : les nouveautés de Chrome !