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 les fichiers peuvent désormais suggérer des noms de fichiers et des répertoires lors de l'utilisation de l'API File System Access.
Vous pouvez lire les fichiers du presse-papiers.
Si votre site comporte plusieurs domaines et qu'ils partagent le même backend de gestion des comptes, vous pouvez indiquer à Chrome qu'ils sont identiques, ce qui permet au gestionnaire de mots de passe de suggérer les bons 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 : 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 91.

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

L'une de mes API préférées pour le projet Fugu cette année est les API File System Access. Une fois que l'utilisateur a accordé son autorisation, 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 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épart par défaut. Par exemple, un éditeur de texte souhaite probablement lancer la boîte de dialogue d'enregistrement ou d'ouverture de fichier dans le dossier documents. En revanche, un éditeur d'images souhaite probablement commencer 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 le post de Tom sur l'accès au système de fichiers.

Lecture des fichiers du presse-papiers

Il existe une autre nouvelle API très pratique pour interagir avec les fichiers qui arrivent dans Chrome 91. Sur ordinateur, les applications Web peuvent désormais lire les fichiers du presse-papiers. (La lecture des fichiers du presse-papiers est disponible dans Safari depuis 2018.)

Bien entendu, vous ne disposez pas d'un accès illimité au presse-papiers. Vous devez donc configurer un écouteur d'événements paste. Ensuite, dans le gestionnaire d'événements, vous pouvez accéder au contenu de chaque fichier du 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 des comptes, vous pouvez désormais associer vos sites les uns aux autres. Ainsi, les utilisateurs n'ont à enregistrer leurs identifiants qu'une seule fois. Le gestionnaire de mots de passe Chrome peut alors les suggérer à l'un de vos sites affiliés.

Cette approche est idéale lorsque votre site est diffusé à partir de différents domaines de premier niveau, tels que 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 le premier jour. Pour obtenir les dernières informations, consultez la section Autoriser Chrome à partager des identifiants de connexion entre des sites affiliés.

Et bien plus !

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

Toutes les vidéos de la conférence Google I/O 2021 sont actuellement en ligne et proposent des contenus de qualité. Découvrez-les !

Le service Web Transport, précédemment appelé Quic Transport, a subi un certain nombre de modifications et démarre une nouvelle phase d'évaluation.

Web Assembly SIMD a terminé sa phase d'évaluation et est disponible pour tous les utilisateurs.

Les éléments de formulaire actualisés ont enfin été ajoutés à Android, ce qui améliore l'expérience utilisateur.

De plus, 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 média. Par exemple, des icônes différentes pour les modes sombre et clair.

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

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

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