Nouveautés de Chrome 103

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Voyons ce que Chrome 103 propose aux développeurs.

Code d'état HTTP 103 103 - premiers conseils

Pour améliorer les performances des pages, vous pouvez utiliser des indices de ressources. Ils fournissent au navigateur des "indices" sur les éléments dont il pourrait avoir besoin plus tard. Par exemple, précharger des fichiers ou se connecter à un autre serveur.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Toutefois, le navigateur ne peut pas agir sur ces indices tant que le serveur n'a pas envoyé au moins une partie de la page.

Imaginons que le navigateur demande une page, mais que le serveur ait besoin de quelques centaines de millisecondes pour la générer. Tant que le navigateur ne commence pas à recevoir la page, il reste là et attend. Toutefois, si le serveur sait que la page aura toujours besoin d'un certain ensemble de sous-ressources, par exemple un fichier CSS, du code JavaScript et quelques images, il peut répondre immédiatement avec le nouveau code d'état HTTP 103 "Early Hints" (Indices précoces) et demander au navigateur de précharger ces sous-ressources.

Ensuite, une fois que le serveur a généré la page, il peut l'envoyer avec la réponse HTTP 200 normale. Lorsque la page arrive, le navigateur a déjà commencé à charger les ressources requises.

Comme il s'agit d'un nouveau code d'état HTTP, vous devez mettre à jour votre serveur pour l'utiliser.

Premiers pas avec les indications anticipées HTTP 103:

API Local Fonts Access

Les polices sur le Web ont toujours été un défi, en particulier pour les applications qui permettent aux utilisateurs de créer leurs propres graphiques et conceptions. Jusqu'à présent, les applications Web ne pouvaient utiliser que des polices Web. Il n'existait aucun moyen d'obtenir la liste des polices que l'utilisateur avait installées sur son ordinateur. Il n'était pas possible d'accéder aux données complètes du tableau des polices, ce qui est essentiel si vous devez implémenter votre propre pile de texte personnalisée.

La nouvelle API Local Font Access permet aux applications Web d'énumérer les polices locales sur l'appareil de l'utilisateur et d'accéder aux données de la table des polices.

Pour obtenir la liste des polices installées sur l'appareil, vous devez d'abord demander l'autorisation.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Appelez ensuite window.queryLocalFonts(). Il renvoie un tableau de toutes les polices installées sur l'appareil de l'utilisateur.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Si vous ne vous intéressez qu'à un sous-ensemble de polices, vous pouvez les filtrer en ajoutant un paramètre postscriptNames.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Pour en savoir plus, consultez l'article de Tom Utiliser une typographie avancée avec des polices locales sur web.dev.

Délais d'expiration plus faciles avec AbortSignal.timeout()

En JavaScript, AbortController et AbortSignal sont utilisés pour annuler un appel asynchrone.

Par exemple, lorsque vous effectuez une requête fetch(), vous pouvez créer un AbortSignal et le transmettre à fetch(). Si vous souhaitez annuler le fetch() avant qu'il ne soit renvoyé, appelez abort() sur l'instance de AbortSignal. Jusqu'à présent, si vous souhaitiez qu'il s'arrête après un certain temps, vous deviez l'encapsuler dans un setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Heureusement, cela vient d'être simplifié avec une nouvelle méthode statique timeout() sur AbortSignal. Il renvoie un objet AbortSignal qui est automatiquement arrêté après le nombre de millisecondes donné. Ce qui était auparavant une poignée de lignes de code n'en est plus qu'une.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() est compatible avec Chrome 103, et l'est déjà dans Firefox et Safari.

Et bien plus !

Bien sûr, il y a bien d'autres choses.

  • Le format de fichier image avif est désormais partageable via le partage Web
  • Chromium correspond désormais à Firefox en déclenchant popstate immédiatement après les modifications d'URL. L'ordre des événements est maintenant: popstate, puis hashchange sur les deux plates-formes.
  • Element.isVisible() vous indique si un élément est visible ou non.

Documentation complémentaire

Cette présentation ne porte que sur certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires dans Chrome 103.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 104 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.