Diese Seite wurde von der Cloud Translation API übersetzt.

Erweiterungen für Web-App-Bereiche

Ab Chrome 122 können Sie den Ursprungstest für die scope_extensions abonnieren Mitglied des App-Manifests, das Websites zulässt, die mehrere Sub-Domains und Top- Domains als einzelne Web-App dargestellt. In diesem Dokument wird erläutert, warum stellt das Chrome-Team diese Funktion vor. Und wann ihr sie nutzen könnt.

Demián Renzulli

Thomas Steiner

Übersicht

Einige Webanwendungen haben mehrere origins für Beispiel: example.com als Haupt-App und dann space_1.example.com, ..., space_n.example.com, manchmal kombiniert mit special-example.com, wie der App unter dem Dach der Haupt-App. Diese Art von Website Architektur im Kontext von progressiven Web-Apps Auswirkungen hat. Zu den Einschränkungen gehören, dass Service Worker, jeder Gerätetyp, lokalen Speicher und Berechtigungen für verschiedene Quellen. Die ursprungsübergreifende Navigation in In einer eigenständigen PWA wird eine Fenster-UI angezeigt („außerhalb des Scopes“), die darauf hinweist, dass der Nutzer wurde aus der PWA entfernt. Sie erfahren, wie Sie einige der zu diesen Problemen in den Artikeln Progressive Web-Apps auf Websites mit mehreren Quellen und Erstellen mehrerer progressiver Web-Apps auf derselben Domain.

Die Scope Extensions API ermöglicht es Webanwendungen, einige der Herausforderungen zu meistern, die Same-Origin-Richtlinie Websitearchitektur auferlegt. Damit können Web-Apps ihre Scope auf andere Ursprünge ein einheitliches Erlebnis zu schaffen, Primärquelle und die zugehörigen Ursprünge.

Ziele

Das Hauptziel der Scope Extensions API ist es, Websites zuzulassen, mehrere Sub-Domains und Top-Level-Domains als eine zusammenhängende Webanwendung verhalten. für Web-App-Benutzeroberfläche und Linkerfassung. Wenn die Website zum Beispiel example.com, die example.com.co.uk und support.example.com umfassen, verhalten sich wie wie möglich als eine Webanwendung.

Diagramm mit einer Haupt-PWA und den zugehörigen Unterumgebungen

Mithilfe von Bereichserweiterungen können PWAs mit mehreren Quellen sich wie eine zusammenhängende Web-App verhalten, wenn die Benutzeroberfläche von Web-Apps.

In der Praxis bedeutet dies, dass zwei spezifischere Ziele erreicht werden:

Ursprungsübergreifende Navigation:Nutzer können zwischen verknüpften Ursprüngen navigieren ohne die User Experience zu beeinträchtigen, indem die Fenster-UI dass sie die PWA nicht mehr nutzen.
Cross-Origin Link Capture:Webanwendungen dürfen die Navigation der Nutzer zu Websites, mit denen sie in Verbindung stehen.

Ursprungsübergreifende Navigation im Projektumfang

Wenn Nutzer in einer eigenständigen PWA zwischen Ursprüngen wechseln, werden sie standardmäßig zeigt eine Fenster-UI an, die darauf hinweist, dass sie aus der PWA entfernt werden. In Chrome besteht diese Benutzeroberfläche aus einem Leiste mit der URL von den neuen Ursprung. Dies beeinträchtigt die User Experience, da Nutzende weiter innerhalb desselben Anwendungskontexts, aber sie empfinden wenn sie aus ihm herausgenommen werden.

Leiste für den Ausschluss oben in einer eigenständigen PWA.

„Gehört nicht zum Verantwortungsbereich“ Leiste, die in Chrome angezeigt wird, wenn Nutzer zwischen verschiedenen Ursprüngen navigieren in einer eigenständigen PWA.

Mit Bereichserweiterungen wird die Benutzeroberfläche des Fensters nicht angezeigt, wenn Nutzer zu einer verknüpft, damit die PWA als einheitliches Erlebnis präsentiert wird.

Ursprungsübergreifende Linkerfassung

Linkerfassung bezieht sich auf die Fähigkeit einer App, Links innerhalb Umfang. Die Implementierung ist je nach Browser und Betriebssystem unterschiedlich. Systeme. In Chrome unter ChromeOS beispielsweise werden Links im Bereich einer installierten PWA öffnet standardmäßig einen Browsertab mit der Angabe in der Adressleiste, dass gibt es eine App, die diese Links verarbeiten kann, aktivieren Sie ab diesem Zeitpunkt die automatische Linkerfassung.

Omnibar-Aufforderung für eine installierte PWA.

Fragment der Chrome-Adressleiste für einen Tab in ChromeOS mit einer visuellen Anzeige dass der Link von einer PWA verwendet werden kann, und die Option, sich diese Entscheidung zu merken.

Wenn ein Nutzer auf einen Link klickt, der außerhalb des Umfangs der PWA liegt (z. B. Links zu Subdomains oder Top-Level-Domains enthalten, werden sie nicht als zugehörig erkannt. hinzufügen. Links werden z. B. ohne Hinweis in einem Browsertab geöffnet. dass es eine App gibt, die den Link verarbeiten kann. Umfang Mit der Extensions API kann der Bereich der PWA erweitert werden, sodass die zugehörigen Ursprünge werden als Links behandelt, die unter die Vorgaben fallen.

Implementierung

Für die Implementierung von Umfangserweiterungen muss eine Beziehung zwischen den und die zugehörigen Ursprünge.

Liste der verknüpften Ursprünge angeben

Mitglied des Web-App-Manifests vom Typ „scope_extensions“ dem Ursprung des Haupt-PWA hinzufügen für ermöglichen es der Webanwendung, ihren Geltungsbereich auf andere Ursprünge auszudehnen.

Web-App-Manifest (https://beispiel.de)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

Verknüpfungen bestätigen

Jeder der aufgeführten Ursprünge bestätigt die Verknüpfung mit der Webanwendung mithilfe eines Konfigurationsdatei /.well-known/web-app-origin-association. Diese Datei muss den Namen web-app-origin-association haben und an dieser Position ausgeliefert werden, wie es sich um einen bekannten URI handelt.

/.well-known/web-app-origin-association (verknüpfter Ursprung)

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

Demo

Die Demo besteht aus zwei Websites:

Haupt-PWA: Die eigentliche PWA, die Deklariert die Liste der verknüpften Ursprünge über das scope_extensions-Mitglied in seinem Web-App-Manifest.
Ursprung im erweiterten Bereich: eine Ursprung außerhalb des Bereichs der Haupt-PWA, der mit ihr verknüpft ist, nachdem sie aufgeführt wurde von der Haupt-PWA als verknüpften Ursprung festgelegt und die Beziehung bestätigt durch die web-app-origin-association-Datei.

Um die folgenden Tests auszuführen, müssen Sie den Flag about://flags/#enable-desktop-pwas-scope-extensions (verfügbar unter ab Chrome-Version 115).

Ursprungsübergreifende Navigation testen

Als Voraussetzung für diese Tests müssen Sie den Haupt-PWA in einem Browser, installieren Sie sie als PWA und öffnen es, um es im eigenständigen Modus auszuführen. Die PWA enthält Links zu einer Ursprung im erweiterten Geltungsbereich und Ursprung nicht im erweiterten Geltungsbereich.

PWA-Hauptfenster mit Links zum Umfang und zum erweiterten Bereich.

Demo-PWA mit Links zum Ursprung im erweiterten Bereich und Ursprung nicht im erweiterten Bereich Umfang.

Standardübergreifende ursprungsübergreifende Navigation (nicht im erweiterten Bereich)

Klicken Sie auf den Link zum Ursprung nicht im erweiterten Geltungsbereich. in der Vollbild-PWA an.
Daraufhin erfolgt die Navigation und die Leiste für den Ausschluss wird angezeigt.

PWA-Hauptfenster mit Leiste außerhalb des Geltungsbereichs, nachdem auf den entsprechenden Link geklickt wurde.

„Gehört nicht zum Verantwortungsbereich“ Leiste, die standardmäßig für eine ursprungsübergreifende Navigation einer PWA in im eigenständigen Modus.

Ursprungsübergreifende Navigation mit Bereichserweiterungen (im erweiterten Umfang)

Gehen Sie zurück zur Startseite der PWA.
Klicken Sie auf den Link zu Ursprung außerhalb des erweiterten Geltungsbereichs.
Standardmäßig wird ein „außerhalb des Geltungsbereichs“ sollte angezeigt werden, aber aufgrund des Umfangs aber nicht.

PWA-Hauptfenster ohne Leiste außerhalb des Bereichs, nachdem auf den Link für den erweiterten Bereich geklickt wurde.

„Gehört nicht zum Verantwortungsbereich“ Leiste wird nach Verknüpfung des Ursprungs nicht in der ursprungsübergreifenden Navigation angezeigt mit Scope-Erweiterungen erstellt.

Ursprungsübergreifende Linkerfassung testen

Öffnen und installieren Sie die Haupt-PWA in einem ChromeOS-Gerät.
Klicken Sie auf den folgenden Link: Verknüpfte Herkunft.
Der Link wird in einem neuen Browsertab geöffnet und Sie werden aufgefordert, ihn in die installierte PWA.

Omnibar-Prompt für eine installierte PWA mit erweitertem Bereich.

Wenn Sie auf einen Link zum verknüpften Ursprung einer PWA klicken, wird der Link in einem neuen Tab geöffnet und zeigt die Meldung „In App öffnen“ an. Symbol, über das der Nutzer der automatischen Verknüpfung zustimmen kann die Erfassung von Daten.

Ursprungstest

Wenn Sie diese API in Ihrer Anwendung in der Praxis mit echten Menschen testen möchten, können Sie mit einer Ursprungstest verwendet werden. Mit Ursprungstests können Sie experimentelle Funktionen mit Ihren Nutzern ausprobieren, indem Sie ein mit Ihrer Domain verknüpftes Testtoken. Dann können Sie Ihre Anwendung bereitstellen und dass sie in einem Browser funktioniert, der die getestete Funktion unterstützt (in diesem ist sie in Chrome von 121 bis 126 verfügbar). Um Ihr eigenes Token zu erhalten, einen Ursprungstest ausführen, füllen Sie Antragsformular einreichen.

Feedback

Das Chrome-Team bittet um Feedback zur Nützlichkeit dieser API. Bis helfen Sie dem Team, diese API mit Feedback zu ihrer Nützlichkeit und neue Anwendungsfälle, die in der aktuellen Version nicht abgedeckt sind, öffnen Sie ein Problem auf GitHub

Zusätzliche Ressourcen

Danksagungen

Besonderer Dank geht an das Team, das für die Entwicklung dieser API verantwortlich ist. Bereichserweiterungen wurde von Alan Cutter angegeben und Lu Huang, mit Beiträgen von Matt Giuca Die API wurde von Alan Cutter von Google Chrome und Hassan Talat, Kristin Lee und Lu Huang von Microsoft Edge.