Nouveautés de Chrome 95

Pete LePage

Voici les informations à retenir :

  • L'itinéraire devient plus facile avec URLPattern intégré au navigateur.
  • L'API Eye Dropper fournit un outil intégré pour sélectionner les couleurs.
  • Une nouvelle phase d'évaluation vous permet d'accepter de recevoir dès maintenant la chaîne UA réduite.
  • Les vidéos du PWA Summit sont toutes disponibles en ligne.
  • Et ce n'est pas tout : ce n'est pas tout.

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

Itinéraire avec URLPattern

Presque toutes les applications Web dépendent du routage d'une manière ou d'une autre, qu'il s'agisse d'un code exécuté sur un serveur qui mappe un chemin d'accès aux fichiers sur disque ou d'une logique dans une application à page unique 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 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 nom de chemin d'URL, puis le renvoi d'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, elle vous semblera probablement familière.

Pour l'utiliser, créez un URLPattern() et fournissez les détails avec lesquels vous souhaitez mettre en correspondance des structures. Les motifs 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 URLPattern qui pourrait être utilisé par Google Docs. Nous allons spécifier l'kind du fichier, le fichier ID et le mode dans lequel l'ouvrir. Ensuite, 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 95 ou version ultérieure. Pour les navigateurs ou environnements tels que Node, qui ne sont pas encore compatibles, vous pouvez utiliser la bibliothèque urlpattern-polyfill.

Pour plus d'informations, consultez l'article de Jeff URLPattern mettant en relation le routage vers la plate-forme Web.

Choisir des couleurs avec l'API Eye Dropper

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

L'API de pipette, mise en œuvre par certains employés de Microsoft, apporte cette fonctionnalité au 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 afin de ne pas bloquer le thread principal. Lorsque l'utilisateur clique sur la couleur de son choix, le problème se résout avec la couleur sur laquelle il a cliqué.

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

PWA Summit

Avez-vous assisté au PWA Summit plus tôt ce mois-ci ?

Je suis ravi de voir autant de personnes parler des PWA et partager leurs expériences. Si vous l'avez manquée, les vidéos sont toutes disponibles. Pensez à les consulter sur PWASummit.org ou sur la chaîne YouTube du PWA Summit.

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

La réduction user-agent vise à réduire les surfaces d'empreinte passive en réduisant les informations de la chaîne user-agent à la marque et à la version significative du navigateur, à sa distinction sur ordinateur ou mobile, et à la plate-forme sur laquelle elle s'exécute.

À partir de Chrome 95, une nouvelle phase d'évaluation vous permet d'accepter de recevoir dès maintenant la chaîne UA réduite. Vous pourrez ainsi détecter et résoudre les problèmes avant que l'UA réduite ne devienne le comportement par défaut dans Chrome.

Les modifications seront appliquées de manière incrémentielle sur un certain nombre de versions, mais tout ce que vous devez préparer et tester est prêt pour le moment.

Vous trouverez tous les détails et la chronologie dans l'article sur la phase d'évaluation de la réduction user-agent sur developer.chrome.com.

Et bien plus !

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

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 95.

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 la sortie de Chrome 96, je serai là pour vous dire quelles sont les nouveautés de Chrome !