Bereikextensies voor webapps

Vanaf Chrome 122 kun je je abonneren op de Origin-proefversie van het app-manifestlid ` scope_extensions Hiermee kunnen websites die meerdere subdomeinen en topdomeinen beheren, als één web-app worden gepresenteerd. Dit document legt uit waarom het Chrome-team deze functie introduceert en wanneer je deze mogelijk wilt gebruiken.

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

Overzicht

Sommige webapplicaties hebben meerdere origins , bijvoorbeeld example.com als de hoofdapp, en vervolgens space_1.example.com , …, space_n.example.com , soms gecombineerd met special-example.com , als sub-ervaringen, allemaal onder de paraplu van de hoofdapp. Dit type site-architectuur heeft implicaties in de context van Progressive Web Apps (PWA's). Beperkingen zijn onder andere het niet kunnen delen van service workers, apparaten, lokale opslag en machtigingen tussen origins. Bovendien toont navigatie tussen origins in een standalone PWA een venster-UI-balk ("out of scope") die aangeeft dat de gebruiker de PWA-ervaring heeft verlaten. U kunt leren hoe u sommige van deze problemen kunt omzeilen in de artikelen Progressive Web Apps in multi-origin sites en Meerdere Progressive Web Apps bouwen op hetzelfde domein .

De Scope Extensions API stelt webapplicaties in staat om een ​​aantal uitdagingen te overwinnen die het same-origin-beleid met zich meebrengt voor dit type site-architectuur. Hiermee kunnen webapplicaties hun bereik uitbreiden naar andere origins om een ​​uniforme gebruikerservaring te creëren, mits er overeenstemming is tussen de primaire origin van de webapplicatie en de bijbehorende origins.

Doelen

Het belangrijkste doel van de Scope Extensions API is om sites die meerdere subdomeinen en topdomeinen beheren, in staat te stellen zich als één aaneengesloten webapplicatie te gedragen wat betreft de gebruikersinterface en het vastleggen van links. Een voorbeeld hiervan is dat de site example.com , die zich uitstrekt over example.com.co.uk en support.example.com zich zoveel mogelijk als één webapplicatie gedraagt.

Diagram dat een hoofd-PWA en de bijbehorende subervaringen weergeeft.

Scope Extensions zorgt ervoor dat PWA's van verschillende oorsprong zich als één aaneengesloten webapplicatie gedragen wat betreft de gebruikersinterface.

In de praktijk vertaalt dit zich in twee meer specifieke doelen:

  • Navigatie tussen verschillende websites: Hiermee kunnen gebruikers tussen gekoppelde websites navigeren zonder de gebruikerservaring te verstoren. Dit kan door middel van een venster met een gebruikersinterface die de gebruiker informeert dat hij of zij de PWA verlaat.
  • Het vastleggen van links tussen verschillende websites: Hiermee kunnen webapplicaties de navigatie van gebruikers naar websites waarmee ze verbonden zijn, vastleggen.

Navigatie binnen het toepassingsgebied die meerdere oorsprongen omvat

Standaard krijgen gebruikers, wanneer ze in een standalone PWA tussen verschillende origins navigeren, een venster te zien dat aangeeft dat ze de PWA-omgeving verlaten. In Chrome bestaat dit venster uit een balk met de tekst "buiten bereik" die de URL van de nieuwe origin bevat. Dit is storend voor de gebruikerservaring, omdat gebruikers verwachten binnen dezelfde applicatiecontext te kunnen blijven navigeren, maar het gevoel kunnen krijgen dat ze eruit worden gehaald.

De balk bovenaan een zelfstandige PWA die buiten het bereik van het scherm valt.

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

Met Scope Extensions wordt de gebruikersinterface van het venster niet weergegeven wanneer gebruikers naar een van de bijbehorende origins navigeren, waardoor de PWA als een uniforme ervaring wordt gepresenteerd.

Linkcapturing verwijst naar het vermogen 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, waardoor de gebruiker vanaf dat moment kan kiezen voor automatische linkcapturing.

De prompt in de omnibar voor een geïnstalleerde PWA.

Fragment van de adresbalk van Chrome voor een tabblad in ChromeOS, met een visuele indicatie dat de link door een PWA kan worden verwerkt 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 topdomeinen), wordt deze link niet herkend als behorend tot de PWA. Links worden bijvoorbeeld geopend in een browsertabblad zonder dat de gebruiker wordt getoond dat er een app is die de link kan verwerken. De Scope Extensions API maakt het mogelijk om het bereik van de PWA uit te breiden, zodat de bijbehorende origins als binnen het bereik vallende links worden behandeld.

Uitvoering

Het implementeren van scope-uitbreidingen vereist het vaststellen van de relatie tussen de hoofdbron en de bijbehorende bronnen.

Geef de lijst met bijbehorende oorsprongen op.

Voeg een scope_extensions web-app manifestlid toe aan de hoofd-PWA-origin om de web-app in staat te stellen zijn bereik uit te breiden naar andere origins.

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 verbanden

Elk van de vermelde origins bevestigt de koppeling met de web-app met behulp van een configuratiebestand /.well-known/web-app-origin-association . Dit bestand moet de naam web-app-origin-association hebben en op exact deze locatie beschikbaar zijn, 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 websites:

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

Test navigatie tussen verschillende oorsprongen

Als voorwaarde voor deze tests moet u de hoofd-PWA in een browser openen, deze installeren als een PWA en openen om deze in de zelfstandige modus uit te voeren. De PWA bevat links naar een oorsprong in de uitgebreide scope en naar een oorsprong die niet in de uitgebreide scope valt .

Hoofdvenster van de PWA met links binnen en buiten het bereik.

Demo-PWA met links naar de oorspronkelijke pagina binnen het uitgebreide bereik en naar de oorspronkelijke pagina buiten het uitgebreide bereik.

Standaard navigatie tussen verschillende oorsprongen (niet in het uitgebreide bereik)

  1. Klik op de link naar de oorsprong die zich niet in het uitgebreide bereik bevindt binnen de PWA op volledig scherm.
  2. Als gevolg hiervan vindt de navigatie plaats en wordt de balk 'buiten bereik' weergegeven.

Hoofdvenster van de PWA met een balk die aangeeft dat het venster buiten het bereik valt, nadat je op de link 'buiten het bereik' hebt geklikt.

De balk "Buiten bereik" wordt standaard weergegeven bij een navigatie vanaf een andere oorsprong voor een PWA in de standalone-modus.

Cross-origin navigatie met Scope Extensions (in uitgebreid bereik)

  1. Ga terug naar de startpagina van de PWA.
  2. Klik op de link naar de oorsprong die zich niet in het uitgebreide bereik bevindt .
  3. Standaard zou er een balk met de melding "buiten bereik" moeten worden weergegeven, maar vanwege de koppeling met bereikuitbreidingen gebeurt dit niet.

Hoofdvenster van de PWA zonder de balk die het bereik uitsluit na het klikken op de link voor het uitbreiden van het bereik.

De balk "Buiten bereik" wordt niet weergegeven in de navigatie tussen verschillende oorsprongen nadat een oorsprongsassociatie is gemaakt met behulp van bereikuitbreidingen.

  1. Open en installeer de hoofd-PWA op een ChromeOS-apparaat.
  2. Klik op de volgende link: bijbehorende oorsprong .
  3. De link wordt geopend in een nieuw browsertabblad en er verschijnt een melding om deze te openen in de geïnstalleerde PWA.

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

Door op een link naar de bijbehorende PWA te klikken, wordt de link in een nieuw tabblad geopend en verschijnt een 'Openen in app'-pictogram waarmee de gebruiker kan aangeven of het automatisch vastleggen van de link is toegestaan.

Oorsprongsproef

Als u deze API in uw applicatie in de praktijk wilt testen met echte gebruikers, kunt u dat doen met een origin trial . Met een origin trial kunt u experimentele functies uitproberen met uw gebruikers door een testtoken te verkrijgen dat aan uw domein is gekoppeld. U kunt uw app vervolgens implementeren en verwachten dat deze werkt in een browser die de functie die u test ondersteunt (in dit geval is deze beschikbaar in Chrome van versie 121 tot en met 126). Om uw eigen token te verkrijgen voor een origin trial, vult u het aanvraagformulier in.

Feedback

Het Chrome-team is op zoek naar feedback over de bruikbaarheid van deze API. Om het team te helpen deze API verder te ontwikkelen met feedback over de bruikbaarheid ervan en nieuwe gebruiksscenario's die niet in de huidige versie zijn opgenomen, kunt u een issue openen 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.