Nouveautés de Chrome 102

Pete LePage

Voici les informations à retenir :

  • Les PWA installées peuvent s'enregistrer en tant que gestionnaires de fichiers, ce qui permet aux utilisateurs d'ouvrir facilement des fichiers directement à partir du disque.
  • L'attribut inert vous permet de marquer des parties du DOM comme inertes.
  • L'API Navigation permet aux applications monopages de gérer plus facilement la navigation et les mises à jour de l'URL.
  • Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

Je m'appelle Pete LePage. Voyons ce que Chrome 102 propose aux développeurs.

API File Handling

L'API File Handling permet aux PWA installées de s'enregistrer auprès de l'OS en tant que gestionnaire de fichiers. Une fois inscrit, un utilisateur peut cliquer sur un fichier pour l'ouvrir avec la PWA installée. Cette solution est idéale pour les PWA qui interagissent avec des fichiers, par exemple des éditeurs d'images, des IDE, des éditeurs de texte, etc.

Pour ajouter une fonctionnalité de gestion de fichiers à votre PWA, vous devez mettre à jour le fichier manifeste de votre application Web, en ajoutant un tableau file_handlers contenant des informations sur les types de fichiers que votre PWA peut gérer. Vous devez spécifier l'URL à ouvrir, les types mime, une icône pour le type de fichier et le type de lancement. Le type de lancement définit si plusieurs fichiers doivent être ouverts dans un seul client ou dans plusieurs clients.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Ensuite, pour accéder à ces fichiers lorsque la PWA est lancée, vous devez spécifier un consommateur pour l'objet launchQueue. Les lancements sont mis en file d'attente jusqu'à ce qu'ils soient traités par le client.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

Pour en savoir plus, consultez Autoriser les applications Web installées à être des gestionnaires de fichiers.

Propriété inert

La propriété inert est un attribut HTML global qui indique au navigateur d'ignorer les événements d'entrée utilisateur pour un élément, y compris les événements de sélection et les événements provenant de technologies d'assistance.

Cela peut être utile lors de la création d'interfaces utilisateur. Par exemple, avec une boîte de dialogue modale, vous souhaitez "enfermer" le focus dans la boîte de dialogue modale lorsqu'elle est visible. Pour un panneau qui n'est pas toujours visible par l'utilisateur, l'ajout de inert garantit que, lorsque le panneau est hors écran, un utilisateur de clavier ne peut pas interagir accidentellement avec lui.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Ici, inert a été déclaré sur le deuxième élément <div>. Par conséquent, tout le contenu qu'il contient, y compris <button> et <label>, ne peut pas être sélectionné ni être sélectionné.

inert est compatible avec Chrome 102 et sera disponible dans Firefox et Safari.

Pour en savoir plus, consultez Présentation d'Inert.

De nombreuses applications Web dépendent de la possibilité de mettre à jour l'URL sans navigation de page. Aujourd'hui, nous utilisons l'API History, mais elle est maladroite et ne fonctionne pas toujours comme prévu. Plutôt que d'essayer de corriger les problèmes de l'API History, l'API Navigation remanie complètement cet espace.

Pour utiliser l'API Navigation, ajoutez un écouteur navigate sur l'objet navigation global.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

L'événement est fondamentalement centralisé et se déclenche pour tous les types de navigations, que l'utilisateur ait effectué une action, comme cliquer sur un lien, envoyer un formulaire ou revenir en arrière, même lorsque la navigation est déclenchée de manière programmatique. Dans la plupart des cas, cela permet à votre code de remplacer le comportement par défaut du navigateur pour cette action.

Consultez Routage moderne côté client: l'API Navigation pour obtenir tous les détails et une démonstration que vous pouvez essayer.

Et bien plus !

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

  • La nouvelle API Sanitizer vise à créer un processeur robuste pour insérer en toute sécurité des chaînes arbitraires dans une page.
  • L'attribut hidden=until-found permet au navigateur de rechercher du texte dans des régions masquées et d'afficher cette section si une correspondance est trouvée.

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

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