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

Thomas Steiner

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

Cliquer sur des liens sur le Web peut parfois réserver de bonnes surprises. Par exemple, si vous cliquez sur un lien vers YouTube sur une page Web 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, il s'ouvre dans un onglet de navigateur.

Mais la situation est plus complexe. Que faire si le lien ne s'affiche 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, 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 ? En y réfléchissant, il existe de nombreuses façons de capturer les liens et les navigations, y compris les suivantes, mais sans s'y limiter:

La capture de lien déclarative 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 produire lorsque le navigateur est invité à accéder à une URL située dans le champ d'application de navigation, à 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, si l'utilisateur a ouvert un onglet de navigateur qui se trouve dans le champ d'application et qu'il clique sur un lien interne).

Certaines conditions spéciales, comme le clic avec le bouton central sur un lien (ou le clic droit, puis "Ouvrir dans un nouvel onglet") ne déclenchent généralement pas le comportement de capture de lien. Il n'a pas d'importance qu'un lien soit target=_self ou target=_blank. Les liens sur lesquels vous cliquez dans une fenêtre de navigateur (ou dans la fenêtre d'une autre PWA) s'ouvrent dans la PWA, même s'ils entraîneraient normalement une navigation dans le même onglet.

Suggestions de cas d'utilisation

Voici quelques exemples de sites qui peuvent 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 eux. 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 n'avoir qu'une seule instance de l'application ouverte à tout moment, avec de nouvelles navigations qui mettent en avant l'instance existante. Voici quelques sous-cas d'utilisation :
    • Applications pour lesquelles il est logique de n'exécuter qu'une seule instance (par exemple, un lecteur de musique ou un jeu).
    • Applications qui incluent la gestion multidocument dans une même instance (par exemple, une barre d'onglets implémentée en HTML).

Activation via about://flags

Pour tester la capture de lien déclarative en local, sans jeton d'essai d'origine, activez l'option #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 exploitant le champ manifeste d'application Web supplémentaire "capture_links". Il utilise 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, par défaut "none". Les valeurs suivantes sont acceptées :

  • "none" (valeur par défaut): aucune capture de lien. Les liens cliqués qui mènent à ce champ d'application PWA naviguent normalement sans ouvrir de fenêtre PWA.
  • "new-client": chaque lien cliqué ouvre une nouvelle fenêtre PWA à cette URL.
  • "existing-client-navigate": le lien sur lequel vous avez cliqué s'ouvre dans une fenêtre PWA existante, si une telle fenêtre est disponible, ou dans une nouvelle fenêtre si ce n'est pas le cas. Si plusieurs fenêtres PWA existent, le navigateur peut en choisir une de façon arbitraire. Il se comporte comme "new-client" si aucune fenêtre n'est actuellement ouverte. 🚨 Attention ! Cette option peut entraîner une perte de données, car les pages peuvent être quittées de manière arbitraire. Les sites doivent être conscients qu'en choisissant cette option, ils activent ce comportement. Cette option fonctionne mieux pour les sites en lecture seule qui ne stockent pas de 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émonstration de la capture de lien déclarative se compose en réalité de deux démonstrations qui interagissent entre elles:

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

La vidéo ci-dessous montre comment les deux interagissent. Ils présentent deux comportements différents, "new-client" et "existing-client-navigate". Veillez à tester les applications dans différents états, en cours d'exécution 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 de lien déclarative en utilisant les principes de base 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 offre aux sites de nouvelles options de contrôle. Tout d'abord, vous pouvez 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 mettre en surbrillance 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 vers une nouvelle page dans une fenêtre existante, en ignorant 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. Elle sera remplacée par un ensemble de nouvelles fonctionnalités et API dans Chromium 98 et versions ultérieures, qui inclut 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 activé par l'utilisateur plutôt que d'être accordée à une application Web au moment de l'installation. Pour activer la capture des liens, un utilisateur doit lancer une application installée à partir du navigateur à l'aide de 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 des paramètres d'une application installée.

La capture de lien est une fonctionnalité réservée à ChromeOS pour le moment. La prise en charge de Windows, macOS et Linux est en cours.

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 de la manière dont une application Web se lance dans diverses situations, telles que la capture de liens, la cible de partage ou la gestion des 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 l'origine du Gestionnaire de lancement et placez la clé d'évaluation de l'origine 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 le test de l'origine de la capture de liens déclarative), ajoutez : "launch_handler": { "route_to": "existing-client-retain" }. Avec cette option, les pages de la portée de votre application ne navigueront plus automatiquement lorsqu'une navigation vers un lien sera capturée. 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 de la capture de liens déclarative sont valables jusqu'au 30 mars 2022. Cela garantit que les utilisateurs de Chromium 97 et versions antérieures peuvent toujours 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 souhaite connaître votre expérience avec la capture de liens déclarative.

Parlez-nous de la conception de l'API

L'API ne fonctionne-t-elle pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter 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 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 le champ Composants. Glitch est idéal pour partager des reproductions rapidement et facilement.

Afficher la compatibilité avec 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 avec le hashtag #DeclarativeLinkCapturing et indiquez-nous où et comment vous l'utilisez.

Liens utiles

Remerciements

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