Choisissez comment les liens concernés ouvrent votre PWA avec la capture déclarative des liens

Thomas Steiner

Qu'est-ce que la capture déclarative des liens ?

Cliquer sur des liens sur le Web peut parfois être une agréable surprise. Par exemple, si vous cliquez sur le lien d'une page Web YouTube sur un appareil mobile, l'application YouTube pour iOS ou Android, si elle est installée. Toutefois, lorsque vous installez la PWA YouTube sur un ordinateur de bureau et que vous cliquez sur un lien, elle s'ouvre dans un onglet de navigateur.

Mais elle devient plus complexe. Que se passe-t-il si le lien n'apparaît pas sur un site Web, mais dans un message de chat que vous recevez dans l'une des applications de chat de Google ? Sur les systèmes d'exploitation d'ordinateur, qui ont la notion de fenêtres d'application distinctes, si l'application est déjà ouverte, une nouvelle fenêtre ou un nouvel onglet doit-il être créé pour chaque clic sur un lien ? Lorsque vous y réfléchissez, il existe de nombreuses façons de capturer les liens et les navigations, y compris, mais sans s'y limiter, les suivantes:

La capture déclarative de lien est une proposition de propriété de fichier manifeste d'application Web appelée "capture_links" qui permet aux développeurs de déterminer de manière déclarative ce qui doit se passer lorsque le navigateur est invité à accéder à une URL située dans le champ d'application de navigation de l'application, à partir d'un contexte en dehors du champ de navigation. Cette proposition ne s'applique pas si l'utilisateur se trouve déjà dans le champ d'application de la navigation (par exemple, s'il a ouvert un onglet de navigateur qui est compris dans le champ d'application et clique sur un lien interne).

Certaines conditions particulières telles qu'un clic au milieu sur un lien (ou un clic droit, puis "ouvrir dans un nouvel onglet") ne déclenchent généralement pas le comportement de capture du lien. Le fait qu'un lien soit target=_self ou target=_blank n'a pas d'importance. Par conséquent, les liens sur lesquels vous cliquez dans une fenêtre de navigateur (ou la fenêtre d'une autre PWA) seront ouverts dans la PWA, même s'ils entraîneraient normalement une navigation dans le même onglet.

Cas d'utilisation suggérés

Voici quelques exemples de sites susceptibles d'utiliser cette API:

  • PWA qui souhaitent ouvrir une fenêtre plutôt qu'un onglet de navigateur lorsque l'utilisateur clique sur un lien vers celles-ci. Dans un environnement de bureau, il est souvent judicieux d'ouvrir plusieurs fenêtres d'application à la fois.
  • PWA à fenêtre unique où le développeur préfère qu'une seule instance de l'application soit ouverte à tout moment, les nouvelles navigations ciblant l'instance existante. Voici des cas de sous-utilisation :
    • Applications pour lesquelles il est logique de n'avoir qu'une seule instance en cours d'exécution (par exemple, un lecteur de musique ou un jeu)
    • Applications qui incluent la gestion de plusieurs documents dans une seule instance (par exemple, une barre d'onglets HTML intégrée).

Activer via about://flags

Pour tester la capture de liens déclarative en local sans jeton d'évaluation, activez l'indicateur #enable-desktop-pwas-link-capturing dans about://flags.

Comment utiliser la capture déclarative des liens ?

Les développeurs peuvent déterminer de manière déclarative comment les liens doivent être capturés en exploitant le champ supplémentaire "capture_links" du fichier manifeste d'application Web. Il prend une chaîne ou un tableau de chaînes comme valeur. Si un tableau de chaînes est fourni, le user-agent choisit le premier élément compatible de la liste, avec la valeur par défaut "none". Les valeurs suivantes sont acceptées :

  • "none" (valeur par défaut): pas de capture des liens. Les liens sur lesquels l'utilisateur a cliqué pour accéder à ce champ d'application de PWA naviguent normalement sans ouvrir de fenêtre de PWA.
  • "new-client": chaque lien sur lequel l'utilisateur a cliqué ouvre une nouvelle fenêtre de PWA à cette URL.
  • "existing-client-navigate": le lien cliqué s'ouvre dans une fenêtre PWA existante, le cas échéant, ou dans une nouvelle fenêtre dans le cas contraire. Si plusieurs fenêtres de PWA existent, le navigateur peut en choisir une de manière arbitraire. Cela se comporte comme "new-client" si aucune fenêtre n'est actuellement ouverte. {4}Attention ! Cette option peut entraîner une perte de données, car les pages peuvent être détournées de manière arbitraire. Les sites doivent savoir qu'ils acceptent ce type de comportement en choisissant cette option. Cette option fonctionne mieux pour les sites en lecture seule qui ne conservent pas de données utilisateur en mémoire, tels que les lecteurs de musique. Si la page que vous quittez comporte un événement beforeunload, l'utilisateur verra l'invite avant la fin de la navigation.

Démonstration

La démonstration de la capture de liens déclaratifs comprend en réalité deux démonstrations qui interagissent:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

L'enregistrement d'écran ci-dessous montre comment les deux interagissent. Elles présentent deux comportements différents : "new-client" et "existing-client-navigate". Veillez à tester les applications dans différents états, en les exécutant dans un onglet ou en tant que PWA installée, pour observer la différence de comportement.

Sécurité et autorisations

L'équipe Chromium a conçu et mis en œuvre la capture déclarative des liens à l'aide des principes fondamentaux définis dans Contrôler l'accès aux fonctionnalités puissantes de la plate-forme Web, y compris le contrôle utilisateur, la transparence et l'ergonomie. Cette API permet aux sites de nouvelles options de contrôle supplémentaires. Tout d'abord, pouvoir ouvrir automatiquement les applications installées dans une fenêtre. Elle utilise l'interface utilisateur existante, mais permet au site de la déclencher automatiquement. Deuxièmement, la possibilité de sélectionner une fenêtre existante sur son propre domaine et de déclencher un événement contenant l'URL sur laquelle l'utilisateur a cliqué. Cela permet au site de naviguer dans une fenêtre existante vers une nouvelle page, ignorant ainsi le flux de navigation HTML par défaut.

Migrer vers l'API Launch Handler

La phase d'évaluation de l'API déclarative Link Capturing a expiré le 30 mars 2022 pour Chromium 97 et versions antérieures. Elle sera remplacée par un ensemble de nouvelles fonctionnalités et API dans Chromium 98 et les versions ultérieures, qui incluent la capture de liens activée par l'utilisateur et l'API Launch Handler.

Dans Chromium 98, l'utilisateur doit désormais activer la capture automatique des liens au moment de l'installation de l'application Web. Pour activer cette fonctionnalité, l'utilisateur doit lancer une application installée depuis le navigateur à l'aide de l'option Ouvrir avec et sélectionner Mémoriser mon choix.

Exemple du paramètre "Ouvrir avec" d'une application installée avec l'option "Mémoriser mon choix" activée

Les utilisateurs peuvent également activer ou désactiver la capture des liens pour une application Web spécifique sur la page des paramètres de gestion des applications.

Exemple de page de paramètres d'une application installée.

Pour le moment, la capture de lien n'est disponible que sur ChromeOS. Elle sera bientôt compatible avec Windows, macOS et Linux.

Lancer l'API Handler

Le contrôle d'une navigation entrante est migré vers l'API Launch Handler, qui permet aux applications Web de décider du mode de lancement d'une application Web dans différentes situations (capture de liens, gestion de la cible ou du fichier, etc.). Pour passer de l'API déclarative Link Capture Capture vers l'API Launch Handler:

  1. Enregistrez votre site pour la phase d'évaluation du gestionnaire de lancement et placez la clé d'évaluation dans votre application Web.

  2. Ajoutez une entrée "launch_handler" au fichier manifeste de votre site.

    • Pour utiliser "capture_links": "new-client", ajoutez "launch_handler": { "route_to": "new-client" }.
    • Pour utiliser "capture_links": "existing-client-navigate", ajoutez "launch_handler": { "route_to": "existing-client-navigate" }.
    • Pour utiliser "capture_links": "existing-client-event" (qui n'a jamais été implémenté dans la phase d'évaluation déclarative de la capture de lien), ajoutez "launch_handler": { "route_to": "existing-client-retain" }. Avec cette option, les pages du champ d'application de votre application ne parcourront plus automatiquement lorsqu'un lien est enregistré. Vous devez gérer LaunchParams en JavaScript en appelant window.launchQueue.setConsumer() pour activer la navigation.

Le champ capture_links et l'enregistrement de la phase d'évaluation déclarative Link Captureturing sont valables jusqu'au 30 mars 2022. Ainsi, les utilisateurs de Chromium 97 ou d'une version antérieure pourront toujours lancer l'application Web via un lien capturé.

Pour en savoir plus, consultez Contrôler le lancement de votre application.

Commentaires

L'équipe Chromium souhaite connaître votre avis sur la capture déclarative des liens.

Décrivez-nous la conception de l'API.

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ? Signalez un problème de spécification dans le dépôt GitHub correspondant ou ajoutez vos commentaires à un problème existant.

Signaler un problème d'implémentation

Avez-vous détecté un bug dans l'implémentation de Chromium ? Ou l'implémentation est-elle différente des spécifications ? Signalez un bug à l'adresse new.crbug.com. Veillez à inclure autant de détails que possible, ainsi que des instructions simples pour reproduire le bug, puis saisissez UI>Browser>WebAppInstalls dans la zone Composants. Glitch est idéal pour partager des reproductions simples et rapides.

Afficher la compatibilité avec l'API

Prévoyez-vous d'utiliser la capture déclarative des liens ? Votre assistance publique aide l'équipe Chromium à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Envoyez un tweet à @ChromiumDev avec le hashtag #DeclarativeLinkCapturing, et indiquez-nous où et comment vous l'utilisez.

Liens utiles

Remerciements

La capture déclarative de lien a été spécifiée par Matt Giuca avec les entrées d'Alan Cutter et de Dominick Ng. L'API a été implémentée par Alan Cutter. Cet article a été lu par Joe Medley, Matt Giuca, Alan Cutter et Shunya Shishido. Image héros de Zulmaury Saavedra sur Unsplash.