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:
- Explication pour les premiers indices
- Configuration des indications anticipées d'Apache 2
- Utiliser les premiers conseils sur Cloudflare
- Fastly Beyond Server Push: The 103 Early Hints Status Code
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
, puishashchange
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.
- Nouveautés des outils pour les développeurs Chrome (103)
- Abandons et suppressions de la version 103 de Chrome
- Mises à jour de ChromeStatus.com pour Chrome 103
- Liste des modifications du dépôt source Chromium
- Agenda des versions Chrome
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 !