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 : ce n'est pas tout.

Je m'appelle Pete LePage. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 102.

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, l'utilisateur peut cliquer sur un fichier pour l'ouvrir avec la PWA installée. Cette approche 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 détails 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étermine si plusieurs fichiers doivent être ouverts dans un ou 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 une fois la PWA lancée, vous devez spécifier un client pour l'objet launchQueue. Les lancements sont mis en file d'attente jusqu'à ce que le client les gère.

// 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 Permettre aux applications Web installées de devenir 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 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 "piéger" le focus dans la fenêtre modale lorsqu'il est visible. Ou, pour un panneau qui n'est pas toujours visible par l'utilisateur, l'ajout de inert garantit que lorsque le panneau est hors écran, l'utilisateur du 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 cliqué.

inert est compatible avec Chrome 102, et est disponible à la fois dans Firefox et Safari.

Pour en savoir plus, consultez Présentation de l'inerte.

De nombreuses applications Web dépendent de la possibilité de mettre à jour l'URL sans navigation sur les pages. Aujourd'hui, nous utilisons l'API History, mais elle est encombrante et ne fonctionne pas toujours comme prévu. Plutôt que d'essayer de corriger les rouages 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 navigation, que l'utilisateur ait effectué une action (par exemple, cliquer sur un lien, envoyer un formulaire ou revenir en arrière et avancer), même lorsque la navigation est déclenchée de manière programmatique. Dans la plupart des cas, elle permet à votre code de remplacer le comportement par défaut du navigateur pour cette action.

Pour plus d'informations et pour voir une démonstration à essayer, consultez la section Modern client-side router: the Navigation API (Routage moderne côté client : API Navigation).

Et bien plus !

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

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

Complément d'informations

Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour connaître les modifications supplémentaires apportées à Chrome 102.

S'abonner

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