Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 91

Pete LePage

Voici les informations à retenir :

Les applications Web qui interagissent avec des fichiers peuvent désormais suggérer des noms de fichiers et de répertoires lorsqu'elles utilisent l'API File System Access.
Vous pouvez lire des fichiers à partir du presse-papiers.
Si votre site comporte plusieurs domaines et qu'ils partagent le même backend de gestion de compte, vous pouvez indiquer à Chrome qu'ils sont identiques, ce qui permet au gestionnaire de mots de passe de suggérer les bonnes identifiants.
Toutes les vidéos de la conférence I/O sont disponibles sur la chaîne YouTube des développeurs Chrome.
Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

Je suis Pete LePage, et 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 l'autorisation accordée, les applications peuvent interagir avec les fichiers sur l'appareil local de l'utilisateur, comme les autres applications installées, ce qui vous permet de créer une expérience utilisateur plus naturelle.

À partir de Chrome 91, vous pouvez 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épart 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'
});

Lisez le post de Tom File System Access (Accès au système de fichiers) pour plus d'informations.

Lecture des fichiers 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 les fichiers 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. Ou peut-être avez-vous 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 lié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"
  }
 }]

Hébergez ensuite le fichier assetlinks.json dans le dossier .well-known pour chaque domaine.

Cette fonctionnalité commencera à être 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 en ligne. Vous y trouverez des contenus intéressants, alors regardez-les !

Web Transport, qui était auparavant appelé Quic Transport, a fait l'objet de plusieurs modifications et lance une nouvelle phase d'évaluation.

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.

De plus, l'attribut media de l'élément <link> sera honoré pour link rel="icon", ce qui signifie que vous pouvez définir différentes icônes en fonction des requêtes média. 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.

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