Nouveautés de Chrome 95

Pete LePage

Voici les informations à retenir :

  • Le routage est simplifié grâce à l'intégration de URLPattern au navigateur.
  • L'API Eye Dropper fournit un outil intégré pour sélectionner couleurs.
  • Une nouvelle phase d'évaluation vous permet d'activer la chaîne UA réduite.
  • Les vidéos du Sommet des PWA sont disponibles en ligne.
  • Et ce n'est pas tout !

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

Itinéraire avec URLPattern

Presque toutes les applications Web dépendent du routage, qu'il s'agisse de code en cours d'exécution Sur un serveur qui mappe un chemin d'accès aux fichiers sur disque ou à la logique d'une application monopage qui met à jour le DOM lorsque l'URL change. URLPattern est un nouveau site Web qui standardise la syntaxe des modèles de routage.

Il s'appuie sur les frameworks existants, ce qui facilite la mise en œuvre les tâches de routage courantes. Par exemple, la mise en correspondance avec des URL complètes ou une URL pathname, 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, cette méthode vous semble probablement familière.

Pour l'utiliser, créez un URLPattern() et fournissez les informations que vous souhaitez une correspondance de structure. 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: '*',
});

Examinons par exemple le URLPattern qui pourrait être utilisé par Google Docs. Nous allons spécifier la 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 comme Node, qui ne sont pas encore compatibles, vous pouvez utiliser la bibliothèque urlpattern-polyfill.

Consultez l'article de Jeff, Jeff, URLPattern gère le routage vers la plate-forme Web. pour en savoir plus.

Choisir des couleurs avec l'API Eye Dropper

Presque toutes les applications de conception que j'ai jamais utilisées ont un outil de pipette, ce qui en fait facile de comprendre de quelle couleur est quelque chose. Certains navigateurs proposent une pipette intégrée dans <input type=color>, mais ce n'est pas idéal.

L'API Pipette, mise en œuvre par certains employés de Microsoft, apporte cette fonctionnalité sur le Web. Pour l'utiliser, créez un EyeDropper() puis appelez open() dessus.

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

Comme beaucoup d'autres API Web modernes, elle fonctionne de manière asynchrone. ne bloque pas le thread principal. Lorsque l'utilisateur clique sur la couleur qu'il souhaite, elle se résoudre avec la couleur sur laquelle il a cliqué.

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

Sommet des PWA

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

C'était génial de voir autant de gens parler des PWA et partager leurs expériences. Si vous l'avez manqué, toutes les vidéos sont disponibles. à l'adresse PWASummit.org Chaîne YouTube du PWA Summit.

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

La réduction user-agent vise à réduire les surfaces d'empreinte digitale, en réduisant la quantité d'informations dans le user-agent pour afficher uniquement la marque et la version significative du navigateur, son bureau ou la distinction mobile et la plateforme sur laquelle il est exécuté.

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

Les modifications sont appliquées de façon incrémentale sur un certain nombre de versions, mais tout ce dont vous avez besoin pour préparer et tester est prêt dès maintenant.

Tous les détails et la chronologie se trouvent dans la Post sur la phase d'évaluation de la réduction user-agent activée developer.chrome.com.

Et bien plus !

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

Documentation complémentaire

Cette présentation ne porte que sur certains points clés. Consultez les liens ci-dessous pour modifications supplémentaires dans Chrome 95.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome, et vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès la sortie de Chrome 96, vous informer des nouveautés de Chrome !