Extensions de champ d'application d'application Web

À partir de Chrome 122, vous pouvez vous abonner à l'origin trial pour le membre du fichier manifeste de l'application scope_extensions, qui permet aux sites qui contrôlent plusieurs sous-domaines et domaines de premier niveau d'être présentés comme une seule application Web. Ce document explique pourquoi l'équipe Chrome introduit cette fonctionnalité et quand vous pouvez l'utiliser.

Demián Renzulli
Demián Renzulli
X GitHub
Thomas Steiner

Présentation

Certaines applications Web ont plusieurs origines, par exemple example.com comme application principale, puis space_1.example.com, …, space_n.example.com, parfois combinées avec special-example.com, comme sous-expériences, le tout sous l'application principale. Ce type d'architecture de site a des implications dans le contexte des applications Web progressives. Les limites incluent l'impossibilité de partager des service workers, tout type d'appareil, le stockage local et les autorisations entre les origines. De plus, la navigation cross-origin dans une PWA autonome affiche une interface utilisateur de fenêtre (barre "hors champ") indiquant que l'utilisateur a quitté l'expérience PWA. Pour savoir comment contourner certains de ces problèmes, consultez les articles Progressive Web Apps in multi-origin sites (Applications Web progressives dans les sites multi-origines) et Building multiple Progressive Web Apps on the same domain (Créer plusieurs applications Web progressives sur le même domaine).

L'API Scope Extensions permet aux applications Web de surmonter certains des défis que la politique d'origine identique impose à ce type d'architecture de site. Il permet aux applications Web d'étendre leur champ d'application à d'autres origines pour offrir une expérience unifiée, à condition qu'il y ait un accord entre l'origine principale de l'application Web et les origines associées.

Objectifs

L'objectif principal de l'API Scope Extensions est de permettre aux sites qui contrôlent plusieurs sous-domaines et domaines de premier niveau de se comporter comme une seule et même application Web continue en ce qui concerne l'UI de l'application Web et la capture de liens. Par exemple, en permettant au site example.com qui s'étend sur example.com.co.uk et support.example.com de se comporter autant que possible comme une seule application Web.

Diagramme montrant une PWA principale et les sous-expériences associées.

Les extensions de portée permettent aux PWA multi-origines de se comporter comme une application Web contiguë en ce qui concerne l'interface utilisateur de l'application Web.

En pratique, cela se traduit par deux objectifs plus spécifiques :

  • Navigation cross-origin : permettez aux utilisateurs de naviguer entre les origines associées sans perturber l'expérience utilisateur en invoquant l'interface utilisateur de la fenêtre pour informer l'utilisateur qu'il quitte la PWA.
  • Capture de liens d'origine croisée : permet aux applications Web de capturer les navigations des utilisateurs vers les sites auxquels elles sont affiliées.

Navigation couverte multi-domaine

Par défaut, lorsque les utilisateurs naviguent entre les origines dans une PWA autonome, une interface utilisateur de fenêtre s'affiche pour leur indiquer qu'ils quittent l'expérience PWA. Dans Chrome, cette UI se compose d'une barre "hors champ" qui contient l'URL de la nouvelle origine. Cela perturbe l'expérience utilisateur, car les utilisateurs s'attendent à continuer à naviguer dans le même contexte d'application, mais ils peuvent avoir l'impression d'en être sortis.

Barre hors champ d'application en haut d'une PWA autonome.

Barre "Hors champ" affichée dans Chrome lorsque les utilisateurs naviguent entre différentes origines dans une PWA autonome.

Avec les extensions de portée, l'interface utilisateur de la fenêtre ne s'affiche pas lorsque les utilisateurs accèdent à l'une des origines associées. La PWA est donc présentée comme une expérience unifiée.

La capture de liens fait référence à la capacité d'une application à capturer des liens dans son champ d'application. La façon dont cela est implémenté varie selon les navigateurs et les systèmes d'exploitation. Dans Chrome sur ChromeOS, par exemple, les liens inclus dans le champ d'application d'une PWA installée ouvrent par défaut un onglet de navigateur avec une indication dans la barre d'adresse indiquant qu'une application est capable de gérer ces liens. L'utilisateur peut alors choisir d'activer la capture automatique des liens à partir de ce moment.

Invite de la barre d'adresse pour une PWA installée.

Fragment de la barre d'adresse Chrome pour un onglet dans ChromeOS montrant une indication visuelle que le lien peut être géré par une PWA et l'option de mémoriser cette décision.

Si un utilisateur clique sur un lien qui ne fait pas partie du champ d'application de la PWA (y compris les liens vers des sous-domaines ou des domaines de premier niveau), il ne sera pas reconnu comme appartenant à la PWA. Par exemple, les liens s'ouvriront dans un onglet de navigateur sans aucune indication à l'utilisateur qu'une application est capable de gérer le lien. L'API Scope Extensions permet d'étendre le champ d'application de la PWA afin que les origines associées soient traitées comme des liens inclus dans le champ d'application.

Implémentation

Pour implémenter des extensions de portée, vous devez établir la relation entre l'origine principale et les origines associées.

Déclarer la liste des origines associées

Ajoutez un membre du fichier manifeste de l'application Web scope_extensions à l'origine PWA principale pour permettre à l'application Web d'étendre sa portée à d'autres origines.

Fichier manifeste d'application Web (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

Confirmer les associations

Chacune des origines listées confirme l'association avec l'application Web à l'aide d'un fichier de configuration /.well-known/web-app-origin-association. Ce fichier doit être nommé web-app-origin-association et être diffusé à cet emplacement exact, car il s'agit d'un URI Well-Known.

/.well-known/web-app-origin-association (origine associée)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

Démo

La démo se compose de deux sites :

Pour effectuer les tests suivants, vous devez activer le flag about://flags/#enable-desktop-pwas-scope-extensions (disponible à partir de Chrome 115).

Tester la navigation d'origine croisée

Avant de lancer ces tests, ouvrez la PWA principale dans un navigateur, installez-la en tant que PWA et ouvrez-la pour l'exécuter en mode autonome. La PWA contient des liens vers une origine dans le champ d'application étendu et vers une origine hors du champ d'application étendu.

Fenêtre PWA principale avec des liens de portée et de portée étendue.

PWA de démonstration avec des liens vers l'origine dans le champ d'application étendu et l'origine non incluse dans le champ d'application étendu.

Navigation cross-origin par défaut (hors champ d'application étendu)

  1. Cliquez sur le lien L'origine n'est pas dans le champ d'application étendu à l'intérieur de la PWA en plein écran.
  2. La navigation a lieu et la barre "Hors champ" s'affiche.

Fenêtre principale de la PWA avec la barre hors champ après avoir cliqué sur le lien hors champ.

Barre "Hors champ" affichée par défaut pour une navigation cross-origin pour une PWA en mode autonome.

Navigation cross-origin avec les extensions de portée (dans la portée étendue)

  1. Revenez à la page d'accueil de la PWA.
  2. Cliquez sur le lien vers l' origine qui ne figure pas dans le champ d'application étendu.
  3. Par défaut, une barre "Hors couverture" devrait s'afficher, mais ce n'est pas le cas en raison de l'association des extensions de couverture.

Fenêtre principale de la PWA sans la barre hors champ après avoir cliqué sur le lien d'étendue étendue.

La barre "Hors champ d'application" ne s'affiche pas lors de la navigation cross-origin après l'association d'origine avec les extensions de portée.

  1. Ouvrez et installez la PWA principale sur un appareil ChromeOS.
  2. Cliquez sur le lien suivant : origine associée.
  3. Le lien s'ouvre dans un nouvel onglet de navigateur et une invite s'affiche pour l'ouvrir dans la PWA installée.

Invite de la barre d'adresse pour une PWA installée avec une portée étendue.

Si vous cliquez sur un lien vers l'origine associée d'une PWA, le lien s'ouvre dans un nouvel onglet et une icône "Ouvrir dans l'application" s'affiche, ce qui permet à l'utilisateur d'activer la capture automatique des liens.

Essai Origin Trial

Si vous souhaitez tester cette API dans votre application sur le terrain avec de vrais utilisateurs, vous pouvez le faire avec un test d'origine. Les périodes d'essai des origines vous permettent de tester des fonctionnalités expérimentales avec vos utilisateurs en obtenant un jeton de test associé à votre domaine. Vous pouvez ensuite déployer votre application et vous attendre à ce qu'elle fonctionne dans un navigateur compatible avec la fonctionnalité que vous testez (dans ce cas, elle est disponible dans Chrome de la version 121 à la version 126). Pour obtenir votre propre jeton et exécuter un test d'origine, remplissez le formulaire de demande.

Commentaires

L'équipe Chrome souhaite recueillir vos commentaires sur l'utilité de cette API. Pour aider l'équipe à faire évoluer cette API en lui fournissant des commentaires sur son utilité et de nouveaux cas d'utilisation non couverts par la version actuelle, ouvrez un problème sur GitHub.

Ressources supplémentaires

Remerciements

Merci tout particulièrement à l'équipe qui a développé cette API. Les extensions de portée ont été spécifiées par Alan Cutter et Lu Huang, avec la contribution de Matt Giuca. L'API a été implémentée par Alan Cutter de Google Chrome et Hassan Talat, Kristin Lee et Lu Huang de Microsoft Edge.