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.
Ü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.
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.
„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.
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.
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.
„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.
„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.
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
- Scope Extensions API – Ursprungstest
- Chrome-Status – Web-App-Bereichserweiterungen
- Erklärung zu Bereichserweiterungen für Webanwendungen
- Absicht zu Experimenten
- Position von Mozilla-Standards
- Apple-Standardposition
- Chromium-Fehler
- Progressive Web-Apps auf Websites mit mehreren Quellen
- Entwicklung mehrerer progressiver Web-Apps in derselben Domain
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.