Deze pagina is vertaald door de Cloud Translation API.

Bereikextensies voor webapps

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

Demián Renzulli

Thomas Steiner

Overzicht

Sommige webapplicaties hebben meerdere oorsprongen , bijvoorbeeld example.com als 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 andere het niet kunnen delen van serviceworkers, elk type apparaat, lokale opslag en machtigingen tussen oorsprongen. Bovendien toont cross-origin navigatie in een standalone PWA een vensterinterface ("out of scope"-balk) die aangeeft dat de gebruiker de PWA-ervaring heeft verlaten. U kunt leren hoe u enkele van deze problemen kunt omzeilen in de artikelen Progressive Web Apps in multi-origin sites en Building multiple Progressive Web Apps on the same domain .

Met de Scope Extensions API kunnen webapps een aantal uitdagingen overwinnen die het beleid van dezelfde oorsprong met zich meebrengt voor dit type sitearchitectuur. Hiermee kunnen webapps hun scope uitbreiden naar andere oorsprongen om een uniforme ervaring te creëren, mits er overeenstemming is tussen de primaire oorsprong van de webapp en de bijbehorende oorsprongen.

Doelen

Het hoofddoel van de Scope Extensions API is om sites die meerdere subdomeinen en topleveldomeinen beheren, zich te laten gedragen als één aaneengesloten webapp wat betreft de gebruikersinterface en linkcapturing van de webapp. Zo kan de site example.com , die example.com.co.uk en support.example.com omvat, zich bijvoorbeeld zoveel mogelijk gedragen als één webapplicatie.

Diagram van een hoofd-PWA en bijbehorende subervaringen.

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

In de praktijk komt dit neer op twee specifiekere doelen:

Navigatie tussen oorsprongen: Hiermee kunnen gebruikers navigeren tussen bijbehorende oorsprongen zonder de gebruikerservaring te verstoren. Dit gebeurt door de vensterinterface aan te roepen die de gebruiker informeert dat hij of zij de PWA verlaat.
Vastleggen van koppelingen tussen verschillende oorsprongen: hiermee kunnen web-apps de navigatie van gebruikers naar sites waaraan ze zijn gelieerd, vastleggen.

Cross-origin in-scope navigatie

Wanneer gebruikers in een standalone PWA tussen bronnen navigeren, krijgen ze standaard een vensterinterface te zien die aangeeft dat ze de PWA-ervaring verlaten. In Chrome bestaat deze interface uit een balk 'buiten bereik' met de URL van de nieuwe bron. Dit verstoort de gebruikerservaring, omdat gebruikers verwachten binnen dezelfde applicatiecontext te blijven navigeren, maar het kan lijken alsof ze eruit worden gehaald.

Balk buiten bereik 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 vensterinterface niet weergegeven wanneer gebruikers naar een van de bijbehorende oorsprongen navigeren. Zo wordt de PWA gepresenteerd als één uniforme ervaring.

Vastleggen van koppelingen tussen verschillende oorsprongen

Link Capture 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 bijvoorbeeld openen links binnen het bereik van een geïnstalleerde PWA standaard een browsertabblad met een indicatie in de adresbalk dat er een app is die deze links kan verwerken, zodat de gebruiker zich vanaf dat punt kan aanmelden voor automatische link capture.

Omnibar-prompt voor een geïnstalleerde PWA.

Fragment van de adresbalk van Chrome voor een tabblad in ChromeOS met een visuele indicatie dat de koppeling kan worden verwerkt 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 topleveldomeinen), wordt deze niet herkend als behorend tot het betreffende domein. Links worden bijvoorbeeld geopend in een browsertabblad zonder dat de gebruiker weet 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 bronnen worden behandeld als links binnen het bereik.

Uitvoering

Voor het implementeren van scope-uitbreidingen moet de relatie tussen de hoofdoorsprong en de bijbehorende oorsprongen worden vastgesteld.

Geef de lijst met bijbehorende oorsprongen op

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

Web-app-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 webapp met behulp van een configuratiebestand /.well-known/web-app-origin-association . Dit bestand moet de naam web-app-origin-association hebben en op deze exacte locatie worden weergegeven, aangezien het een bekende URI is.

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

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

Demonstratie

De demo bestaat uit twee sites:

Hoofd-PWA : de daadwerkelijke PWA die de lijst met bijbehorende oorsprongen declareert via het scope_extensions lid in het web-appmanifest .
Oorsprong in uitgebreide scope : een oorsprong buiten de scope van de hoofd-PWA, maar er wel mee geassocieerd nadat deze door de hoofd-PWA is vermeld als geassocieerde oorsprong en de relatie is bevestigd via het bestand 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).

Test cross-origin navigatie

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

Hoofd PWA-venster met koppelingen binnen en buiten het bereik.

Demo PWA met koppelingen naar oorsprong in uitgebreide scope en oorsprong niet in uitgebreide scope.

Standaard navigatie tussen oorsprongen (niet in uitgebreide scope)

Klik op de link naar de oorsprong die niet in het uitgebreide bereik van de PWA op volledig scherm staat.
Hierdoor vindt de navigatie plaats en wordt de balk buiten het bereik weergegeven.

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

De balk 'Buiten bereik' wordt standaard weergegeven voor navigatie tussen oorsprongen voor een PWA in standalone-modus.

Cross-origin 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 staat .
Standaard zou er een 'buiten bereik'-balk moeten worden weergegeven, maar vanwege de Scope Extensions-koppeling is dit niet het geval.

Hoofd PWA-venster zonder balk buiten bereik na het klikken op de koppeling voor uitgebreid bereik.

De balk 'Buiten bereik' wordt niet weergegeven in navigatie tussen oorsprongen nadat de oorsprongskoppeling is gemaakt met Scope Extensions.

Test cross-origin link capture

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

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

Wanneer u op een link naar de bijbehorende oorsprong van een PWA klikt, wordt de link in een nieuw tabblad geopend en wordt het pictogram 'Openen in app' weergegeven, zodat de gebruiker kan aangeven of de link automatisch moet worden vastgelegd.

Oorsprongsproef

Als je deze API in je applicatie in de praktijk wilt testen met echte gebruikers, kun je dat doen met een Origin-proefversie . Met Origin-proefversies kun je experimentele functies met je gebruikers uitproberen door een testtoken te verkrijgen die gekoppeld is aan je domein. Je kunt je app vervolgens implementeren en verwachten dat deze werkt in een browser die de functie die je test ondersteunt (in dit geval is deze beschikbaar in Chrome van 121 tot en met 126). Om je eigen token te verkrijgen voor een Origin-proefversie, vul je 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 verder te ontwikkelen, kunt u feedback geven over het nut ervan en nieuwe use cases die niet in de huidige versie worden behandeld. Open een issue op GitHub .

Aanvullende bronnen

Dankbetuigingen

Speciale dank aan het team achter de ontwikkeling van deze API. Scope Extensions is 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.