Legen Sie mit der deklarativen Linkerfassung fest, wie durch im Projektumfang enthaltene Links Ihre PWA geöffnet wird

Thomas Steiner

Was ist die deklarative Linkerfassung?

Das Klicken auf Links im Web kann manchmal eine angenehme Überraschung sein. Wenn du beispielsweise auf einem Mobilgerät auf einen Webseitenlink zu YouTube klickst, wird die YouTube App für iOS oder Android geöffnet, sofern sie installiert ist. Wenn du aber die YouTube-PWA auf einem Computer installierst und auf einen Link klickst, wird sie in einem Browsertab geöffnet.

Aber es wird immer komplexer. Was passiert, wenn der Link nicht auf einer Website, sondern in einer Chatnachricht angezeigt wird, die Sie in einer der Chat-Apps von Google erhalten? Soll unter Desktop-Betriebssystemen, die das Konzept von separaten App-Fenstern haben, bei jedem Klick auf einen Link ein neues Fenster oder ein neuer Tab erstellt werden, wenn die App bereits geöffnet ist? Es gibt viele Möglichkeiten, Links und Navigationen zu erfassen, einschließlich, aber nicht beschränkt auf:

Deklarative Linkerfassung ist ein Vorschlag für die Manifesteigenschaft "capture_links" einer Web-App, mit der Entwickler deklarativ festlegen können, was geschehen soll, wenn der Browser aufgefordert wird, zu einer URL innerhalb des Navigationsbereichs der Anwendung aus einem Kontext außerhalb des Navigationsbereichs zu wechseln. Dieser Vorschlag gilt nicht, wenn sich der Nutzer bereits innerhalb des Navigationsbereichs befindet (z. B. wenn der Nutzer einen in den Geltungsbereich fallenden Browsertab geöffnet hat und auf einen internen Link klickt).

Einige Sonderbedingungen wie ein mittleres Klicken auf einen Link (oder ein Rechtsklick und dann „In neuem Tab öffnen“) lösen normalerweise keine Linkerfassung aus. Es spielt keine Rolle, ob ein Link target=_self oder target=_blank ist. Daher werden Links, die in einem Browserfenster (oder dem Fenster einer anderen PWA) angeklickt wurden, in der PWA geöffnet, auch wenn sie normalerweise eine Navigation im selben Tab auslösen würden.

Empfohlene Anwendungsfälle

Beispiele für Websites, die diese API möglicherweise verwenden:

  • PWAs, bei denen ein Fenster anstelle eines Browsertabs geöffnet werden soll, wenn der Nutzer auf einen Link zu dieser Datei klickt. In einer Desktopumgebung ist es oft sinnvoll, mehrere Anwendungsfenster gleichzeitig geöffnet zu haben.
  • Einfenster-PWAs, bei denen der Entwickler es vorzieht, immer nur eine einzige Instanz der App geöffnet zu lassen, wobei neue Navigationen die vorhandene Instanz fokussieren. Zu den untergeordneten Anwendungsfällen gehören:
    • Apps, bei denen es sinnvoll ist, nur eine Instanz auszuführen (z. B. ein Musikplayer, ein Spiel)
    • Anwendungen, die die Verwaltung mehrerer Dokumente in einer einzigen Instanz umfassen (z.B. eine HTML-implementierte Tableiste).

Aktivierung über about://flags

Wenn Sie die deklarative Linkerfassung lokal und ohne Ursprungstesttoken testen möchten, aktivieren Sie das Flag #enable-desktop-pwas-link-capturing in about://flags.

So verwenden Sie die deklarative Linkerfassung

Entwickler können deklarativ festlegen, wie Links erfasst werden, indem sie das zusätzliche Manifest-Feld "capture_links" der Web-App nutzen. Als Wert wird ein String oder ein Array von Strings verwendet. Wenn ein Array mit Strings angegeben wird, wählt der User-Agent das erste unterstützte Element in der Liste aus. Der Standardwert ist "none". Folgende Werte werden unterstützt:

  • "none" (Standardeinstellung): Es werden keine Links erfasst. Links, die zu diesem PWA-Bereich führen, werden wie gewohnt aufgerufen, ohne ein PWA-Fenster zu öffnen.
  • "new-client": Durch jeden angeklickten Link wird ein neues PWA-Fenster unter dieser URL geöffnet.
  • "existing-client-navigate": Der angeklickte Link wird in einem vorhandenen PWA-Fenster geöffnet, falls vorhanden, oder in einem neuen Fenster. Wenn mehr als ein PWA-Fenster vorhanden ist, kann es vom Browser beliebig ausgewählt werden. Das Verhalten entspricht "new-client", wenn derzeit kein Fenster geöffnet ist. {9/} Vorsicht! Diese Option kann zu Datenverlust führen, da Seiten beliebig verlassen werden können. Websites sollten sich darüber im Klaren sein, dass ein solches Verhalten aktiviert wird, wenn Sie diese Option auswählen. Diese Option eignet sich am besten für schreibgeschützte Websites, auf denen keine Nutzerdaten gespeichert sind, z. B. Musikplayer. Wenn die Seite, von der aus navigiert wird, ein beforeunload-Ereignis enthält, sieht der Nutzer die Aufforderung, bevor die Navigation abgeschlossen ist.

Demo

Die Demo für die deklarative Linkerfassung besteht aus zwei Demos, die miteinander interagieren:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

Der folgende Screencast zeigt, wie die beiden interagieren. Sie zeigen zwei verschiedene Verhaltensweisen, "new-client" und "existing-client-navigate". Testen Sie die Apps in verschiedenen Status, entweder auf einem Tab oder als installierte PWA, um den Unterschied im Verhalten zu sehen.

Sicherheit und Berechtigungen

Das Chromium-Team hat die deklarative Linkerfassung nach den unter Zugriff auf leistungsstarke Webplattformfunktionen steuern definierten grundlegenden Prinzipien wie Nutzersteuerung, Transparenz und Ergonomie entwickelt und implementiert. Diese API ermöglicht Websites neue zusätzliche Steuerungsoptionen. Erstens, die Möglichkeit, installierte Apps automatisch in einem Fenster zu öffnen. Dabei wird die vorhandene UI verwendet, aber die Website kann sie automatisch auslösen. Zweitens: die Möglichkeit, ein vorhandenes Fenster auf seine eigene Domain zu fokussieren und ein Ereignis auszulösen, das die angeklickte URL enthält. Dies soll es der Website ermöglichen, in einem vorhandenen Fenster auf eine neue Seite zu wechseln und damit den standardmäßigen HTML-Navigationsablauf zu überschreiben.

Zur Launch Handler API migrieren

Der Ursprungstest der Declarative Link Capturing API für Chromium 97 und niedriger läuft am 30. März 2022 ab. Sie wird in Chromium 98 und höher durch neue Funktionen und APIs ersetzt. Dazu gehören vom Nutzer aktivierte Linkerfassung und die Launch Handler API.

In Chromium 98 ist die automatische Linkerfassung jetzt eine Zustimmung des Nutzers, die nicht mehr bei der Installation einer Web-App zur Verfügung gestellt wird. Dazu muss der Nutzer eine installierte App im Browser mit Öffnen mit starten und Meine Auswahl speichern auswählen.

Beispiel für die Einstellung „Öffnen mit“ einer installierten App, bei der die Option „Meine Auswahl speichern“ aktiviert ist.

Alternativ können Nutzer die Linkerfassung für eine bestimmte Web-App auf der Seite mit den App-Verwaltungseinstellungen aktivieren oder deaktivieren.

Beispiel für die Einstellungsseite einer installierten Anwendung

Die Linkerfassung ist derzeit nur für ChromeOS verfügbar. Windows, macOS und Linux werden derzeit unterstützt.

Handler-API starten

Die Steuerung einer eingehenden Navigation wird zur Launch Handler API migriert. Damit können Webanwendungen entscheiden, wie eine Web-App in verschiedenen Situationen gestartet wird, z. B. in der Linkerfassung, dem Teilen von Zielen oder der Dateiverarbeitung. So migrieren Sie von der Declarative Link Capturing API zur Launch Handler API:

  1. Registrieren Sie Ihre Website für den Ursprungstest des Start-Handlers und platzieren Sie den Schlüssel des Ursprungstests in Ihrer Web-App.

  2. Füge dem Manifest deiner Website einen "launch_handler"-Eintrag hinzu.

    • Wenn Sie "capture_links": "new-client" verwenden möchten, fügen Sie Folgendes hinzu:"launch_handler": { "route_to": "new-client" }.
    • Wenn Sie "capture_links": "existing-client-navigate" verwenden möchten, fügen Sie "launch_handler": { "route_to": "existing-client-navigate" } hinzu.
    • Wenn du "capture_links": "existing-client-event" verwenden möchtest, das nie im Ursprungstest für die deklarative Linkerfassung implementiert wurde, füge "launch_handler": { "route_to": "existing-client-retain" } hinzu. Mit dieser Option werden Seiten im App-Bereich nicht mehr automatisch geöffnet, wenn eine Linknavigation erfasst wird. Sie müssen LaunchParams in JavaScript verarbeiten, indem Sie window.launchQueue.setConsumer() aufrufen, um die Navigation zu aktivieren.

Das Feld capture_links und die Registrierung des Ursprungstests für den deklarativen Linkaufnahme sind gültig bis zum 30. März 2022. Dadurch wird sichergestellt, dass Nutzer von Chromium 97 und niedriger die Web-App trotzdem über einen erfassten Link starten können.

Weitere Informationen finden Sie unter App-Veröffentlichung steuern.

Feedback

Das Chromium-Team möchte mehr über Ihre Erfahrungen mit der deklarativen Linkerfassung erfahren.

Informationen zum API-Design

Gibt es etwas an der API, das nicht so funktioniert, wie Sie erwartet haben? Oder fehlen Methoden oder Eigenschaften, um Ihre Idee zu implementieren? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Sie können ein Spezifikationsproblem im entsprechenden GitHub-Repository melden oder Ihre Gedanken zu einem vorhandenen Problem hinzufügen.

Problem mit der Implementierung melden

Haben Sie einen Fehler bei der Implementierung von Chromium gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Melden Sie einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Geben Sie UI>Browser>WebAppInstalls in das Feld Komponenten ein. Glitch eignet sich perfekt, um schnelle und einfache Reproduzierungen zu teilen.

Unterstützung für die API zeigen

Möchten Sie die deklarative Linkerfassung verwenden? Ihre öffentliche Unterstützung hilft dem Chromium-Team, Funktionen zu priorisieren und anderen Browseranbietern zu zeigen, wie wichtig es ist, sie zu unterstützen.

Sende einen Tweet mit dem Hashtag #DeclarativeLinkCapturing an @ChromiumDev und teile uns mit, wo und wie du den Dienst verwendest.

Nützliche Links

Danksagungen

Deklarative Link Capturing wurde von Matt Giuca mit Input von Al Cutter und Dominick Ng festgelegt. Die API wurde von Alan Cutter implementiert. Dieser Artikel wurde von Joe Medley, Matt Giuca, Alan Cutter und Shunya Shishido verfasst. Hero-Image von Zulmaury Saavedra auf Unsplash