Veröffentlicht am 19. August 2025
Navigationsverwaltung umfasst die Methoden zum Steuern der Art und Weise, wie eine Progressive Web-App (PWA) die Nutzernavigation verarbeitet. Eine wichtige Komponente ist das Erfassen von Navigationen. Dieser Browserprozess bestimmt, ob durch Klicken auf einen Link die installierte PWA gestartet oder ein neuer Browsertab geöffnet werden soll.
In diesem Leitfaden wird die neue Version der Erfassung von Navigationsvorgängen beschrieben, die ab Chrome 139 verfügbar ist. Das Standardverhalten des Browsers ist zwar für die meisten Fälle geeignet, aber ein besseres Verständnis dieser Verwaltungstechniken und der zugehörigen APIs ist unerlässlich, wenn Sie Ihren Nutzern eine optimale Nutzerfreundlichkeit bieten möchten.
Im Abschnitt Entwicklersteuerelemente erfahren Sie, wie Sie die Navigation anpassen können, um das bestmögliche Startverhalten für Ihre PWA zu erzielen.
Das neue Standardverhalten
Um den Nutzerpräferenzen gerecht zu werden und Probleme zu vermeiden, standardisiert Chrome die Verarbeitung von Links. Bisher war das Verhalten auf den verschiedenen Plattformen nicht einheitlich. Auf Mobilgeräten wurde das Starten installierter Apps in der Regel priorisiert, während Desktopbrowser einen Link zuerst in einem Tab öffneten, bevor signalisiert wurde, dass eine App ihn verarbeiten kann.
Durch den neuen, einheitlichen Ansatz für die Erfassung von Navigationsvorgängen werden Links automatisch in der entsprechenden installierten PWA geöffnet. Links werden nur dann auf einen Browser-Tab zurückgesetzt, wenn die PWA nicht installiert ist oder der Nutzer die Funktion deaktiviert hat. Dieses neue Verhalten ist ab Chrome 139 für Windows, Mac und Linux verfügbar. Die Unterstützung für ChromeOS wird in einer zukünftigen Version eingeführt.
Der Prozess zur Verwaltung der Navigation
Das Erfassen der Navigation ist Teil des Navigationsverwaltungsprozesses. Dieser Prozess umfasst den gesamten Ablauf, von der ersten Aktion des Nutzers bis hin zu den Entscheidungen des Browsers und den daraus resultierenden Verhaltensweisen, die vom Entwickler konfiguriert wurden:
- Nutzeraktionen:Hierzu zählen Interaktionen wie das Klicken oder Tippen auf Links.
- Browserentscheidungen:Hierzu gehören Aufgaben und Entscheidungen, die vom Browser verwaltet werden, z. B. Standardverhalten wie das Erfassen von Navigationsvorgängen.
- Entwicklersteuerelemente:Umfassen Web-APIs, mit denen Entwickler dem Browser mitteilen können, wie bestimmte Aufgaben ausgeführt werden sollen.
Das Zusammenspiel dieser Elemente bestimmt, ob die PWA in einem eigenständigen Fenster oder einem Browsertab geöffnet wird.
Ein grundlegender Anwendungsfall für die Navigationsverwaltung ist, wenn ein Nutzer auf einer anderen Seite im Browser auf einen Link zur installierten PWA klickt oder tippt. Im folgenden Beispiel wird der Fall eines Nutzers beschrieben, der die Google Chat-PWA installiert hat und in einer Google Kalender-Einladung auf einen Link zur PWA klickt.
calendar.google.comNutzeraktionen
Jede Nutzeraktion besteht aus drei Hauptelementen: dem Ereignis (z. B. ein Klick oder Tippen), der Oberfläche, auf der es stattfindet (z. B. eine Webseite oder eine Desktopverknüpfung), und dem Linktyp, der aktiviert wird (z. B. eine HTTPS-URL). Ein Nutzer könnte beispielsweise auf einer Webseite auf calendar.google.com auf einen Link zu https://chat.google.com/meeting_room_id in der Google Chat-PWA klicken.
Browserentscheidungen
Bei einer Nutzeraktion, z. B. wenn der Nutzer im vorherigen Schritt klickt, führt der Browser den Prozess zum Erfassen der Navigation aus, um zu entscheiden, ob Links in einem Browser-Tab oder in einer installierten PWA geöffnet werden sollen. Sie umfasst die folgenden Schritte:
- Ermitteln, ob die Navigation erfasst werden kann: Im Allgemeinen gilt eine Navigation als erfassbar, wenn dadurch ein neuer Frame erstellt wird und sie nicht in einem zusätzlichen Browserkontext geöffnet wird.
- Steuernde PWA identifizieren: Wenn die Navigation erfasst werden kann, versucht der Browser, eine PWA zu finden, die die URL „steuert“ (falls im Bereich ihres Web-App-Manifests).
- Nutzereinstellung prüfen: Wenn eine steuernde PWA gefunden wird, prüft der Browser die Nutzereinstellung. Wenn der Nutzer die Funktion nicht in den App-Einstellungen deaktiviert hat, wird die PWA gestartet. Andernfalls wird der Link in einem neuen Browsertab geöffnet.
- PWA starten: Der Browser startet die PWA mit dem Launch Handling Algorithm. Sie können dies mit der Launch Handler API beeinflussen, die als Nächstes behandelt wird.
Das folgende Diagramm fasst diesen Vorgang zusammen:
Steuerelemente für Entwickler
Der Navigationsprozess basiert hauptsächlich auf Browserstandardeinstellungen und Nutzereinstellungen. Sie können jedoch verschiedene APIs verwenden, um bestimmte Aspekte zu verwalten. Nach der letzten Aktualisierung der Navigationserfassung sind einige langjährige Web-APIs relevanter geworden.
Launch Handler API
Diese API kommt ins Spiel, wenn der Browser entscheidet, die PWA zu starten. So können Sie steuern, wie sie gestartet wird, z. B. in einem neuen oder einem vorhandenen Fenster.
Definieren Sie, wie die PWA über das launch_handler-Element im Web-App-Manifest gestartet wird. Dieses enthält ein Unterfeld namens client_mode. In diesem Unterfeld wird festgelegt, ob ein neues oder ein vorhandenes Fenster verwendet werden soll und ob darin navigiert werden soll. Zulässige Werte für client_mode:
focus-existing: Der Link soll in einem vorhandenen App-Fenster verarbeitet werden, z. B. in einer PWA, die bereits im Standalone-Modus ausgeführt wird.navigate-existing: Bei dieser Option wird der Browsing-Kontext, mit dem zuletzt interagiert wurde, in einem Web-App-Fenster zur Ziel-URL des Starts navigiert.navigate-new: Mit dieser Option wird ein neuer Browserkontext in einem Web-App-Fenster erstellt, um die Ziel-URL des Starts zu laden.
Verwenden Sie launchQueue API, um zusätzliche Parameter anzugeben und Sonderfälle zu behandeln.
Die Launch Handler API ist ab Chrome 110 verfügbar, wird aber mit dem Update zur Erfassung von Navigationen viel nützlicher. Weitere Informationen zur Launch Handler API
Weitere zugehörige APIs
Neben der Verarbeitung des Starts können je nach den spezifischen Anforderungen Ihrer App auch andere APIs eine Rolle in diesem Prozess spielen. Dazu gehören URL-Protokollhandler, mit denen eine Web-App ihre Fähigkeit registrieren kann, URL-Schemata über die Standardprotokolle http und https hinaus zu verarbeiten (z. B. Standardprotokolle wie mailto: oder benutzerdefinierte Protokolle wie web+music). Außerdem können Sie mit der Web App Scope Extensions API (derzeit in der Entwicklung) den Umfang Ihrer PWA erweitern, um Links von anderen Ursprüngen, einschließlich Subdomains, zu erfassen. Wenn ein Nutzer auf einen Link von einem zugehörigen Ursprung klickt, kann die PWA gestartet werden. Eine ausführliche Beschreibung würde den Rahmen dieses Artikels sprengen. Weitere Informationen finden Sie jedoch unter den entsprechenden Links.
Anwendungsfall: Google Chat-Links in der Chat-PWA erfassen
Zum Schluss sehen Sie hier, wie die verschiedenen Komponenten zusammenarbeiten, wenn ein Nutzer, der die Google Chat-PWA bereits installiert hat, auf einen Google Kalender-Link zu einem Google Chat-Raum klickt.
Vor der Erfassung der Navigation
Im folgenden Video erstellt ein Nutzer eine Google Kalender-Videokonferenz und lädt drei Gäste ein. In der Kalender App wird automatisch ein Google Chat-Link generiert, der alle Teilnehmer enthält. Wenn der Nutzer auf diesen Link klickt, wird der Chatroom in einem neuen Browsertab geöffnet. Ein Symbol in der Adressleiste signalisiert dann, dass eine entsprechende PWA installiert ist. Der Nutzer muss sie jedoch manuell starten. So funktionierte die Navigation vor der Aktualisierung:
Nach der Aufzeichnung der Navigation
Im folgenden Video ist derselbe Nutzer-Workflow zu sehen, aber mit dem neuen Verhalten beim Erfassen von Navigationen. Wenn Sie in dieser Version in Google Kalender auf den Google Chat-Link klicken, wird der entsprechende Chatroom direkt in der installierten PWA geöffnet. Außerdem hat das Google Chat-Team die Startbearbeitung implementiert, indem dem Web-App-Manifest das Attribut launch_handler hinzugefügt wurde. Wenn sie client_mode auf focus-existing setzen, wird der Link in einer vorhandenen Instanz der PWA geöffnet, sofern eine bereits ausgeführt wird. Da die Latenz beim Öffnen eines neuen Browser-Tabs und beim Auslösen eines Seitenaufrufs entfällt, kann die effektive „Zeit bis zur Nutzerinteraktion“ von vornherein kürzer sein. Tatsächlich wurde die Navigationslatenz in Google Chat deutlich verbessert, da die App nicht mehr neu gestartet werden muss.
Fazit und weitere Informationen
In diesem Artikel wurde das neue Standardverhalten für die Erfassung von Navigationsvorgängen ab Chrome 139 untersucht. Dabei wurde ein häufiger Anwendungsfall betrachtet, bei dem ein Nutzer auf einen HTTPS-Link im Bereich einer installierten PWA klickt. Weitere Informationen und Anwendungsfälle finden Sie unter Navigation Management into Installed PWAs. Das folgende Diagramm zeigt die vollständige Aufschlüsselung der Anwendungsfälle, einschließlich Nutzerereignisse, Oberflächen und Protokolle, mit den entsprechenden Ergebnissen:
Die Navigationsverwaltung ist ein wichtiger, aber oft übersehener Aspekt der UX Ihrer App, da sie den Einstiegspunkt steuert. Die in diesem Artikel beschriebenen Funktionen und Links können Ihnen dabei helfen, die bestmögliche App-ähnliche Nutzererfahrung für Ihre PWA zu erzielen.