Nouveautés de Chrome 103

Pete LePage

Voici les informations à retenir :

  • Un nouveau code d'état HTTP 103 permet au navigateur de déterminer le contenu à précharger avant même l'affichage de la page.
  • L'API Local Font Access permet aux applications Web d'énumérer et d'utiliser les polices installées sur l'ordinateur de l'utilisateur.
  • AbortSignal.timeout() est un moyen plus simple d'implémenter des délais avant expiration sur les API asynchrones.
  • Et ce n'est pas tout : ce n'est pas tout.

Je m'appelle Pete LePage. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 103.

Code d'état HTTP 103 103 - premiers indices

Pour améliorer les performances de vos pages, vous pouvez utiliser des indications de ressources. Ils donnent au navigateur des "indices" sur les éléments dont il pourrait avoir besoin ultérieurement. Par exemple, le préchargement des fichiers ou la connexion à 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 agir sur ces indications qu'une fois que le serveur a envoyé au moins une partie de la page.

Imaginez que le navigateur demande une page, mais que le serveur a besoin de quelques centaines de millisecondes pour la générer. Jusqu'à ce que le navigateur commence à recevoir la page, il reste là et attend. Toutefois, si le serveur sait que la page aura toujours besoin d'un ensemble de sous-ressources, par exemple un fichier CSS, du code JavaScript et quelques images, il peut immédiatement répondre avec le nouveau code d'état HTTP 103 Early Hints 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 s'affiche, 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.

Faites vos premiers pas avec les indications préliminaires HTTP 103:

API Local Font Access

Les polices sur le Web ont toujours représenté 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 vraiment utiliser que des polices Web. Il n'y avait aucun moyen d'obtenir la liste des polices que l'utilisateur avait installées sur son ordinateur. De plus, il n'y avait aucun moyen d'accéder à l'intégralité des données de la table de 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 donne accès aux données de la table de 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(). Elle 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 seul un sous-ensemble de polices vous intéresse, 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 la typographie avancée avec des polices locales sur web.dev.

Expirations de délai simplifiées avec AbortSignal.timeout()

En JavaScript, AbortController et AbortSignal permettent d'annuler un appel asynchrone.

Par exemple, lorsque vous effectuez une requête fetch(), vous pouvez créer un objet AbortSignal et le transmettre à fetch(). Si vous souhaitez annuler l'objet fetch() avant qu'il ne soit renvoyé, appelez abort() sur l'instance de AbortSignal. Jusqu'à présent, si vous souhaitiez abandonner l'opération après un certain temps, vous deviez l'encapsuler dans une 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 est désormais plus facile avec une nouvelle méthode statique timeout() sur AbortSignal. Elle renvoie un objet AbortSignal qui est automatiquement abandonné après le nombre donné de millisecondes. Ce qui ne correspondait qu'à une poignée de lignes de code n'en est plus qu'une aujourd'hui.

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

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

Et bien plus !

Bien sûr, ce n’est pas tout.

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

Complément d'informations

Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 103.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

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