Nouveautés de Chrome 95

Pete LePage

Voici quelques points à retenir :

Je m'appelle Pete LePage. Je travaille et je tourne des vidéos depuis chez moi. Découvrons ensemble les nouveautés de Chrome 95 pour les développeurs.

Routage avec URLPattern

Presque toutes les applications Web dépendent du routage d'une manière ou d'une autre, qu'il s'agisse de code s'exécutant sur un serveur qui mappe un chemin d'accès à des fichiers sur le disque ou d'une logique dans une application monopage qui met à jour le DOM lorsque l'URL change. URLPattern est une nouvelle API de plate-forme Web qui normalise la syntaxe des modèles de routage.

Il s'appuie sur les bases des frameworks existants, ce qui facilite l'exécution des tâches de routage courantes. Par exemple, en comparant des URL complètes ou un chemin d'accès à une URL, puis en renvoyant des informations sur les correspondances de jetons et de groupes.

Si vous connaissez déjà la syntaxe de routage utilisée dans Express, Ruby on Rails ou path-to-regexp, vous ne serez probablement pas dépaysé.

Pour l'utiliser, créez un URLPattern() et fournissez les détails que vous souhaitez comparer à un modèle. Les modèles peuvent contenir des caractères génériques, des groupes de jetons nommés, des groupes d'expressions régulières et des modificateurs de groupe.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Par exemple, examinons le URLPattern qui pourrait être utilisé par Google Docs. Nous allons spécifier le kind du fichier, le ID du fichier et le mode dans lequel l'ouvrir. Pour utiliser le modèle, nous pouvons appeler test() ou exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern est activé par défaut dans Chrome et Edge version 95 et ultérieures. Pour les navigateurs ou les environnements comme Node qui ne le prennent pas encore en charge, vous pouvez utiliser la bibliothèque urlpattern-polyfill.

Pour en savoir plus, consultez l'article de Jeff URLPattern brings routing to the web platform (URLPattern apporte le routage à la plate-forme Web).

Sélectionner des couleurs avec l'API Eye Dropper

Presque toutes les applications de conception que j'ai utilisées disposent d'un outil Pipette, ce qui permet de déterminer facilement la couleur d'un élément. Certains navigateurs disposent d'une fonctionnalité Pipette intégrée à <input type=color>, mais ce n'est pas l'idéal.

L'API Eye Dropper, implémentée par certains membres de l'équipe Microsoft, apporte cette fonctionnalité au Web. Pour l'utiliser, créez une instance EyeDropper(), puis appelez open().

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Comme de nombreuses autres API Web modernes, elle fonctionne de manière asynchrone afin de ne pas bloquer le thread principal. Lorsque l'utilisateur clique sur la couleur de son choix, la promesse est résolue avec la couleur sur laquelle il a cliqué.

PWA Summit

Avez-vous suivi le PWA Summit au début du mois ?

Nous avons été ravis de voir autant de personnes parler des PWA et partager leurs expériences. Si vous les avez manquées, les vidéos sont toutes disponibles. N'hésitez pas à les regarder sur PWASummit.org ou sur la chaîne YouTube PWA Summit.

Essai Origin Trial pour la réduction user-agent

La réduction de la chaîne user-agent vise à réduire les surfaces de fingerprinting passif en limitant les informations de la chaîne user-agent à la marque et à la version principale du navigateur, à la distinction entre ordinateur et mobile, et à la plate-forme sur laquelle il s'exécute.

À partir de Chrome 95, une nouvelle phase d'évaluation vous permet d'activer la réception de la chaîne UA réduite dès maintenant. Cela vous permettra d'identifier et de résoudre les problèmes avant que la réduction de l'UA ne devienne le comportement par défaut dans Chrome.

Les modifications seront appliquées progressivement au cours de plusieurs versions, mais tout ce dont vous avez besoin pour vous préparer et tester est disponible dès maintenant.

Tous les détails et le calendrier sont disponibles dans l'article Phase d'évaluation de la réduction user-agent sur developer.chrome.com.

Et bien plus !

Bien sûr, il y en a beaucoup d'autres.

Documentation complémentaire

Il ne s'agit que de quelques-uns des points clés. Consultez les liens ci-dessous pour découvrir les autres modifications apportées à Chrome 95.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube Chrome Developers. Vous recevrez une notification par e-mail chaque fois que nous publierons une nouvelle vidéo.

Je m'appelle Pete LePage et, dès que Chrome 96 sera disponible, je serai là pour vous présenter les nouveautés de Chrome !