Erweiterungen für Web-App-Bereiche

Ab Chrome 122 können Sie sich für den Ursprungstest für das scope_extensions-App-Manifest-Element registrieren, mit dem Websites, die mehrere Subdomains und Top-Level-Domains steuern, als einzelne Web-App präsentiert werden können. In diesem Dokument wird erläutert, warum das Chrome-Team diese Funktion einführt und wann Sie sie verwenden sollten.

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

Übersicht

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 untergeordnete Funktionen, die alle unter dem Dach der Haupt-App laufen. Diese Art von Websitearchitektur hat Auswirkungen im Kontext von Progressive Web-Apps. Einschränkungen sind unter anderem, dass Service Worker, Gerätetypen, lokaler Speicher und Berechtigungen nicht ursprungsübergreifend freigegeben werden 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 in Multi-Origin-Websites und Mehrere progressive Web-Apps in derselben Domain erstellen erfahren Sie, wie Sie einige dieser Probleme umgehen können.

Mit der Scope Extensions API können Web-Apps einige der Herausforderungen meistern, die die Same-Origin-Policy für diese Art von Websitearchitektur mit sich bringt. Damit können Web-Apps ihren Geltungsbereich auf andere Ursprünge ausweiten, um eine einheitliche Nutzererfahrung zu ermöglichen, sofern der primäre Ursprung der Web-App und die zugehörigen Ursprünge sich einig sind.

Ziele

Das Hauptziel der Scope Extensions API besteht darin, Websites, die mehrere Subdomains und Top-Level-Domains verwalten, die Möglichkeit zu geben, sich in Bezug auf die Web-App-UI und das Erfassen von Links wie eine zusammenhängende Web-App zu verhalten. Beispielsweise soll die Website example.com, die sich über example.com.co.uk und support.example.com erstreckt, sich möglichst wie eine einzelne Webanwendung verhalten.

Diagramm mit einer Haupt-PWA und zugehörigen Unterfunktionen.

Mit Scope Extensions können PWAs mit mehreren Ursprüngen sich in Bezug auf die Benutzeroberfläche der Web-App wie eine zusammenhängende Web-App verhalten.

In der Praxis bedeutet das zwei konkretere Ziele:

  • Cross-Origin-Navigation:Nutzer können zwischen verknüpften Ursprüngen wechseln, ohne dass die Nutzerfreundlichkeit beeinträchtigt wird. Dazu wird eine Fenster-UI aufgerufen, die den Nutzer darüber informiert, dass er die PWA verlässt.
  • Erfassung von Links zwischen verschiedenen Quellen:Web-Apps können Nutzeraktionen auf Websites erfassen, mit denen sie verknüpft sind.

Ursprungsübergreifende Navigation in Berichte aufnehmen

Wenn Nutzer in einer eigenständigen PWA zwischen verschiedenen Ursprüngen wechseln, wird standardmäßig eine Fenster-UI angezeigt, die darauf hinweist, dass sie die PWA verlassen. In Chrome besteht diese Benutzeroberfläche aus einer Leiste „Nicht im Umfang enthalten“, die die URL des neuen Ursprungs enthält. Das kann die Nutzererfahrung beeinträchtigen, da Nutzer erwarten, dass sie innerhalb desselben Anwendungskontexts navigieren können. Sie könnten jedoch den Eindruck haben, dass sie aus dem Kontext herausgenommen werden.

Die Leiste „Außerhalb des Bereichs“ oben in einer eigenständigen PWA.

In Chrome wird die Leiste „Nicht im Umfang enthalten“ angezeigt, wenn Nutzer in einer eigenständigen PWA zwischen verschiedenen Ursprüngen wechseln.

Mit Bereichserweiterungen wird die Fenster-UI nicht angezeigt, wenn Nutzer zu einem der zugehörigen Ursprünge navigieren. Die PWA wird also als einheitliche Anwendung präsentiert.

Das Erfassen von Links bezieht sich auf die Fähigkeit einer App, Links innerhalb ihres Bereichs zu erfassen. Die Implementierung variiert je nach Browser und Betriebssystem. In Chrome unter ChromeOS werden Links im Bereich einer installierten PWA standardmäßig in einem Browser-Tab geöffnet. In der Adressleiste wird angezeigt, dass es eine App gibt, die diese Links verarbeiten kann. Der Nutzer kann dann die automatische Erfassung von Links aktivieren.

Omnibox-Aufforderung für eine installierte PWA.

Ausschnitt der Chrome-Adressleiste für einen Tab in ChromeOS mit einem visuellen Hinweis darauf, dass der Link von einer PWA verarbeitet werden kann, und der Option, diese Entscheidung zu speichern.

Wenn ein Nutzer auf einen Link klickt, der außerhalb des Geltungsbereichs der PWA liegt (einschließlich Links zu Subdomains oder Top-Level-Domains), wird er nicht als zur PWA gehörig erkannt. Links werden beispielsweise in einem Browsertab geöffnet, ohne dass der Nutzer darauf hingewiesen wird, dass es eine App gibt, die den Link verarbeiten kann. Mit der Scope Extensions API lässt sich der Bereich der PWA erweitern, sodass die zugehörigen Ursprünge als Links im Bereich behandelt werden.

Implementierung

Für die Implementierung von Bereichserweiterungen muss die Beziehung zwischen dem Hauptursprung und den zugehörigen Ursprüngen hergestellt werden.

Liste der zugehörigen Ursprünge deklarieren

Fügen Sie dem Hauptursprung der PWA ein scope_extensions-Web-App-Manifestelement hinzu, damit die Web-App ihren Bereich auf andere Ursprünge ausweiten kann.

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" }
  ]
}

Verknüpfungen bestätigen

Jeder der aufgeführten Ursprünge bestätigt die Zuordnung zur Web-App mithilfe einer /.well-known/web-app-origin-association-Konfigurationsdatei. Diese Datei muss den Namen web-app-origin-association haben und an diesem Speicherort bereitgestellt werden, da es sich um einen Well-Known-URI handelt.

/.well-known/web-app-origin-association (zugeordneter Ursprung)

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

Demo

Die Demo besteht aus zwei Websites:

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

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 Standalone-Modus auszuführen. Die PWA enthält Links zu einem Ursprung mit erweitertem Umfang und zu einem Ursprung ohne erweiterten Umfang.

Haupt-PWA-Fenster mit Links für den eingeschränkten und erweiterten Bereich.

Demo-PWA mit Links zu Ursprüngen im erweiterten Bereich und Ursprüngen, die nicht im erweiterten Bereich enthalten sind.

Standardmäßige ursprungsübergreifende Navigation (nicht im erweiterten Umfang)

  1. Klicken Sie in der Vollbild-PWA auf den Link für Ursprung nicht im erweiterten Bereich.
  2. Die Navigation wird ausgeführt und die Leiste „Außerhalb des Geltungsbereichs“ wird angezeigt.

Haupt-PWA-Fenster mit der Leiste „Nicht abgedeckt“, nachdem auf den Link „Nicht abgedeckt“ geklickt wurde.

Die Leiste „Nicht im Umfang enthalten“ wird standardmäßig für eine ursprungsübergreifende Navigation für eine PWA im Standalone-Modus angezeigt.

Cross-Origin-Navigation mit Scope Extensions (erweiterter Umfang)

  1. Kehren Sie zur Startseite der PWA zurück.
  2. Klicken Sie auf den Link zum Ursprung, der nicht im erweiterten Bereich enthalten ist.
  3. Standardmäßig sollte ein Balken für „Außerhalb des Bereichs“ angezeigt werden. Aufgrund der Zuordnung von Bereichserweiterungen ist dies jedoch nicht der Fall.

Haupt-PWA-Fenster ohne die Leiste „Nicht im Umfang enthalten“, nachdem auf den Link für den erweiterten Umfang geklickt wurde.

Die Leiste „Nicht im Umfang enthalten“ wird bei der Navigation zwischen Ursprüngen nicht angezeigt, nachdem eine Ursprungszuordnung mit Scope Extensions erfolgt ist.

  1. Öffnen und installieren Sie die Haupt-PWA auf einem ChromeOS-Gerät.
  2. Klicken Sie auf den folgenden Link: zugeordneter Ursprung.
  3. Der Link wird in einem neuen Browsertab geöffnet und es wird eine Aufforderung angezeigt, ihn in der installierten PWA zu öffnen.

Omnibox-Aufforderung für eine installierte PWA mit erweitertem Umfang.

Wenn Sie auf einen Link zum zugehörigen Ursprung einer PWA klicken, wird der Link in einem neuen Tab geöffnet und das Symbol „In App öffnen“ angezeigt. Nutzer können dann die automatische Erfassung von Links aktivieren.

Ursprungstest

Wenn Sie diese API in Ihrer Anwendung mit echten Nutzern testen möchten, können Sie dies mit einem Origin-Trial tun. Mit Origin Trials können Sie experimentelle Funktionen mit Ihren Nutzern testen, indem Sie ein Testtoken erhalten, das mit Ihrer Domain verknüpft ist. Anschließend können Sie Ihre App bereitstellen und davon ausgehen, dass sie in einem Browser funktioniert, der die Funktion unterstützt, die Sie testen (in diesem Fall ist sie in Chrome 121 bis 126 verfügbar). Wenn Sie ein eigenes Token für einen Origin Trial benötigen, füllen Sie das Antragsformular aus.

Feedback

Das Chrome-Team freut sich über Feedback zur Nützlichkeit dieser API. Wenn Sie dem Team helfen möchten, diese API weiterzuentwickeln, indem Sie Feedback zur Nützlichkeit der API und zu neuen Anwendungsfällen geben, die in der aktuellen Version nicht abgedeckt sind, erstellen Sie ein Problem auf GitHub.

Zusätzliche Ressourcen

Danksagungen

Ein besonderer Dank gilt dem Team, das diese API entwickelt hat. Die Erweiterungen für den Bereich wurden von Alan Cutter und Lu Huang mit Beiträgen von Matt Giuca spezifiziert. Die API wurde von Alan Cutter von Google Chrome und Hassan Talat, Kristin Lee und Lu Huang von Microsoft Edge implementiert.