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 in Kombination mit special-example.com als Untererlebnisse, alles unter dem Dach der Haupt-App. Diese Art von Websitearchitektur hat Auswirkungen auf den Kontext von progressiven Web-Apps. Zu den Einschränkungen gehört, dass Sie keine Dienstprogramme, Gerätetypen, lokalen Speicher und Berechtigungen zwischen Ursprüngen teilen 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 Linkerfassung 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: Ermöglichen Sie Nutzern, zwischen verknüpften Ursprüngen zu wechseln, ohne die Nutzerfreundlichkeit zu beeinträchtigen. Rufen Sie dazu eine Fenster-Benutzeroberfläche auf, 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 im Projektumfang

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 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 ist je nach Browser und Betriebssystem unterschiedlich. In Chrome unter ChromeOS öffnen beispielsweise Links im Bereich einer installierten PWA standardmäßig einen Browsertab mit einem Hinweis in der Adressleiste, dass es eine App gibt, die diese Links verarbeiten kann. So können Nutzer von diesem Punkt aus die automatische Linkerfassung aktivieren.

Omnibar-Aufforderung für eine installierte PWA

Fragment der Chrome-Adressleiste für einen Tab in ChromeOS mit einem visuellen Hinweis, dass der Link von einer PWA verarbeitet werden kann, und der Option zum Speichern dieser Entscheidung.

Wenn ein Nutzer auf einen Link klickt, der nicht zum Umfang 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 PWA-Hauptursprung ein scope_extensions-Web-App-Manifest-Mitglied hinzu, damit die Web-App ihren Umfang 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 Ort 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, als PWA installieren und ö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 zum Ursprung im erweiterten Bereich und zum Ursprung im erweiterten Bereich.

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. Daraufhin erfolgt die Navigation und die Leiste für den Ausschluss 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 Umfangs“ wird standardmäßig für eine ursprungsübergreifende Navigation einer PWA im eigenständigen Modus angezeigt.

Navigation zwischen Ursprungsorten 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.

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

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 dies mit einem Ursprungstest tun. 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 Ursprungstest 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 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.