Ab Chrome 122 können Sie den Ursprungstest für das App-Manifestmitglied scope_extensions abonnieren. Dadurch können Websites, die mehrere Subdomains und Top-Level-Domains steuern, als eine einzelne Web-App präsentiert werden. In diesem Dokument wird erläutert, warum das Chrome-Team diese Funktion einführt und wann Sie sie verwenden sollten.
Überblick
Einige Webanwendungen haben mehrere Ursprünge, z. B. example.com als Haupt-App und dann space_1.example.com, ..., space_n.example.com, manchmal in Kombination mit special-example.com als Unterfunktionen unter dem Dach der Haupt-App. Diese Art von Websitearchitektur hat im Kontext progressiver Web-Apps Auswirkungen.
Zu den Einschränkungen gehört es, dass Sie Service Worker, jegliche Art von Gerät, lokalen Speicher und Berechtigungen nicht ursprungsübergreifend freigeben können. Außerdem wird bei der ursprungsübergreifenden Navigation in einer eigenständigen PWA eine Fenster-UI („out of scope“-Leiste) angezeigt, die darauf hinweist, dass der Nutzer die PWA verlassen hat. In den Artikeln Progressive Web-Apps auf Multi-Ursprungswebsites und Mehrere progressive Web-Apps auf derselben Domain erstellen erfahren Sie, wie Sie einige dieser Probleme umgehen können.
Mit der Scope Extensions API können Webanwendungen einige der Herausforderungen meistern, die die Same-Origin-Policy bei dieser Art von Website-Architektur mit sich bringt. Webanwendungen können ihren Bereich auf andere Ursprünge erweitern und so für eine einheitliche Nutzung sorgen, sofern eine Übereinstimmung zwischen dem primären Ursprung der Webanwendung und den zugehörigen Ursprüngen besteht.
Ziele
Das Hauptziel der Scope Extensions API ist es, dass sich Websites, die mehrere Subdomains und Top-Level-Domains steuern, bei der Webanwendungs-UI und der Linkerfassung als eine zusammenhängende Webanwendung verhalten sollen. Beispielsweise lässt sich die example.com-Website, die example.com.co.uk und support.example.com umfasst, so weit wie möglich wie eine einzelne Webanwendung verhalten.
Durch Bereichserweiterungen können sich PWAs mit mehreren Ursprungs als zusammenhängende Webanwendung verhalten, wenn es um die Benutzeroberfläche von Web-Apps geht.
In der Praxis ergeben sich daraus zwei spezifischere Ziele:
- Ursprungsübergreifende Navigation:Ermögliche Nutzern, zwischen verknüpften Ursprüngen zu wechseln, ohne die Nutzererfahrung zu beeinträchtigen. Dazu wird der Nutzer in der Fenster-UI darüber informiert, dass er die PWA verlässt.
- Cross-origin-Linkerfassung:Webanwendungen können die Navigation der Nutzer zu Websites erfassen, mit denen sie verknüpft sind.
Ursprungsübergreifende Navigation im Umfang
Wenn Nutzer in einer eigenständigen PWA zwischen verschiedenen Ursprüngen wechseln, wird ihnen standardmäßig ein Fenster mit dem Hinweis angezeigt, dass sie die PWA verlassen. In Chrome besteht diese UI aus einer Leiste, die „außerhalb des Geltungsbereichs“ liegt, die die URL des neuen Ursprungs enthält. Dies stört die Nutzererfahrung, da Nutzer erwarten, weiterhin im selben Anwendungskontext navigieren zu müssen, nehmen aber möglicherweise wahr, dass sie aus diesem Anwendungskontext genommen werden.
Leiste „Ausgeschlossen“ wird in Chrome angezeigt, wenn Nutzer in einer eigenständigen PWA zwischen verschiedenen Ursprüngen wechseln.
Mit Bereichserweiterungen wird die Fenster-UI nicht angezeigt, wenn Nutzer einen der verknüpften Ursprünge aufrufen. So wird die PWA als einheitliche Darstellung dargestellt.
Ursprungsübergreifende Linkerfassung
Linkerfassung bezieht sich auf die Fähigkeit einer Anwendung, Links innerhalb ihres Geltungsbereichs zu erfassen. Wie dies implementiert wird, unterscheidet sich je nach Browser und Betriebssystem. In Chrome unter ChromeOS wird beispielsweise bei Links im Bereich einer installierten PWA standardmäßig ein Browsertab geöffnet. In der Adressleiste wird darauf hingewiesen, dass eine App diese Links verarbeiten kann. Nutzer können dann die automatische Linkerfassung aktivieren.
Fragment der Chrome-Adressleiste für einen Tab in ChromeOS. Es zeigt einen visuellen Hinweis darauf, dass der Link von einer PWA verarbeitet werden kann, und die Option, sich diese Entscheidung zu merken.
Wenn ein Nutzer auf einen Link klickt, der außerhalb des Geltungsbereichs der PWA liegt (einschließlich Links zu Subdomains oder Domains der obersten Ebene), wird er nicht als zu dieser PWA gehörig erkannt. Links werden beispielsweise in einem Browsertab geöffnet, ohne dass der Nutzer darauf hinweist, dass eine App vorhanden ist, die den Link verarbeiten kann. Mit der Scope Extensions API kann der Bereich der PWA erweitert werden, sodass die zugehörigen Ursprünge als Links behandelt werden, die unter die Vorgaben fallen.
Implementierung
Zum Implementieren von Bereichserweiterungen muss die Beziehung zwischen dem Hauptursprung und den verknüpften Ursprüngen hergestellt werden.
Liste der zugehörigen Ursprünge deklarieren
Fügen Sie der PWA-Hauptquelle ein Manifest-Mitglied der Web-App scope_extensions hinzu, damit die Web-App ihren Bereich auf andere Ursprünge erweitern kann.
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 Web-App mithilfe einer /.well-known/web-app-origin-association-Konfigurationsdatei. Die Datei muss den Namen web-app-origin-association haben und an diesem genauen Speicherort bereitgestellt werden, da sie ein bekannter URI ist.
/.well-known/web-app-origin-association (verknüpfte Quelle)
{
"web_apps": [{ "web_app_identity": "https://example.com" }]
}
Demo
Die Demo besteht aus zwei Websites:
- Haupt-PWA: Die tatsächliche PWA, die die Liste der verknüpften Ursprünge über das
scope_extensions-Mitglied im Web App-Manifest deklariert. - Ursprung im erweiterten Bereich: Ein Ursprung, der nicht in den Bereich der Haupt-PWA fällt, dieser aber zugeordnet ist, nachdem er von der Haupt-PWA als verknüpfter Ursprung aufgelistet und die Beziehung durch die
web-app-origin-association-Datei bestätigt wurde.
Für die folgenden Tests müssen Sie das Flag about://flags/#enable-desktop-pwas-scope-extensions aktivieren, das ab Chrome-Version 115 verfügbar ist.
Ursprungsübergreifende Navigation testen
Öffnen Sie als Voraussetzung für diese Tests die Haupt-PWA in einem Browser, installieren Sie sie als PWA und öffnen Sie sie, um sie im eigenständigen Modus auszuführen. Die PWA enthält Links zu einem Ursprung im erweiterten Bereich und zu einem Ursprung außerhalb des erweiterten Bereichs.
Demo-PWA mit Links zum Ursprung im erweiterten Bereich und Ursprung nicht im erweiterten Bereich.
Standardmäßige ursprungsübergreifende Navigation (nicht im erweiterten Bereich)
- Klicken Sie innerhalb der Vollbild-PWA auf den Link zum Ursprung nicht im erweiterten Bereich.
- Daraufhin erfolgt die Navigation und die Leiste außerhalb des Geltungsbereichs wird angezeigt.
Leiste „Außerhalb des Bereichs“ wird standardmäßig für eine ursprungsübergreifende Navigation für eine PWA im eigenständigen Modus angezeigt.
Ursprungsübergreifende Navigation mit Bereichserweiterungen (im erweiterten Bereich)
- Gehen Sie zurück zur Startseite der PWA.
- Klicken Sie auf den Link zu Ursprung nicht im erweiterten Bereich.
- Standardmäßig sollte eine Leiste „außerhalb des Kompetenzbereichs“ angezeigt werden, aufgrund der Verknüpfung von Bereichserweiterungen ist dies jedoch nicht der Fall.
Die Leiste „Ausgeschlossen“ wird in der ursprungsübergreifenden Navigation nicht angezeigt, nachdem eine Ursprungsverknüpfung mit Bereichserweiterungen vorgenommen wurde.
Ursprungsübergreifende Linkerfassung testen
- Öffnen und installieren Sie die Haupt-PWA auf einem ChromeOS-Gerät.
- Klicke auf den folgenden Link: Verknüpfter Ursprung.
- Der Link wird in einem neuen Browsertab geöffnet und eine Aufforderung zum Öffnen des Links in der installierten PWA angezeigt.
Wenn Nutzer auf einen Link zu dem mit einer PWA verknüpften Ursprung klicken, wird der Link in einem neuen Tab geöffnet. Außerdem wird das Symbol „In App öffnen“ angezeigt, über das der Nutzer der automatischen Linkerfassung zustimmen kann.
Ursprungstest
Wenn Sie diese API in Ihrer Anwendung mit echten Nutzern in der Anwendung testen möchten, ist dies mit einem Ursprungstest möglich. Mit Ursprungstests können Sie experimentelle Funktionen mit Ihren Nutzern testen. Dazu fordern Sie ein Testtoken an, das mit Ihrer Domain verknüpft ist. Sie können Ihre Anwendung dann bereitstellen und erwarten, dass sie in einem Browser funktioniert, der die von Ihnen getestete Funktion unterstützt. In diesem Fall ist sie in Chrome von 121 bis 126 verfügbar. Füllen Sie das Antragsformular aus, um ein eigenes Token für einen Ursprungstest zu erhalten.
Feedback
Das Chrome-Team freut sich über Feedback zur Nützlichkeit dieser API. Um das Team bei der Weiterentwicklung dieser API mit Feedback zu ihrer Nützlichkeit und neuen Anwendungsfällen zu unterstützen, die in der aktuellen Version nicht behandelt werden, kannst du ein Problem auf GitHub öffnen.
Zusätzliche Ressourcen
- Scope Extensions API – Ursprungstest
- Chrome-Status – Web-App-Bereichserweiterungen
- Erläuterung zu Bereichserweiterungen für Webanwendungen
- Experimentierfreude
- Position der Mozilla-Standards
- Apple-Standardposition
- Chromium-Programmfehler
- Progressive Web-Apps auf Websites mit mehreren Ursprungswebsites
- Mehrere progressive Web-Apps auf derselben Domain erstellen
Danksagungen
Wir danken ganz besonders dem Team, das an der Entwicklung dieser API beteiligt ist. Die Bereichserweiterungen wurden von Alan Cutter und Lu Huang in Zusammenarbeit mit Matt Giuca festgelegt. Die API wurde von Alan Cutter von Google Chrome und Hassan Talat, Kristin Lee und Lu Huang von Microsoft Edge implementiert.