Erweiterungen für Web-App-Bereiche

Ab Chrome 122 können Sie die Ursprungstestversion für das scope_extensions-Manifest-App-Element abonnieren. Damit können Websites, die mehrere Subdomains und Top-Level-Domains verwalten, als einzelne Webanwendung präsentiert werden. 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 Störung
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 kombiniert mit special-example.com, als Unterelemente, die alle zur Haupt-App gehören. Diese Art der Websitearchitektur hat Auswirkungen auf progressive Web-Apps. Zu den Einschränkungen gehört, dass Sie keine Dienstprogramme, Gerätetypen, lokalen Speicher und Berechtigungen zwischen Ursprüngen freigeben können. Außerdem wird bei der plattformü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. Wie Sie einige dieser Probleme umgehen können, erfahren Sie in den Artikeln Progressive Web-Apps auf Websites mit mehreren Ursprüngen und Mehrere progressive Web-Apps in derselben Domain erstellen.

Mit der Scope Extensions API können Webanwendungen einige der Herausforderungen bewältigen, die sich durch die Richtlinie zum gleichen Ursprung für diese Art von Websitearchitektur ergeben. So können Web-Apps ihren Umfang auf andere Ursprünge ausweiten, um eine einheitliche Nutzung zu ermöglichen, sofern der primäre Ursprung der Web-App mit den zugehörigen Ursprüngen übereinstimmt.

Ziele

Das Hauptziel der Scope Extensions API besteht darin, Websites, die mehrere Subdomains und Top-Level-Domains verwalten, so zu steuern, dass sie sich in Bezug auf die Web-App-Benutzeroberfläche und die Erfassung von Links wie eine zusammenhängende Webanwendung verhalten. Beispiel: Die Website example.com, die example.com.co.uk und support.example.com umfasst, soll sich möglichst wie eine einzelne Webanwendung verhalten.

Diagramm mit einer Haupt-PWA und zugehörigen Unterelementen

Mit Bereichserweiterungen können PWAs mit mehreren Ursprüngen sich in Bezug auf die Webanwendungs-UI wie eine zusammenhängende Webanwendung verhalten.

In der Praxis bedeutet das zwei spezifischere Ziele:

  • Navigation zwischen Ursprüngen:Nutzer können zwischen verknüpften Ursprüngen wechseln, ohne dass die Nutzerfreundlichkeit beeinträchtigt wird. Dazu wird eine Fenster-Benutzeroberfläche aufgerufen, die den Nutzer darüber informiert, dass er die PWA verlässt.
  • Websiteübergreifende Linkerfassung:Web-Apps können Nutzernavigationen zu Websites erfassen, mit denen sie verknüpft sind.

Ursprungsübergreifende Navigation, die in den Bericht aufgenommen werden kann

Wenn Nutzer in einer eigenständigen PWA zwischen Ursprüngen wechseln, wird ihnen standardmäßig ein Fenster angezeigt, das darauf hinweist, dass sie die PWA verlassen. In Chrome besteht diese Benutzeroberfläche aus einer Leiste mit dem Hinweis „Außerhalb des Geltungsbereichs“, die die URL des neuen Ursprungs enthält. Das beeinträchtigt die Nutzerfreundlichkeit, da Nutzer davon ausgehen, dass sie im selben Anwendungskontext weitersurfen, aber möglicherweise das Gefühl haben, dass sie herausgenommen werden.

Balken „Außerhalb des Zuständigkeitsbereichs“ oben in einer eigenständigen PWA

In Chrome wird die Leiste „Außerhalb des Geltungsbereichs“ 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 verknüpften Ursprünge wechseln. Die PWA wird also als einheitliche Oberfläche präsentiert.

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

Omnibar-Aufforderung für eine installierte PWA

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

Wenn ein Nutzer auf einen Link klickt, der nicht zum Geltungsbereich der PWA gehört (einschließlich Links zu Subdomains oder Top-Level-Domains), wird er nicht als zu ihr gehörend erkannt. Beispielsweise werden Links 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 können Sie den Umfang der PWA erweitern, sodass die zugehörigen Ursprünge als Links im Geltungsbereich behandelt werden.

Implementierung

Wenn Sie Erweiterungen des Geltungsbereichs implementieren möchten, müssen Sie die Beziehung zwischen der Hauptquelle und den zugehörigen Quellen herstellen.

Liste der verknüpften Ursprünge deklarieren

Fügen Sie dem Haupt-PWA-Ursprung ein scope_extensions-Manifest-Element für Webanwendungen hinzu, damit die Webanwendung ihren Geltungsbereich auf andere Ursprünge ausweiten 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 Webanwendung mithilfe einer /.well-known/web-app-origin-association-Konfigurationsdatei. Diese Datei muss den Namen web-app-origin-association haben und genau an diesem Speicherort bereitgestellt werden, da 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:

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

Ursprungsübergreifende Navigation testen

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

Hauptfenster der PWA mit Links mit und ohne erweiterten Umfang.

Demo-PWA mit Links zu einem Ursprung im erweiterten Umfang und einem Ursprung, der nicht zum erweiterten Umfang gehört.

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

  1. Klicken Sie in der Vollbild-PWA auf den Link zum Ursprung, der nicht zum erweiterten Umfang gehört.
  2. Die Navigation wird ausgeführt und die Leiste „Außerhalb des Zuständigkeitsbereichs“ wird angezeigt.

Hauptfenster der PWA mit der Leiste „Außerhalb des Zuständigkeitsbereichs“, nachdem auf den Link „Außerhalb des Zuständigkeitsbereichs“ geklickt wurde.

Die Leiste „Außerhalb des Gültigkeitsbereichs“, die standardmäßig für eine plattformübergreifende Navigation für eine PWA im eigenständigen Modus angezeigt wird.

Zwischen-Ursprungs-Navigation mit Bereichserweiterungen (im erweiterten Bereich)

  1. Kehren Sie zur Startseite der PWA zurück.
  2. Klicken Sie auf den Link zum Ursprung, der nicht zum erweiterten Umfang gehört.
  3. Standardmäßig sollte eine Leiste mit dem Hinweis „Außerhalb des Geltungsbereichs“ angezeigt werden. Aufgrund der Verknüpfung mit dem Geltungsbereich ist das jedoch nicht der Fall.

Hauptfenster der PWA ohne Balken „Außerhalb des Geltungsbereichs“ nach dem Klicken auf den Link zum erweiterten Geltungsbereich

Die Leiste „Außerhalb des Gültigkeitsbereichs“ wird bei der plattformübergreifenden Navigation nicht angezeigt, nachdem eine Ursprungsverknüpfung mit Bereichserweiterungen hergestellt wurde.

  1. Öffnen und installieren Sie die Haupt-PWA auf einem ChromeOS-Gerät.
  2. Klicken Sie auf den folgenden Link: associated origin.
  3. Der Link wird in einem neuen Browsertab geöffnet und Sie werden aufgefordert, ihn in der installierten PWA zu öffnen.

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

Wenn Sie auf einen Link zum verknüpften Ursprung einer PWA klicken, wird der Link in einem neuen Tab geöffnet und das Symbol „In App öffnen“ wird angezeigt. Damit kann der Nutzer die automatische Linkerfassung aktivieren.

Ursprungstest

Wenn Sie diese API in Ihrer Anwendung mit echten Nutzern testen möchten, können Sie einen Ursprungstest durchführen. Mit Origin Trials können Sie experimentelle Funktionen mit Ihren Nutzern testen. Dazu müssen Sie ein Testtoken abrufen, das mit Ihrer Domain verknüpft ist. Sie können Ihre App dann bereitstellen und davon ausgehen, dass sie in einem Browser funktioniert, der die getestete Funktion unterstützt. In diesem Fall ist sie in Chrome 121 bis 126 verfügbar. Wenn Sie ein eigenes Token für einen Test der Herkunft erhalten möchten, 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 mit Feedback zur Nützlichkeit und neuen Anwendungsfällen, die in der aktuellen Version nicht abgedeckt sind, weiterzuentwickeln, können Sie ein Problem auf GitHub erstellen.

Zusätzliche Ressourcen

Danksagungen

Ein besonderer Dank geht an das Team, das diese API entwickelt hat. Scope Extensions wurde von Alan Cutter und Lu Huang mit Input von Matt Giuca entwickelt. Die API wurde von Alan Cutter von Google Chrome und Hassan Talat, Kristin Lee und Lu Huang von Microsoft Edge implementiert.