Extensions de champ d'application d'application Web

À partir de Chrome 122, vous pouvez vous abonner à la phase d'évaluation pour le membre du fichier manifeste d'application scope_extensions, ce 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 lance cette fonctionnalité et quand vous pourriez vouloir l'utiliser.

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

Présentation

Certaines applications Web ont plusieurs origines. Par exemple, example.com est l'application principale, puis space_1.example.com, ... et space_n.example.com, parfois associées à special-example.com en tant que sous-expériences, le tout sous le toit de l'application principale. Ce type d'architecture de site a des implications dans le contexte des progressive web apps. Les limites incluent l'impossibilité de partager les service workers, tout type d'appareil, l'espace de stockage local et les autorisations entre les origines. En outre, dans une PWA autonome, la navigation entre origines affiche une barre d'interface utilisateur de fenêtre ("Hors du champ d'application") indiquant que l'utilisateur a quitté l'expérience de la PWA. Pour découvrir comment contourner certains de ces problèmes, consultez les articles Progressive web apps in multi-origin sites (Applications Web progressives sur des sites multi-origines) et Créer plusieurs progressive web apps sur le même domaine.

L'API Scope Extensions permet aux applications Web de surmonter certains des défis que les règles d'origine identique imposent à ce type d'architecture de site. Elle permet aux applications Web d'étendre leur champ d'application à d'autres origines afin de proposer une expérience unifiée, en tenant compte de l'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 application Web contiguë lorsqu'il s'agit de capturer l'interface utilisateur d'une application Web et de créer un lien. Par exemple, laisser le site example.com qui s'étend sur example.com.co.uk et support.example.com se comporter autant que possible comme une seule application Web.

Schéma illustrant une PWA principale et les sous-expériences associées.

Les extensions de champ d'application permettent aux PWA multi-origines de se comporter comme une application Web contiguë pour l'interface utilisateur de l'application Web.

Concrètement, cela se traduit par deux objectifs plus spécifiques:

  • Navigation multi-origine:permet aux utilisateurs de naviguer entre les origines associées sans perturber l'expérience utilisateur en appelant l'interface utilisateur de la fenêtre pour informer l'utilisateur qu'il abandonne la PWA.
  • Capture de liens d'origines multiples:autorisez les applications Web à capturer les navigations des utilisateurs vers les sites auxquels ils sont affiliés.

Navigation dans le champ d'application multi-origine

Par défaut, lorsque les utilisateurs naviguent entre différentes origines dans une PWA autonome, une UI de fenêtre leur indique qu'ils sortent de la PWA. Dans Chrome, cette interface utilisateur se compose d'une barre "hors du champ d'application" 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 percevoir qu'ils en sont retirés.

Barre en dehors du champ d'application en haut d'une PWA autonome.

Barre "Hors du champ d'application" affichée dans Chrome lorsque les utilisateurs parcourent différentes origines dans une PWA autonome.

Avec les extensions de champ d'application, 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 lien désigne la capacité d'une application à capturer des liens dans son champ d'application. La mise en œuvre varie selon les navigateurs et les systèmes d'exploitation. Dans Chrome sur ChromeOS, par exemple, les liens associés à une PWA installée ouvrent par défaut un onglet de navigateur avec une indication dans la barre d'adresse qu'une application est capable de les gérer, ce qui permet à l'utilisateur d'activer la capture automatique des liens à partir de ce point.

Invite omnibar pour une PWA installée

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

Si un utilisateur clique sur un lien en dehors du champ d'application de la PWA (y compris des liens vers des sous-domaines ou des domaines de premier niveau), il ne sera pas reconnu comme lui appartenant. Par exemple, les liens seront ouverts dans un onglet de navigateur sans indiquer à l'utilisateur qu'il existe une application capable de les gérer. 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 couverts.

Implémentation

L'implémentation d'extensions de champ d'application nécessite d'établir la relation entre l'origine principale et les origines associées.

Déclarer la liste des origines associées

Ajoutez un membre scope_extensions du fichier manifeste d'application Web à l'origine principale de la PWA pour permettre à l'application Web d'étendre son champ d'application à 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 à 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 connu.

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

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

Démonstration

La démonstration comprend deux sites:

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

Tester la navigation multi-origine

Comme condition préalable pour ces tests, ouvrez la PWA principale dans un navigateur, installez-la en tant que PWA, puis 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 ne faisant pas partie du champ d'application étendu.

Fenêtre principale de la PWA avec les liens dans le champ d'application et le champ d'application étendu.

PWA de démonstration avec des liens vers l'origine dans le champ d'application étendu et l'origine ne se trouvant pas dans le champ d'application étendu.

Navigation multi-origine par défaut (hors du champ d'application étendu)

  1. Cliquez sur le lien vers l'origine non comprise dans le champ d'application étendu dans la PWA en plein écran.
  2. Par conséquent, la navigation se produit et la barre hors champ d'application s'affiche.

Fenêtre principale de la PWA hors du champ d'application après un clic sur le lien "Hors du champ d'application".

Barre "Hors du champ d'application" affichée par défaut pour une navigation multi-origine pour une PWA en mode autonome.

Navigation entre origines multiples avec extensions de champ d'application (dans un champ d'application étendu)

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

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

Barre "Hors du champ d'application" non affichée dans la navigation multi-origine une fois l'association de l'origine créée avec les extensions de champ d'application.

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

Invite omnibar pour une PWA installée avec un champ d'application étendu.

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

Phase d'évaluation

Si vous souhaitez tester cette API dans votre application sur le terrain avec des utilisateurs réels, vous pouvez le faire avec un phase d'évaluation. Les phases d'évaluation vous permettent de tester des fonctionnalités expérimentales avec vos utilisateurs en obtenant un jeton de test lié à 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 121 à 126). Pour obtenir votre propre jeton permettant d'exécuter une phase d'évaluation, remplissez le formulaire de demande.

Commentaires

L'équipe Chrome souhaite connaître l'utilité de cette API. Pour aider l'équipe à faire évoluer cette API avec des commentaires sur son utilité et sur les nouveaux cas d'utilisation non couverts dans la version actuelle, signalez un problème sur GitHub.

Ressources supplémentaires

Remerciements

Un grand merci à l'équipe qui a développé cette API. Les extensions de champ d'application ont été spécifiées par Alan Cutter et Lu Huang, avec les entrées de Matt Giuca. L'API a été mise en œuvre par Alan Cutter de Google Chrome, Hassan Talat, Kristin Lee et Lu Huang de Microsoft Edge.