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 un lien vers une page Web YouTube sur un appareil mobile, l'application YouTube pour iOS ou Android s'ouvre, si elle est installée. Toutefois, lorsque vous installez la PWA YouTube sur un ordinateur de bureau et que vous cliquez sur un lien, celui-ci s'ouvre dans un onglet de navigateur.

Mais c'est plus complexe. Que faire 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 pour ordinateur de bureau, 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 doivent-ils être créés pour chaque clic sur un lien ? En y réfléchissant, il existe de nombreuses façons de capturer des liens et des navigations, y compris, mais sans s'y limiter, les suivantes :

La capture de liens déclarative est une proposition de propriété de fichier manifeste d'application Web appelée "capture_links". Elle 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 qui se trouve dans le champ d'application de navigation de l'application, à partir d'un contexte en dehors du champ d'application 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 un onglet de navigateur ouvert qui se trouve dans le champ d'application et qu'il clique sur un lien interne).

Certaines conditions spéciales, comme le fait de cliquer sur un lien avec le bouton du milieu (ou de faire un clic droit, puis de sélectionner "Ouvrir dans un nouvel onglet"), ne déclenchent généralement pas le comportement de capture de lien. Le fait qu'un lien soit target=_self ou target=_blank n'a pas d'importance. Ainsi, les liens sur lesquels l'utilisateur clique dans une fenêtre de navigateur (ou dans une fenêtre d'une autre PWA) s'ouvrent dans la PWA, même s'ils provoqueraient normalement une navigation dans le même onglet.

Cas d'utilisation suggérés

Voici quelques exemples de sites pouvant utiliser cette API :

  • Les PWA qui souhaitent ouvrir une fenêtre plutôt qu'un onglet de navigateur lorsque l'utilisateur clique sur un lien vers elles. Dans un environnement de bureau, il est souvent judicieux d'ouvrir plusieurs fenêtres d'application à la fois.
  • Les PWA à fenêtre unique où le développeur préfère n'avoir qu'une seule instance de l'application ouverte à tout moment, avec de nouvelles navigations qui se concentrent sur l'instance existante. Voici quelques sous-cas d'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 même instance (par exemple, une bande d'onglets implémentée en HTML).

Activer la fonctionnalité via about://flags

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

Comment utiliser la capture de liens déclarative ?

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

  • "none" (par défaut) : aucune capture de lien. Les liens cliqués qui mènent à cette portée de PWA sont parcourus normalement, sans ouvrir de fenêtre de PWA.
  • "new-client" : chaque lien sur lequel l'utilisateur clique ouvre une nouvelle fenêtre PWA à cette URL.
  • "existing-client-navigate" : le lien sur lequel l'utilisateur a cliqué s'ouvre dans une fenêtre PWA existante, si disponible, ou dans une nouvelle fenêtre dans le cas contraire. Si plusieurs fenêtres PWA existent, le navigateur peut en choisir une de manière arbitraire. Ce comportement est identique à celui de "new-client" si aucune fenêtre n'est actuellement ouverte. 🚨 Attention ! Cette option peut entraîner une perte de données, car les utilisateurs peuvent quitter les pages de manière arbitraire. Les sites doivent savoir qu'ils acceptent ce comportement en choisissant cette option. Cette option est idéale pour les sites "en lecture seule" qui ne conservent pas les données utilisateur en mémoire, comme les lecteurs de musique. Si la page quittée comporte un événement beforeunload, l'utilisateur verra l'invite avant la fin de la navigation.

Démo

La démo de la capture de liens déclarative se compose en fait de deux démos qui interagissent entre elles :

  1. Site 1
  2. Site 2

La vidéo ci-dessous montre comment les deux interagissent. Ils présentent deux comportements différents : "new-client" et "existing-client-navigate". Assurez-vous de tester les applications dans différents états, en les exécutant dans un onglet ou en tant que PWA installée, pour voir la différence de comportement.

Sécurité et autorisations

L'équipe Chromium a conçu et implémenté la capture déclarative des liens en utilisant les principes de base définis dans Controlling Access to Powerful Web Platform Features, y compris le contrôle par l'utilisateur, la transparence et l'ergonomie. Cette API permet aux sites de bénéficier d'options de contrôle supplémentaires. Tout d'abord, la possibilité d'ouvrir automatiquement les applications installées dans une fenêtre. Cette méthode utilise l'UI existante, mais permet au site de la déclencher automatiquement. Deuxièmement, la possibilité de concentrer une fenêtre existante sur son propre domaine et de déclencher un événement contenant l'URL sur laquelle l'utilisateur a cliqué. L'objectif est de permettre au site de naviguer dans une fenêtre existante vers une nouvelle page, en remplaçant le flux de navigation HTML par défaut.

Migrer vers l'API Launch Handler

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

Dans Chromium 98, la capture automatique des liens est désormais un comportement que l'utilisateur doit activer, plutôt qu'une autorisation accordée à une application Web lors de l'installation. Pour activer la capture des liens, l'utilisateur doit lancer une application installée à partir du navigateur à l'aide de l'option Ouvrir avec et choisir Mémoriser mon choix.

Exemple de 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 de 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.

La capture de liens est une fonctionnalité réservée à ChromeOS pour le moment. La compatibilité avec Windows, macOS et Linux est en cours de développement.

API Launch Handler

Le contrôle d'une navigation entrante est migré vers l'API Launch Handler, qui permet aux applications Web de décider comment une application Web se lance dans diverses situations telles que la capture de liens, le partage de cibles ou la gestion de fichiers, etc. Pour migrer de l'API Declarative Link Capturing vers l'API Launch Handler :

  1. Enregistrez votre site pour la phase d'évaluation de Launch Handler et placez la clé de la phase 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 l'évaluation d'origine de la capture de liens déclarative), ajoutez : "launch_handler": { "route_to": "existing-client-retain" }. Avec cette option, les pages de votre application ne seront plus redirigées automatiquement lorsqu'une navigation par lien est capturée. Vous devez gérer LaunchParams en JavaScript en appelant window.launchQueue.setConsumer() pour activer la navigation.

L'enregistrement de la phase d'évaluation de l'origine du champ capture_links et de la capture déclarative des liens est valable jusqu'au 30 mars 2022. Cela permettra aux utilisateurs de Chromium 97 et versions antérieures de continuer à lancer l'application Web à partir d'un lien capturé.

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

Commentaires

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

Parlez-nous de la conception de l'API

Y a-t-il un aspect de l'API qui ne fonctionne pas comme prévu ? Ou bien manquent-ils 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 lié aux spécifications dans le dépôt GitHub correspondant ou ajoutez vos commentaires à un problème existant.

Signaler un problème d'implémentation

Avez-vous trouvé un bug dans l'implémentation de Chromium ? Ou l'implémentation est-elle différente de la spécification ? Signalez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour reproduire le problème et saisissez UI>Browser>WebAppInstalls dans la zone Composants.

Soutenir l'API

Prévoyez-vous d'utiliser la capture de liens déclarative ? Votre soutien public 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 en utilisant le hashtag #DeclarativeLinkCapturing et dites-nous où et comment vous l'utilisez.

Liens utiles

Remerciements

La capture de liens déclarative a été spécifiée par Matt Giuca avec l'aide d'Alan Cutter et Dominick Ng. L'API a été implémentée par Alan Cutter. Cet article a été examiné par Joe Medley, Matt Giuca, Alan Cutter et Shunya Shishido. Image principale de Zulmaury Saavedra sur Unsplash.