Cette page a été traduite par l'API Cloud Translation.

Extensions de champ d'application d'application Web

À partir de Chrome 122, vous pouvez vous abonner à la phase d'évaluation pour le scope_extensions qui autorise les sites qui contrôlent plusieurs sous-domaines et les principaux sont présentés comme une seule et même application Web. Ce document explique pourquoi l'équipe Chrome lance cette fonctionnalité, et vous indique quand l'utiliser.

Demián Renzulli

Thomas Steiner

Présentation

Certaines applications Web ont plusieurs origins, pour par exemple example.com comme application principale, puis space_1.example.com, ..., space_n.example.com, parfois associé à special-example.com, comme et des sous-expériences, tout cela sous le toit de l'application principale. Ce type de site a des implications dans le contexte des progressive web apps. Les limitations incluent l'impossibilité de partager les service workers, quels que soient les appareils, le stockage local et les autorisations à travers les origines. De plus, la navigation multi-origines une PWA autonome affiche une interface utilisateur de fenêtre ("barre hors champ d'application") indiquant que l'utilisateur ne fait plus partie de l'expérience PWA. Vous pouvez apprendre à contourner certains ces problèmes dans les articles Progressive web apps 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 la règle de même origine impose à ce type d'architecture de site. Il permet aux applications Web d'étendre leurs portée à d'autres origines pour offrir une expérience unifiée, compte tenu de l'accord conclu entre les l'origine principale 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 pour qu'ils se comportent comme une seule application Web contiguë lorsqu'il s'agit de l'UI d'une application Web et de la capture de liens. Par exemple, laisser le site example.com qui couvre example.com.co.uk et support.example.com se comporte comme 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ë lorsque : pour l'UI de l'application Web.

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

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

Navigation multi-origine dans le champ d'application

Par défaut, lorsque les utilisateurs naviguent entre différentes origines dans une PWA autonome, ils sont affiché une interface utilisateur de fenêtre indiquant qu'ils sortent de l'expérience PWA. Dans Chrome, cette interface utilisateur est "hors champ d'application" qui contient l'URL la nouvelle origine. Cela perturbe l'expérience utilisateur, car les utilisateurs s'attendent à continuent à naviguer dans le même contexte d'application, mais peuvent percevoir où on les élimine.

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

"Hors du champ d'application" qui s'affiche dans Chrome lorsque les utilisateurs naviguent d'une origine à une autre 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 à des origines associées. La PWA est donc présentée comme une expérience unifiée.

Capture de liens multi-origines

La capture de lien désigne la capacité d'une application à capturer des liens au sein de son le champ d'application. La méthode de mise en œuvre varie selon les navigateurs et les systèmes d'exploitation. systèmes. Dans Chrome sous ChromeOS, par exemple, les liens associés à un Par défaut, les PWA ouvrent un onglet du navigateur. La barre d'adresse indique que une application est capable de gérer ces liens, ce qui permet à l'utilisateur activer la capture automatique du lien à partir de ce moment-là.

Invite omnibar pour une PWA installée.

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

Si un utilisateur clique sur un lien hors du champ d'application de la PWA (y compris liens vers des sous-domaines ou des domaines de premier niveau), ils ne seront pas reconnus comme appartenant avec lui. Par exemple, les liens s'ouvrent dans un onglet de navigateur sans indication d'état à l'utilisateur qu'il existe une application capable de gérer le lien. Le champ d'application L'API Extensions permet d'étendre le champ d'application de la PWA afin que les origines sont traitées comme des liens couverts.

Implémentation

La mise en œuvre des extensions de champ d'application nécessite d'établir la relation entre les l'origine principale et les origines associées.

Déclarer la liste des origines associées

Ajoutez un membre du fichier manifeste d'application Web scope_extensions à l'origine principale de la PWA pour permettre à l’application web d’étendre leur 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 /.well-known/web-app-origin-association. Ce fichier doit être nommée web-app-origin-association et être diffusée à cet emplacement exact, comme 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émo

La démonstration se compose de deux sites:

Main PWA: la PWA réelle déclare la liste des origines associées via le membre scope_extensions ; dans son fichier manifeste d'application Web.
Origine dans le champ d'application étendu: une en dehors du champ d'application de la PWA principale, mais qui y est associée après avoir été répertoriée par la PWA principale en tant qu'origine associée et confirmer la relation via son fichier web-app-origin-association.

Pour effectuer les tests suivants, vous devez activer Indicateur about://flags/#enable-desktop-pwas-scope-extensions (disponible sur Chrome v115 et versions ultérieures).

Tester la navigation multi-origine

Comme condition préalable à ces tests, ouvrez le fichier PWA principale dans un navigateur, installez-la en tant que PWA et ouvrez-le pour l'exécuter en mode autonome. La PWA contient des liens vers origine dans un champ d'application étendu et vers une le point de départ n'est pas inclus dans le champ d'application élargi.

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

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

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

Cliquez sur le lien vers l'origine non concernée par le champ d'application étendu. dans la PWA plein écran.
Par conséquent, la navigation se produit et la barre "Hors du champ d'application" s'affiche.

Fenêtre principale de la PWA avec la barre "Hors du champ d'application" après avoir cliqué sur le lien "Hors du champ d'application"

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

Navigation multi-origine avec extensions de champ d'application (dans le champ d'application étendu)

Revenez à la page d'accueil de la PWA.
Cliquez sur le lien vers L'origine n'est pas dans le champ d'application élargi.
Par défaut, une requête « hors du champ d'application » doit s'afficher, mais en raison du champ d'application Association d'extensions, ce n'est pas le cas.

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

"Hors du champ d'application" barre non affichée dans la navigation multi-origines après l'association de l'origine avec les extensions de champ d'application.

Tester la capture des liens multi-origines

Ouvrez et installez la PWA principale dans un Appareil ChromeOS.
Cliquez sur le lien suivant: origine associée.
Le lien s'ouvre dans un nouvel onglet du navigateur et un message 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. le bouton "Ouvrir dans l'application" icône permettant à l'utilisateur d'activer l'association automatique la capture.

Phase d'évaluation

Si vous souhaitez tester cette API dans votre application sur le terrain avec de vraies vous pouvez utiliser 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 associé à votre domaine. Vous pouvez ensuite déployer votre application attendez-vous à ce qu'elle fonctionne dans un navigateur compatible avec la fonctionnalité que vous testez (dans ce elle est disponible dans Chrome de 121 à 126). Pour obtenir votre propre jeton exécuter une phase d'évaluation, remplissez le formulaire de demande.

Commentaires

L'équipe Chrome souhaiterait connaître votre avis sur l'utilité de cette API. À à faire évoluer cette API en donnant son avis sur son utilité de nouveaux cas d'utilisation non abordés dans la version actuelle, ouvrez une Problème sur GitHub

Ressources supplémentaires

Remerciements

Nous remercions tout particulièrement l'équipe qui a développé cette API. Extensions de champ d'application a été spécifié par Alan Cutter, 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.