Nouveautés de Chrome 91

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 91 pour les développeurs.

Noms suggérés pour l'API File System Access

L'une de mes API préférées issues du projet Fugu cette année est l'API File System Access. Une fois que l'utilisateur a accordé l'autorisation, les applications peuvent interagir avec les fichiers de son appareil local, comme le font les autres applications installées, ce qui vous permet de créer une expérience utilisateur plus naturelle.

À partir de Chrome 91, vous pouvez désormais suggérer le nom et l'emplacement d'un fichier ou d'un répertoire avec lequel interagir. Pour ce faire, transmettez une propriété suggestedName dans les options showSaveFilePicker.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Il en va de même pour le répertoire de démarrage par défaut. Par exemple, un éditeur de texte souhaite probablement démarrer la boîte de dialogue d'enregistrement ou d'ouverture de fichier dans le dossier documents. Alors qu'un éditeur d'images souhaite probablement démarrer dans le dossier pictures. Vous pouvez suggérer un répertoire de démarrage par défaut en transmettant une propriété startIn.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Pour en savoir plus, consultez l'article Accès au système de fichiers de Tom.

Lire des fichiers à partir du presse-papiers

Une autre nouvelle API intéressante pour interagir avec les fichiers est disponible dans Chrome 91. Sur ordinateur, les applications Web peuvent désormais lire des fichiers à partir du presse-papiers. (La lecture de fichiers à partir du presse-papiers est disponible dans Safari depuis 2018.)

Bien entendu, vous n'avez pas un accès illimité au presse-papiers. Vous devez donc configurer un écouteur d'événement paste. Ensuite, dans le gestionnaire d'événements, vous pouvez accéder au contenu de chaque fichier dans le presse-papiers.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Partager des identifiants sur des sites affiliés

Si votre site comporte plusieurs domaines et qu'ils partagent le même backend de gestion de compte, vous pouvez désormais les associer les uns aux autres. Les utilisateurs pourront ainsi enregistrer leurs identifiants une seule fois et le Gestionnaire de mots de passe de Chrome leur suggérera de les utiliser sur tous vos sites affiliés.

Cette option est idéale lorsque votre site est diffusé à partir de différents domaines de premier niveau, comme google.com et google.ca. Vous avez peut-être plusieurs noms de domaine.

Pour associer vos sites Web, vous devez créer un fichier assetlinks.json qui définit la relation entre les domaines. Dans l'exemple ci-dessous, j'indique au navigateur que les domaines .com et .co.uk sont associés et peuvent partager les identifiants.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Ensuite, hébergez le fichier assetlinks.json dans le dossier .well-known pour chaque domaine.

Cette fonctionnalité sera déployée progressivement dans Chrome 91 et ne sera peut-être pas disponible dès le premier jour. Pour en savoir plus, consultez Activer Chrome pour partager les identifiants de connexion sur les sites affiliés.

Et bien plus !

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

Toutes les vidéos de la conférence I/O 2021 sont désormais en ligne. Ne manquez pas ces excellents contenus !

Web Transport (anciennement appelé "Quic Transport") a subi un certain nombre de modifications et lance un nouveau test d'origine.

La version d'origine de SIMD WebAssembly a terminé ses tests et est disponible pour tous les utilisateurs.

Les éléments de formulaire mis à jour sont enfin disponibles sur Android, ce qui améliore l'expérience utilisateur.

L'attribut media de l'élément <link> sera respecté pour link rel="icon", ce qui signifie que vous pouvez définir différentes icônes en fonction des requêtes multimédias. Par exemple, des icônes différentes pour les modes clair et sombre.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

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

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