Nouveautés de Chrome 95

Pete LePage

Voici les informations à retenir :

  • Le routage est simplifié grâce à URLPattern intégré au navigateur.
  • L'API Pipette fournit un outil intégré pour sélectionner des couleurs.
  • Une nouvelle phase d'évaluation vous permet d'activer dès maintenant la réception de la chaîne UA réduite.
  • Les vidéos du sommet sur les PWA sont toutes en ligne.
  • Et ce n'est pas tout !

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

Itinéraire 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, la mise en correspondance avec des URL complètes ou un chemin d'URL, puis en renvoyant des informations sur les correspondances de jeton et de 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: '*',
});

Examinons par exemple 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 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() sur celle-ci.

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 qu'il souhaite, elle se résout avec la couleur sur laquelle il a cliqué.

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 ?

Nous avons été ravis de voir autant de personnes parler des PWA et partager leur expérience. Si vous l'avez manqué, toutes les vidéos sont disponibles. Vous pouvez donc les consulter sur le site PWASummit.org ou sur la chaîne YouTube du sommet des PWA.

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.

Vous trouverez tous les détails et le calendrier dans le post sur la 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 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.