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

Nouveautés de Chrome 86

Pete LePage

Chrome 86 commence à être déployé dans la version stable.

Voici les informations à retenir :

L'API File System Access est désormais disponible en version stable.
De nouvelles phases d'évaluation sont disponibles pour Web HID et l'API Multi-screen Window Placement.
Le CSS propose de nouvelles fonctionnalités, et bien d'autres.

Je m'appelle Pete LePage. Je travaille et je tourne à la maison. Découvrons les nouveautés de Chrome 86 pour les développeurs.

Accès au système de fichiers

Aujourd'hui, vous pouvez utiliser l'élément <input type="file"> pour lire un fichier à partir du disque. Pour enregistrer les modifications, ajoutez download à une balise d'ancrage. Le sélecteur de fichiers s'affiche, puis le fichier est enregistré. Il n'est pas possible d'écrire dans le même fichier que celui que vous avez ouvert. Ce workflow est pénible.

Avec l'API File System Access (anciennement API Native File System), qui a terminé son test d'origine et est désormais disponible en version stable, vous pouvez appeler showOpenFilePicker(), qui affiche un sélecteur de fichiers, puis renvoie un descripteur de fichier que vous pouvez utiliser pour lire le fichier.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Pour enregistrer un fichier sur un disque, vous pouvez utiliser le descripteur de fichier que vous avez obtenu précédemment ou appeler showSaveFilePicker() pour obtenir un nouveau descripteur de fichier.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

capture d'écran de la demande d'autorisation — Invite l'utilisateur à demander l'autorisation d'écrire dans un fichier.

Avant d'écrire, Chrome vérifie si l'utilisateur a accordé une autorisation d'écriture. Si ce n'est pas le cas, Chrome l'invite d'abord.

L'appel de showDirectoryPicker() ouvre un répertoire, ce qui vous permet d'obtenir une liste de fichiers ou de créer des fichiers dans ce répertoire. Idéal pour les IDE ou les lecteurs multimédias qui interagissent avec de nombreux fichiers. Bien entendu, avant de pouvoir écrire quoi que ce soit, l'utilisateur doit accorder l'autorisation d'écriture.

L'API offre de nombreuses fonctionnalités. Consultez l'article sur l'accès au système de fichiers sur web.dev.

Phase d'évaluation: WebHID

Les dispositifs d'interface utilisateur, communément appelés HID, reçoivent des entrées ou fournissent des sorties à des humains. Il existe une longue traîne d'appareils d'interface utilisateur qui sont trop récents, trop anciens ou trop inhabituels pour être accessibles par les pilotes d'appareils des systèmes.

L'API WebHID, désormais disponible en tant que test d'origine, résout ce problème en fournissant un moyen d'accéder à ces appareils en JavaScript. Avec WebHID, les jeux Web peuvent exploiter pleinement les manettes de jeu, y compris tous les boutons, joysticks, capteurs, déclencheurs, LED, packs de retour haptique, etc.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Les applications de chat vidéo sur le Web peuvent utiliser les boutons de téléphonie sur des haut-parleurs spécialisés pour démarrer ou mettre fin à des appels, couper le son, etc.

Sélecteur d'appareil HID — Sélecteur d'appareils HID.

Bien sûr, des API puissantes de ce type ne peuvent interagir avec les appareils que lorsque l'utilisateur décide explicitement de les autoriser.

Consultez Se connecter à des appareils HID inhabituels pour obtenir plus de détails, des exemples, des instructions pour vous lancer et une démonstration sympa.

Phase d'évaluation: API Multi-Screen Window Placement

Aujourd'hui, vous pouvez obtenir les propriétés de l'écran sur lequel se trouve la fenêtre du navigateur en appelant window.screen(). Mais que se passe-t-il si vous disposez d'une configuration multi-écran ? Malheureusement, le navigateur ne vous informera que de l'écran sur lequel il est actuellement affiché.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

L'API Multi-Screen Window Placement lance une phase d'évaluation dans Chrome 86. Elle vous permet d'énumérer les écrans connectés à votre machine et de placer des fenêtres sur des écrans spécifiques. Il est essentiel de pouvoir placer des fenêtres sur des écrans spécifiques pour des applications telles que les applications de présentation, les applications de services financiers, etc.

Avant de pouvoir utiliser l'API, vous devez demander l'autorisation. Sinon, le navigateur invite l'utilisateur à le faire la première fois qu'il tente de l'utiliser.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Une fois que l'utilisateur a accordé l'autorisation, l'appel de window.getScreens() renvoie une promesse qui se résout avec un tableau d'objets Screen.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Je peux ensuite utiliser ces informations lorsque j'appelle requestFullScreen() ou que je place de nouvelles fenêtres. Tom dispose de tous les détails dans l'article Gérer plusieurs écrans avec l'API Multi-Screen Window Placement sur le site web.dev.

Et bien plus encore

Le nouveau sélecteur CSS, :focus-visible, vous permet d'activer la même heuristique que le navigateur utilise lorsqu'il décide d'afficher l'indicateur de focus par défaut.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Vous pouvez personnaliser la couleur, la taille ou le type de numéro ou de puce pour les listes à l'aide du pseudo-élément CSS ::marker.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Le Chrome Dev Summit sera bientôt disponible sur un écran près de chez vous. Pour en savoir plus, abonnez-vous à notre chaîne YouTube.

Documentation complémentaire

Cette présentation ne porte que sur certains points clés. Consultez les liens ci-dessous pour découvrir d'autres modifications apportées à Chrome 86.

Pour ne pas manquer nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo, ou ajoutez notre flux RSS à votre lecteur de flux.

Je m'appelle Pete LePage. Dès que Chrome 87 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.