Publié le 19 août 2025
La gestion de la navigation englobe les méthodes permettant de contrôler la façon dont une application Web progressive (PWA) gère la navigation des utilisateurs. Un élément essentiel de ce processus est la capture de la navigation, le processus du navigateur qui détermine si le fait de cliquer sur un lien doit lancer l'application Web progressive installée ou ouvrir un nouvel onglet de navigateur.
Ce guide présente la nouvelle version de la capture de navigation, disponible à partir de Chrome 139. Bien que le comportement par défaut du navigateur convienne dans la plupart des cas, une compréhension plus approfondie de ces techniques de gestion et des API associées est essentielle si vous souhaitez offrir la meilleure expérience possible à vos utilisateurs.
La section Contrôles pour les développeurs explique comment personnaliser la navigation pour offrir la meilleure expérience de lancement possible à votre PWA.
Nouveau comportement par défaut
Pour s'adapter aux préférences des utilisateurs et réduire les frictions, Chrome standardise la façon dont il gère les liens. Auparavant, le comportement était incohérent entre les plates-formes. Les appareils mobiles privilégiaient généralement le lancement des applications installées, tandis que les navigateurs pour ordinateur ouvraient d'abord un lien dans un onglet avant de signaler qu'une application pouvait le gérer.
La nouvelle approche unifiée pour la capture de la navigation ouvre automatiquement les liens dans leur PWA installée correspondante. Les liens ne redirigent vers un onglet de navigateur que si la PWA n'est pas installée ou si l'utilisateur a désactivé cette option. Ce nouveau comportement est disponible à partir de Chrome 139 pour Windows, Mac et Linux. La compatibilité avec ChromeOS sera disponible dans une prochaine version.
Processus de gestion de la navigation
La capture de la navigation fait partie du processus de gestion de la navigation. Ce processus couvre l'intégralité du flux, de l'action initiale de l'utilisateur aux décisions du navigateur et aux comportements qui en résultent configurés par le développeur :
- Actions de l'utilisateur : incluent les interactions telles que les clics ou les appuis sur des liens.
- Décisions du navigateur : inclut les tâches et les décisions gérées par le navigateur, telles que les comportements par défaut, comme la capture de la navigation.
- Commandes pour les développeurs : incluent des API Web qui permettent aux développeurs d'indiquer au navigateur comment gérer des tâches spécifiques.
L'interaction de ces éléments détermine si la PWA s'ouvre dans une fenêtre autonome ou dans un onglet de navigateur.
Un cas d'utilisation fondamental de la gestion de la navigation se produit lorsqu'un utilisateur clique ou appuie sur un lien vers la PWA installée à partir d'une autre page du navigateur. L'exemple suivant décrit le cas d'un utilisateur qui a installé la PWA Google Chat et qui clique sur un lien vers celle-ci à partir d'une invitation Google Agenda.
calendar.google.com.Actions de l'utilisateur
Chaque action de l'utilisateur se compose de trois éléments clés : l'événement (un clic ou un appui, par exemple), la surface sur laquelle il se produit (une page Web ou un raccourci sur le bureau, par exemple) et le type de lien activé (une URL HTTPS, par exemple). Par exemple, l'action d'un utilisateur peut consister à cliquer sur un lien vers https://chat.google.com/meeting_room_id dans le champ d'application de la PWA Google Chat à partir d'une page Web sur calendar.google.com.
Décisions concernant le navigateur
Lors d'une action de l'utilisateur, comme un clic à l'étape précédente, le navigateur exécute le processus de capture de la navigation pour déterminer si les liens doivent être ouverts dans un onglet de navigateur ou dans une PWA installée. Voici les étapes à suivre :
- Déterminez si la navigation est capturable : en général, une navigation est considérée comme capturable si elle crée un nouveau frame et ne s'ouvre pas dans un contexte de navigation auxiliaire.
- Identifier une PWA de contrôle : si la navigation est capturable, le navigateur tente de trouver une PWA qui "contrôle" l'URL (qui se trouve dans le champ d'application défini dans son fichier manifeste d'application Web).
- Vérifier les préférences de l'utilisateur : si une PWA de contrôle est trouvée, le navigateur vérifie les préférences de l'utilisateur. Si l'utilisateur n'a pas désactivé l'option dans les paramètres de l'application, la PWA se lance. Sinon, le lien s'ouvre dans un nouvel onglet du navigateur.
- Lancer l'application Web progressive : le navigateur lance l'application Web progressive à l'aide de l'algorithme de gestion du lancement. Vous pouvez l'influencer à l'aide de l'API Launch Handler, qui sera abordée ensuite.
Le schéma suivant résume ce processus :
Paramètres pour les développeurs
Bien que le processus de navigation repose principalement sur les paramètres par défaut du navigateur et les paramètres utilisateur, vous pouvez utiliser différentes API pour gérer des aspects spécifiques. Suite à la récente mise à jour de la capture de navigation, certaines API Web de longue date sont devenues plus pertinentes.
API Launch Handler
Cette API entre en jeu lorsque le navigateur décide de lancer la PWA, ce qui vous permet de contrôler la façon dont elle est lancée (par exemple, dans une fenêtre nouvelle ou existante).
Définissez la façon dont la PWA se lance à l'aide du membre launch_handler dans le fichier manifeste de l'application Web, qui inclut un sous-champ appelé client_mode. Ce sous-champ détermine si une fenêtre nouvelle ou existante doit être utilisée et si elle doit naviguer. Les valeurs autorisées pour client_mode sont les suivantes :
focus-existing: pour gérer le lien dans une fenêtre d'application existante, comme une PWA déjà en cours d'exécution en mode autonome.navigate-existing: dans cette option, le contexte de navigation le plus récent dans une fenêtre d'application Web est redirigé vers l'URL cible du lancement.navigate-new: cette option permet de créer un contexte de navigation dans une fenêtre d'application Web pour charger l'URL cible du lancement.
Utilisez launchQueue API pour fournir des paramètres supplémentaires et gérer les cas particuliers.
L'API Launch Handler est disponible à partir de Chrome 110, mais elle devient beaucoup plus utile avec la mise à jour de la capture de navigation. Pour en savoir plus, consultez la documentation de l'API Launch Handler.
Autres API associées
En plus de la gestion du lancement, d'autres API peuvent également jouer un rôle dans ce processus, en fonction des besoins spécifiques de votre application. Il s'agit notamment des gestionnaires de protocoles d'URL, qui permettent à une application Web d'enregistrer sa capacité à gérer des schémas d'URL au-delà des schémas standards http et https (par exemple, les protocoles standards tels que mailto: ou les protocoles personnalisés tels que web+music). De plus, l'API Web App Scope Extensions (actuellement en développement) vous permet d'étendre le champ d'application de votre PWA pour capturer les liens provenant d'autres origines, y compris les sous-domaines, afin que la PWA puisse être lancée lorsqu'un utilisateur clique sur un lien provenant d'une origine associée. Nous ne les aborderons pas en détail dans cet article, mais vous pouvez consulter les liens correspondants pour en savoir plus.
Cas d'utilisation : capture des liens Google Chat dans la PWA Chat
Pour conclure, découvrez comment les différents éléments fonctionnent ensemble dans l'exemple d'un utilisateur qui clique sur un lien Google Agenda vers un espace Google Chat, alors qu'il a déjà installé la PWA Google Chat.
Avant la capture de la navigation
Dans la vidéo suivante, un utilisateur crée une réunion Google Agenda et invite trois invités. L'application Agenda génère automatiquement un lien Google Chat qui inclut tous les participants. Lorsque l'utilisateur clique sur ce lien, le salon de discussion s'ouvre dans un nouvel onglet du navigateur. Une icône dans la barre d'adresse indique ensuite qu'une PWA correspondante est installée, mais l'utilisateur doit la lancer manuellement. Voici le comportement avant la mise à jour de la capture de la navigation :
Après la capture de la navigation
La vidéo suivante montre le même workflow utilisateur, mais avec le nouveau comportement de capture de la navigation. Dans cette version, lorsque vous cliquez sur le lien Google Chat depuis Google Agenda, la salle de chat correspondante s'ouvre directement dans la PWA installée. De plus, l'équipe Google Chat a implémenté la gestion du lancement en ajoutant un attribut launch_handler au fichier manifeste de l'application Web. En définissant son client_mode sur focus-existing, ils s'assurent que le lien s'ouvre dans une instance existante de la PWA, si elle est déjà en cours d'exécution. En supprimant la latence impliquée dans l'ouverture d'un nouvel onglet de navigateur, puis en déclenchant le chargement d'une page, le "temps d'interactivité de l'utilisateur" effectif peut, par conception, être plus rapide. En effet, Google Chat a considérablement amélioré la latence de navigation en supprimant la nécessité de lancer une nouvelle application.
Conclusion et étapes suivantes
Cet article a exploré le nouveau comportement de capture de navigation par défaut disponible à partir de Chrome 139, en se concentrant sur un cas d'utilisation courant d'un utilisateur cliquant sur un lien HTTPS dans le champ d'application d'une PWA installée. Pour en savoir plus et découvrir des cas d'utilisation, consultez Gestion de la navigation dans les PWA installées. Le schéma suivant présente la répartition complète des cas d'utilisation, y compris les événements utilisateur, les surfaces et les protocoles, avec leurs résultats correspondants :
La gestion de la navigation est un aspect crucial, mais souvent négligé, de l'UX de votre application, car elle contrôle son point d'entrée. Les fonctionnalités et les liens présentés dans cet article peuvent vous aider à offrir la meilleure expérience possible de type application pour votre PWA.