Nouveautés de Chrome 63

Pete LePage

Et ce n'est pas tout ! En savoir plus

Je m'appelle Pete LePage. Voyons ce que Chrome 63 réserve aux 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 des conditions d'exécution.

Heureusement, cela a changé dans Chrome 63, avec la nouvelle syntaxe d'importation dynamique. Il vous permet de charger dynamiquement du code dans des modules et des scripts au moment de l'exécution. Il ne peut être utilisé pour charger un script en différé que 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'intégralité 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 petit et très rapide. Une fois que l'utilisateur se connecte, chargez le reste et vous êtes prêt.

Itérateurs et générateurs asynchrones

Écrire du code qui effectue une itération avec des fonctions async peut être peu esthétique. En fait, c'est l'essentiel de ma question de codage d'entretien préférée.

Désormais, avec les fonctions de générateur asynchrone et le protocole d'itération asynchrone, la consommation ou l'implémentation de sources de données en streaming est simplifiée, et ma question de codage devient beaucoup plus facile.

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 des boucles for-of et également pour créer vos propres itérateurs asynchrones personnalisés via des usines 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 être difficiles à gérer. Par exemple, la fonctionnalité balayer pour actualiser des navigateurs, qui consiste à balayer l'écran vers le bas en haut de la page, effectue un rechargement forcé.

Avant, avec actualisation complète de la page.

Ensuite, actualisez uniquement le contenu.

Dans certains cas, vous pouvez ignorer ce comportement et fournir votre propre expérience. C'est ce que fait la progressive web app de Twitter : lorsque vous faites défiler la page vers le bas, au lieu de recharger l'intégralité de la page, elle ajoute simplement les nouveaux tweets à la vue actuelle.

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éfaut du navigateur.

Vous pouvez l'utiliser pour :

Mieux encore, overscroll-behavior n'a aucun impact négatif sur les performances de vos pages.

Modifications apportées à l'interface utilisateur des autorisations

J'adore les notifications push Web, mais je suis très frustrée par le nombre de sites qui demandent l'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 temporairement bloquées.

Dans Chrome 59, nous avons commencé à résoudre ce problème en bloquant temporairement une autorisation si l'utilisateur a ignoré la demande trois fois. Désormais, dans la version m63, Chrome pour Android utilisera des boîtes de dialogue modales pour les demandes d'autorisation.

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

Et bien plus !

Il ne s'agit là que de quelques-unes des modifications apportées à Chrome 63 pour les développeurs.

  • finally est désormais disponible sur les instances Promise et est appelé une fois qu'une Promise a été traitée ou refusée.
  • La nouvelle API JavaScript de mémoire de l'appareil 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 adapter 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 avec moins de frustrations.
  • L'API Intl.PluralRules vous permet de créer des applications qui comprennent la formation du pluriel d'une langue donnée en indiquant la forme plurielle applicable pour un nombre et une langue donnés. et peut vous aider avec les nombres ordinaux.

N'oubliez pas de vous abonner à notre chaîne YouTube. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

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