Deze pagina is vertaald door de Cloud Translation API.

Bereikextensies voor webapps

Vanuit Chrome 122 kunt u zich abonneren op de origin-proefversie van het scope_extensions app-manifestlid, waarmee sites die meerdere subdomeinen en topniveaudomeinen beheren, als één web-app kunnen worden gepresenteerd. In dit document wordt uitgelegd waarom het Chrome-team deze functie introduceert en wanneer u deze mogelijk wilt gebruiken.

Demián Renzulli

Thomas Steiner

Overzicht

Sommige webapplicaties hebben meerdere oorsprongen , bijvoorbeeld example.com als de hoofdapp, en vervolgens space_1.example.com , …, space_n.example.com , soms gecombineerd met special-example.com , als subervaringen, allemaal onder het dak van de hoofdapp. Dit type sitearchitectuur heeft implicaties in de context van Progressive Web Apps. Beperkingen zijn onder meer het niet kunnen delen van servicemedewerkers, welk type apparaat dan ook, lokale opslag en machtigingen tussen verschillende oorsprongen. Bovendien toont cross-origin-navigatie in een zelfstandige PWA een venster-UI ("buiten bereik"-balk) die aangeeft dat de gebruiker de PWA-ervaring heeft verlaten. Hoe u een aantal van deze problemen kunt omzeilen, leest u in de artikelen Progressieve webapps op sites met meerdere bronnen en Meerdere progressieve webapps bouwen op hetzelfde domein .

Met de Scope Extensions API kunnen web-apps enkele van de uitdagingen overwinnen die het same-origin-beleid oplegt aan dit type site-architectuur. Hiermee kunnen web-apps hun reikwijdte uitbreiden naar andere oorsprongen om een uniforme ervaring te helpen realiseren, op basis van overeenstemming tussen de primaire oorsprong van de web-app en de bijbehorende oorsprong.

Doelen

Het belangrijkste doel van de Scope Extensions API is om sites die meerdere subdomeinen en topniveaudomeinen beheren, in staat te stellen zich te gedragen als één aaneengesloten web-app als het gaat om de gebruikersinterface van web-apps en het vastleggen van links. Laat de site example.com die zich uitstrekt over example.com.co.uk en support.example.com zich bijvoorbeeld zoveel mogelijk gedragen als één enkele webapplicatie.

Diagram met een hoofd-PWA en bijbehorende subervaringen.

Met Scope Extensions kunnen multi-origin PWA's zich gedragen als een aaneengesloten web-app als het gaat om de gebruikersinterface van de web-app.

In de praktijk vertaalt dit zich in twee specifiekere doelstellingen:

Cross-origin-navigatie: laat gebruikers door gekoppelde oorsprongen navigeren zonder de gebruikerservaring te verstoren door een venster-UI aan te roepen die de gebruiker informeert dat ze zich van de PWA verwijderen.
Cross-origin link vastleggen: Sta web-apps toe gebruikersnavigaties vast te leggen naar sites waarmee ze zijn verbonden.

Cross-originele navigatie binnen het bereik

Wanneer gebruikers in een zelfstandige PWA door de oorsprong navigeren, krijgen ze standaard een venster-UI te zien die aangeeft dat ze zich buiten de PWA-ervaring verplaatsen. In Chrome bestaat deze gebruikersinterface uit een balk 'buiten bereik' die de URL van de nieuwe oorsprong bevat. Dit verstoort de gebruikerservaring, omdat gebruikers verwachten binnen dezelfde applicatiecontext te blijven navigeren, maar het gevoel kunnen hebben dat ze daaruit worden gehaald.

Buiten bereik-balk bovenaan een zelfstandige PWA.

De balk 'Buiten bereik' wordt weergegeven in Chrome wanneer gebruikers door verschillende bronnen navigeren in een zelfstandige PWA.

Met Scope Extensions wordt de venster-UI niet weergegeven wanneer gebruikers naar een van de gekoppelde oorsprongen navigeren, zodat de PWA wordt gepresenteerd als een uniforme ervaring.

Cross-origin link vastleggen

Link Capturing verwijst naar de mogelijkheid van een app om links binnen zijn bereik vast te leggen. De manier waarop dit wordt geïmplementeerd, verschilt per browser en besturingssysteem. In Chrome op ChromeOS openen links in het kader van een geïnstalleerde PWA bijvoorbeeld standaard een browsertabblad met een indicatie in de adresbalk dat er een app is die deze links kan verwerken, waardoor de gebruiker zich kan aanmelden voor automatische koppeling vanaf dat punt vastleggen.

Omnibar-prompt voor een geïnstalleerde PWA.

Fragment van de Chrome-adresbalk voor een tabblad in ChromeOS met een visuele indicatie dat de link kan worden afgehandeld door een PWA en de optie om die beslissing te onthouden.

Als een gebruiker op een link klikt die buiten het bereik van de PWA valt (inclusief links naar subdomeinen of topniveaudomeinen), wordt deze niet herkend als behorend daartoe. Links worden bijvoorbeeld geopend in een browsertabblad zonder enige indicatie voor de gebruiker dat er een app is die de link kan verwerken. Met de Scope Extensions API kan het bereik van de PWA worden uitgebreid, zodat de bijbehorende oorsprongen worden behandeld als koppelingen binnen het bereik.

Implementatie

Voor het doorvoeren van scope-uitbreidingen is het nodig dat de relatie tussen de hoofdoorsprong en de bijbehorende herkomsten wordt vastgelegd.

Declareer de lijst met bijbehorende herkomsten

Voeg een scope_extensions web-app-manifestlid toe aan de hoofd-PWA-oorsprong, zodat de web-app zijn bereik kan uitbreiden naar andere oorsprongen.

Webapp-manifest (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" }
  ]
}

Bevestig associaties

Elk van de vermelde oorsprongen bevestigt de koppeling met de web-app met behulp van een /.well-known/web-app-origin-association configuratiebestand. Dit bestand moet de naam web-app-origin-association krijgen en op deze exacte locatie worden aangeboden, aangezien het een bekende URI is.

/.well-known/web-app-origin-association (geassocieerde oorsprong)

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

Demo

De demo bestaat uit twee sites:

Hoofd-PWA : de daadwerkelijke PWA die de lijst met gekoppelde oorsprongen declareert via het scope_extensions lid in het webapp-manifest .
Oorsprong in uitgebreid bereik : een oorsprong buiten het bereik van de hoofd-PWA, maar eraan gekoppeld nadat deze door de hoofd-PWA is vermeld als een gekoppelde oorsprong en de relatie is bevestigd via het web-app-origin-association .

Om de volgende tests uit te voeren, moet u de vlag about://flags/#enable-desktop-pwas-scope-extensions inschakelen (beschikbaar vanaf Chrome v115 en hoger).

Cross-origin-navigatie testen

Als voorwaarde voor deze tests opent u de hoofd-PWA in een browser, installeert u deze als PWA en opent u deze om deze in de standalone-modus uit te voeren. De PWA bevat koppelingen naar een oorsprong in uitgebreide reikwijdte en naar een oorsprong die niet in uitgebreide reikwijdte valt .

Hoofd-PWA-venster met koppelingen naar het bereik en het uitgebreide bereik.

Demo PWA met links naar oorsprong in uitgebreid bereik en oorsprong niet in uitgebreid bereik.

Standaard cross-origin-navigatie (niet in uitgebreid bereik)

Klik op de link naar de oorsprong die niet in het uitgebreide bereik ligt in de PWA op volledig scherm.
Als gevolg hiervan vindt de navigatie plaats en wordt de balk buiten bereik weergegeven.

Hoofd-PWA-venster met balk buiten bereik nadat u op de link buiten bereik hebt geklikt.

De balk 'Buiten bereik' wordt standaard weergegeven voor cross-origin-navigatie voor een PWA in zelfstandige modus.

Cross-originele navigatie met Scope Extensions (in uitgebreide scope)

Navigeer terug naar de startpagina van de PWA.
Klik op de link naar de oorsprong die niet in het uitgebreide bereik ligt .
Standaard zou een balk "buiten bereik" moeten worden weergegeven, maar vanwege de associatie met Scope-extensies is dit niet het geval.

Hoofd-PWA-venster zonder balk buiten bereik nadat u op de link voor uitgebreid bereik hebt geklikt.

De balk 'Buiten bereik' wordt niet weergegeven in cross-origin-navigatie nadat de herkomstkoppeling is gemaakt met bereikextensies.

Test het vastleggen van cross-origin-links

Open en installeer de hoofd-PWA op een ChromeOS-apparaat.
Klik op de volgende link: geassocieerde herkomst .
De link wordt geopend in een nieuw browsertabblad en er wordt een prompt weergegeven om deze in de geïnstalleerde PWA te openen.

Omnibar-prompt voor een geïnstalleerde PWA met uitgebreide reikwijdte.

Als u op een link naar de bijbehorende oorsprong van een PWA klikt, wordt de link op een nieuw tabblad geopend en wordt een pictogram 'Openen in app' weergegeven waarmee de gebruiker zich kan aanmelden voor het automatisch vastleggen van links.

Oorsprong proef

Als u deze API in uw toepassing in het veld wilt testen met echte gebruikers, kunt u dat doen met een origin-proefversie . Met Origin-proefversies kunt u experimentele functies uitproberen met uw gebruikers door een testtoken te verkrijgen dat aan uw domein is gekoppeld. Vervolgens kunt u uw app implementeren en verwachten dat deze werkt in een browser die de functie ondersteunt die u test (in dit geval is deze beschikbaar in Chrome van 121 tot 126). Om uw eigen token te verkrijgen en een origin-proef uit te voeren, vult u het aanvraagformulier in.

Feedback

Het Chrome-team is op zoek naar feedback over het nut van deze API. Om het team te helpen deze API te laten evolueren met feedback over het nut ervan en nieuwe gebruiksscenario's die niet in de huidige versie worden behandeld, opent u een Issue op GitHub .

Aanvullende bronnen

Dankbetuigingen

Speciale dank aan het team achter de ontwikkeling van deze API. Scope Extensions werd gespecificeerd door Alan Cutter en Lu Huang , met input van Matt Giuca . De API is geïmplementeerd door Alan Cutter van Google Chrome en Hassan Talat , Kristin Lee en Lu Huang van Microsoft Edge.