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

Thomas Steiner

Was ist das deklarative Erfassen von Links?

Das Klicken auf Links im Web kann manchmal eine angenehme Überraschung sein. Wenn Sie beispielsweise auf einem Mobilgerät auf einen Weblink zu YouTube klicken, wird die YouTube App für iOS oder Android geöffnet, sofern sie installiert ist. Wenn Sie die YouTube-PWA auf einem Computer installieren und auf einen Link klicken, wird dieser in einem Browser-Tab geöffnet.

Aber es wird noch komplizierter. Was ist, wenn der Link nicht auf einer Website, sondern in einer Chatnachricht angezeigt wird, die Sie in einer der Chat-Apps von Google erhalten? Sollte auf Desktopbetriebssystemen, die separate App-Fenster unterstützen, für jeden Linkklick ein neues Fenster oder ein neuer Tab erstellt werden, wenn die App bereits geöffnet ist? Es gibt viele Möglichkeiten, Links und Navigationsvorgänge zu erfassen, z. B.:

  • Geklickte Links von anderen Webseiten
  • Die URL wird über eine plattformspezifische App im Betriebssystem gestartet.
  • Navigationen, die von der App Shortcuts API stammen.
  • Links, die über URL-Protokoll-Handler weitergeleitet werden.
  • Navigationen, die durch Datei-Handler ausgelöst werden.
  • Navigationen, die durch die Share Target API ausgelöst werden.
  • …und andere.

Declarative Link Capturing ist ein Vorschlag für eine Web-App-Manifest-Eigenschaft namens "capture_links", mit der Entwickler deklarativ festlegen können, was passieren soll, wenn der Browser aufgefordert wird, zu einer URL zu navigieren, die sich im Navigationsbereich der Anwendung befindet, und zwar aus einem Kontext außerhalb des Navigationsbereichs. Dieser Vorschlag gilt nicht, wenn sich der Nutzer bereits im Navigationsbereich befindet, z. B. wenn er einen Browser-Tab geöffnet hat, der sich im Bereich befindet, und auf einen internen Link klickt.

Unter bestimmten Bedingungen, z. B. wenn Sie mit der mittleren Maustaste auf einen Link klicken oder mit der rechten Maustaste klicken und dann „In neuem Tab öffnen“ auswählen, wird das Link-Capturing-Verhalten in der Regel nicht ausgelöst. Es spielt keine Rolle, ob ein Link target=_self oder target=_blank ist. Links, auf die in einem Browserfenster (oder Fenster einer anderen PWA) geklickt wird, werden in der PWA geöffnet, auch wenn sie normalerweise eine Navigation auf demselben Tab verursachen würden.

Empfohlene Anwendungsfälle

Beispiele für Websites, die diese API verwenden können:

  • PWAs, die beim Klicken auf einen Link zu ihnen ein Fenster anstelle eines Browsertabs öffnen möchten. In einer Desktopumgebung ist es oft sinnvoll, mehrere Anwendungsfenster gleichzeitig geöffnet zu haben.
  • PWAs mit einem einzelnen Fenster, bei denen der Entwickler es vorzieht, dass jeweils nur eine Instanz der App geöffnet ist und neue Navigationsvorgänge die vorhandene Instanz in den Fokus rücken. Untergeordnete Anwendungsfälle sind unter anderem:
    • Apps, bei denen es sinnvoll ist, nur eine Instanz auszuführen (z.B. ein Musikplayer oder ein Spiel).
    • Apps, die die Verwaltung mehrerer Dokumente in einer einzigen Instanz ermöglichen (z.B. ein HTML-implementierter Tabstreifen).

Aktivierung über about://flags

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

Deklarative Link-Erfassung verwenden

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

  • "none" (Standard): Es werden keine Links erfasst. Links, auf die geklickt wird und die zu diesem PWA-Bereich führen, werden wie gewohnt aufgerufen, ohne dass ein PWA-Fenster geöffnet wird.
  • "new-client": Bei jedem Klick auf einen Link wird ein neues PWA-Fenster mit der entsprechenden URL geöffnet.
  • "existing-client-navigate": Der angeklickte Link wird in einem vorhandenen PWA-Fenster geöffnet, sofern eines verfügbar ist, andernfalls in einem neuen Fenster. Wenn mehrere PWA-Fenster vorhanden sind, kann der Browser eines davon beliebig auswählen. Wenn kein Fenster geöffnet ist, verhält sich die Funktion wie "new-client". 🚨 Vorsicht! Diese Option kann zu Datenverlust führen, da Nutzer die Seite jederzeit verlassen können. Websiteinhaber sollten sich bewusst sein, dass sie sich für dieses Verhalten entscheiden, wenn sie diese Option auswählen. Diese Option eignet sich am besten für schreibgeschützte Websites, die keine Nutzerdaten im Arbeitsspeicher speichern, z. B. Musikplayer. Wenn auf der Seite, die verlassen wird, ein beforeunload-Ereignis vorhanden ist, wird die Aufforderung vor Abschluss der Navigation angezeigt.

Demo

Die Demo für das deklarative Erfassen von Links besteht aus zwei Demos, die miteinander interagieren:

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

Im folgenden Screencast sehen Sie, wie die beiden interagieren. Sie zeigen zwei verschiedene Verhaltensweisen: "new-client" und "existing-client-navigate". Testen Sie die Apps in verschiedenen Status, z. B. in einem Tab oder als installierte PWA, um die Verhaltensunterschiede zu sehen.

Sicherheit und Berechtigungen

Das Chromium-Team hat Declarative Link Capturing unter Berücksichtigung der in Controlling Access to Powerful Web Platform Features definierten Grundprinzipien entwickelt und implementiert, darunter Nutzerkontrolle, Transparenz und Ergonomie. Diese API bietet Websites zusätzliche Steuerungsmöglichkeiten. Erstens: Installierte Apps können automatisch in einem Fenster geöffnet werden. Dabei wird die vorhandene Benutzeroberfläche verwendet, die Website kann sie aber automatisch auslösen. Zweitens kann ein vorhandenes Fenster auf seine eigene Domain fokussiert und ein Ereignis mit der angeklickten URL ausgelöst werden. Dadurch soll die Website ein vorhandenes Fenster zu einer neuen Seite navigieren können, wodurch der standardmäßige HTML-Navigationsfluss überschrieben wird.

Zur Launch Handler API migrieren

Der Ursprungstest für die Declarative Link Capturing API ist am 30. März 2022 abgelaufen für Chromium 97 und niedriger. Sie wird durch eine Reihe von neuen Funktionen und APIs in Chromium 98 und höher ersetzt, darunter die vom Nutzer aktivierte Linkerfassung und die Launch Handler API.

In Chromium 98 ist das automatische Erfassen von Links jetzt ein Verhalten, das Nutzer aktivieren müssen, anstatt dass es einer Web-App bei der Installation gewährt wird. Damit das Erfassen von Links aktiviert wird, muss ein Nutzer eine installierte App über den Browser mit Öffnen mit starten und Auswahl speichern auswählen.

Beispiel für die Einstellung „Öffnen mit“ einer installierten App mit aktivierter Option „Auswahl speichern“.

Alternativ können Nutzer das Erfassen von Links für eine bestimmte Web-App auf der Seite mit den App-Verwaltungseinstellungen aktivieren oder deaktivieren.

Beispiel für die Einstellungsseite einer installierten App

Das Erfassen von Links ist derzeit nur für ChromeOS verfügbar. Die Unterstützung für Windows, macOS und Linux ist in Arbeit.

Launch Handler API

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

  1. Registrieren Sie Ihre Website für den Launch Handler-Ursprungstest und fügen Sie den Ursprungstestschlüssel in Ihre Web-App ein.

  2. Fügen Sie dem Manifest Ihrer Website einen "launch_handler"-Eintrag hinzu.

    • Wenn Sie "capture_links": "new-client" verwenden möchten, fügen Sie "launch_handler": { "route_to": "new-client" } hinzu.
    • Wenn Sie "capture_links": "existing-client-navigate" verwenden möchten, fügen Sie Folgendes hinzu: "launch_handler": { "route_to": "existing-client-navigate" }.
    • Wenn Sie "capture_links": "existing-client-event" verwenden möchten (das nie im Ursprungstest für das deklarative Erfassen von Links implementiert wurde), fügen Sie Folgendes hinzu: "launch_handler": { "route_to": "existing-client-retain" }. Bei Auswahl dieser Option wird auf Seiten in Ihrem App-Bereich nicht mehr automatisch navigiert, 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 für den Ursprungstest für das deklarative Erfassen von Links sind bis zum 30. März 2022 gültig. So können Nutzer mit Chromium 97 und niedriger die Web-App weiterhin über einen erfassten Link starten.

Weitere Informationen finden Sie unter Steuern, wie Ihre App gestartet wird.

Feedback

Das Chromium-Team möchte mehr über Ihre Erfahrungen mit Declarative Link Capturing erfahren.

Informationen zum API-Design

Gibt es etwas an der API, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie Fragen oder Anmerkungen zum Sicherheitsmodell? Melden Sie ein Spezifikationsproblem im entsprechenden GitHub-Repository oder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chromium-Implementierung gefunden? Oder weicht die Implementierung von der Spezifikation ab? Melden Sie einen Fehler unter new.crbug.com. Geben Sie dabei so viele Details wie möglich an, fügen Sie eine einfache Anleitung zur Reproduktion hinzu und geben Sie UI>Browser>WebAppInstalls in das Feld Components (Komponenten) ein.

API-Support zeigen

Planen Sie, die deklarative Link-Erfassung zu verwenden? Ihr öffentlicher Support hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #DeclarativeLinkCapturing und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Nützliche Links

Danksagungen

Die deklarative Linkerfassung wurde von Matt Giuca mit Beiträgen von Alan Cutter und Dominick Ng spezifiziert. Die API wurde von Alan Cutter implementiert. Dieser Artikel wurde von Joe Medley, Matt Giuca, Alan Cutter und Shunya Shishido überprüft. Hero-Image von Zulmaury Saavedra auf Unsplash.