Nouveautés de Chrome 95

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Je travaille et filme depuis chez moi. Je vais vous présenter les nouveautés de Chrome 95 pour les développeurs.

Routage avec URLPattern

Presque toutes les applications Web dépendent d'une manière ou d'une autre du routage, qu'il s'agisse de code exécuté sur un serveur qui mappe un chemin d'accès aux fichiers sur disque ou de logique dans une application monopage qui met à jour le DOM lorsque l'URL change. URLPattern est une nouvelle API de plate-forme Web qui standardise 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 effectuant des correspondances avec des URL complètes ou un chemin d'accès d'URL, puis en renvoyant des informations sur les correspondances du jeton et du groupe.

Si vous connaissez déjà la syntaxe de routage utilisée dans Express, Ruby on Rails ou path-to-regexp, vous devriez reconnaître cette syntaxe.

Pour l'utiliser, créez un URLPattern() et fournissez les détails que vous souhaitez faire correspondre à un modèle. Les formats 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: '*',
});

Prenons l'exemple de URLPattern qui peut ê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 versions 95 et ultérieures. Pour les navigateurs ou les environnements tels que Node, qui ne sont pas encore compatibles, vous pouvez utiliser la bibliothèque urlpattern-polyfill.

Pour en savoir plus, consultez l'article de Jeff intitulé URLPattern apporte le routage à la plate-forme Web.

Choisir des couleurs avec l'API Pipette

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 idéal.

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

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, de sorte qu'elle ne bloque pas le thread principal. Lorsque l'utilisateur clique sur la couleur de son choix, la couleur sélectionnée s'affiche.

Vous pouvez essayer une démonstration rapide et consulter le code sur Glitch.

Sommet PWA

Avez-vous suivi le PWA Summit plus tôt ce mois-ci ?

C'était formidable de voir autant de personnes parler des PWA et partager leurs expériences. Si vous l'avez manqué, les vidéos sont toutes disponibles sur PWASummit.org ou sur la chaîne YouTube du PWA Summit.

Phase d'évaluation Origin Trial pour la réduction user-agent

La réduction de l'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 importante 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. Vous pourrez ainsi identifier et résoudre les problèmes avant que la réduction UA ne devienne le comportement par défaut dans Chrome.

Les modifications seront appliquées de manière incrémentielle sur plusieurs versions, mais tout ce dont vous avez besoin pour les préparer et les tester est déjà disponible.

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 a bien d'autres choses.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications apportées à Chrome 95.

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 96 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.