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

Thomas Steiner

Was ist deklaratives Link-Caching?

Das Klicken auf Links im Web kann manchmal eine angenehme Überraschung sein. Wenn du beispielsweise auf einem Mobilgerät auf einen Link zu YouTube klickst, wird die YouTube App für iOS oder Android geöffnet, sofern sie installiert ist. Wenn du die YouTube-PWA auf einem Computer installierst und auf einen Link klickst, wird dieser in einem Browsertab 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? Sollten bei Desktop-Betriebssystemen, die separate App-Fenster haben, 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 Navigationen zu erfassen, darunter:

  • Klicks auf Links von anderen Webseiten
  • Die URL wird über eine plattformspezifische App im Betriebssystem gestartet.
  • Navigationen, die über die App Shortcuts API stammen.
  • Links, die über URL-Protokoll-Handler laufen.
  • Navigationen, die durch Datei-Handler verursacht werden.
  • Navigationen, die durch die Share Target API verursacht wurden.
  • …und weitere.

Deklaratives Link-Aufzeichnen ist ein Vorschlag für eine Manifest-Eigenschaft für Webanwendungen namens "capture_links". Damit können Entwickler deklarativ festlegen, was passieren soll, wenn der Browser aufgefordert wird, von einem Kontext außerhalb des Navigationsbereichs der Anwendung zu einer URL zu wechseln, die sich im Navigationsbereich der Anwendung befindet. Dieser Vorschlag gilt nicht, wenn sich der Nutzer bereits im Navigationsbereich befindet, z. B. wenn er einen Browsertab geöffnet hat, der zum Navigationsbereich gehört, und auf einen internen Link klickt.

Bestimmte Sonderfälle wie das Klicken mit der mittleren Maustaste auf einen Link oder das Klicken mit der rechten Maustaste und dann „In neuem Tab öffnen“ lösen das Erfassen von Links in der Regel nicht aus. Ob ein Link target=_self oder target=_blank ist, spielt keine Rolle. Links, auf die in einem Browserfenster (oder Fenster einer anderen PWA) geklickt wird, werden in der PWA geöffnet, auch wenn sie normalerweise zu einer Navigation innerhalb desselben Tabs führen würden.

Empfohlene Anwendungsfälle

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

  • PWAs, bei denen ein Fenster und kein Browsertab geöffnet werden soll, wenn der Nutzer auf einen Link zu ihnen klickt. In einer Desktopumgebung ist es oft sinnvoll, mehrere Anwendungsfenster gleichzeitig geöffnet zu haben.
  • PWAs mit einem Fenster, bei denen der Entwickler bevorzugt nur eine Instanz der App gleichzeitig geöffnet haben möchte, wobei bei neuen Navigationen die vorhandene Instanz fokussiert wird. Beispiele für Unteranwendungsfälle:
    • Apps, bei denen es sinnvoll ist, nur eine Instanz auszuführen (z. B. ein Musikplayer oder ein Spiel)
    • Apps, die die Verwaltung mehrerer Dokumente innerhalb einer einzelnen Instanz umfassen (z. B. ein HTML-implementierter Tab-Bereich)

Über about://flags aktivieren

Wenn Sie Declarative Link Capturing lokal ohne Testtoken für den Ursprung testen möchten, aktivieren Sie das Flag #enable-desktop-pwas-link-capturing in about://flags.

Wie verwende ich deklaratives Link-Caching?

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

  • "none" (Standardeinstellung): Keine Linkerfassung. Klicks auf Links, die zu diesem PWA-Bereich führen, werden wie gewohnt ausgeführt, ohne dass ein PWA-Fenster geöffnet wird.
  • "new-client": Bei jedem angeklickten Link wird ein neues PWA-Fenster mit dieser URL geöffnet.
  • "existing-client-navigate": Der angeklickte Link wird in einem vorhandenen PWA-Fenster geöffnet, falls verfügbar, andernfalls in einem neuen Fenster. Wenn mehrere PWA-Fenster vorhanden sind, wählt der Browser möglicherweise eines davon willkürlich aus. Wenn kein Fenster geöffnet ist, verhält sich das Symbol wie "new-client". 🚨 Achtung! Diese Option kann zu Datenverlusten führen, da Seiten beliebig verlassen werden können. Websiteinhaber sollten sich bewusst sein, dass sie durch die Auswahl dieser Option dieses Verhalten zulassen. Diese Option eignet sich am besten für Websites im Lesemodus, die keine Nutzerdaten im Arbeitsspeicher speichern, z. B. Musikplayer. Wenn die Seite, von der aus der Nutzer weitergeleitet wird, ein beforeunload-Ereignis hat, 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/

Im folgenden Screencast wird gezeigt, wie die beiden miteinander interagieren. Sie zeigen zwei verschiedene Verhaltensweisen: "new-client" und "existing-client-navigate". Testen Sie die Apps in verschiedenen Status, also in einem Tab oder als installierte PWA, um die Unterschiede im Verhalten zu sehen.

Sicherheit und Berechtigungen

Das Chromium-Team hat die deklarative Linkerfassung anhand der in Controlling Access to Powerful Web Platform Features (Zugriff auf leistungsstarke Funktionen der Webplattform steuern) definierten Grundprinzipien entwickelt und implementiert, einschließlich Nutzerkontrolle, Transparenz und Ergonomie. Diese API bietet Websites zusätzliche Steueroptionen. Erstens: Sie können installierte Apps automatisch in einem Fenster öffnen. Dabei wird die vorhandene Benutzeroberfläche verwendet, aber es ist möglich, dass sie von der Website automatisch ausgelöst wird. Zweitens: Die Möglichkeit, ein vorhandenes Fenster auf eine eigene Domain auszurichten und ein Ereignis mit der angeklickten URL auszulösen. So soll es möglich sein, über die Website ein bestehendes Fenster zu einer neuen Seite zu öffnen und den standardmäßigen HTML-Navigationsfluss zu überschreiben.

Zur Launch Handler API migrieren

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

In Chromium 98 muss die automatische Linkerfassung jetzt vom Nutzer aktiviert werden, anstatt dass sie bei der Installation einer Web-App gewährt wird. Um die Linkerfassung zu aktivieren, muss ein Nutzer eine installierte App über den Browser mit Mit öffnen und Meine Auswahl merken auswählen.

Beispiel für die Einstellung „Mit“ einer installierten App, bei der die Option „Meine Auswahl merken“ aktiviert ist.

Alternativ können Nutzer die Linkerfassung für eine bestimmte Webanwendung auf der Seite „App-Verwaltung“ aktivieren oder deaktivieren.

Beispiel für die Seite „Einstellungen“ einer installierten App

Die Linkerfassung ist derzeit nur unter 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. So können Webanwendungen festlegen, wie eine Webanwendung in verschiedenen Situationen gestartet wird, z. B. bei der Linkerfassung, beim Freigabeziel oder bei der Dateiverwaltung. So migrieren Sie von der Declarative Link Capturing API zur Launch Handler API:

  1. Registrieren Sie Ihre Website für den Ursprungstest des Launch Handlers und fügen Sie den Schlüssel für den Ursprungstest 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 add:"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 (dies wurde in der ursprünglichen Testversion für die deklarative Linkerfassung nie implementiert), fügen Sie Folgendes hinzu: "launch_handler": { "route_to": "existing-client-retain" }. Bei dieser Option werden Seiten in Ihrem App-Bereich nicht mehr automatisch aufgerufen, wenn eine Linknavigation erfasst wird. Du musst die LaunchParams in JavaScript verarbeiten, indem du window.launchQueue.setConsumer() aufrufst, um die Navigation zu aktivieren.

Die Registrierung für den Ursprungstest des Felds capture_links und der deklarativen Linkerfassung ist bis zum 30. März 2022 gültig. So können Nutzer mit Chromium 97 und niedriger die Webanwendung weiterhin über einen erfassten Link starten.

Weitere Informationen finden Sie unter Startvorgang Ihrer App steuern.

Feedback

Das Chromium-Team möchte von Ihnen wissen, welche Erfahrungen Sie mit der deklarativen Linkerfassung gemacht haben.

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie zur Implementierung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare zum Sicherheitsmodell? Reichen Sie ein Problem mit der Spezifikation im entsprechenden GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chromium-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Melden Sie den Fehler unter new.crbug.com. Geben Sie dabei so viele Details wie möglich an, eine einfache Anleitung zur Reproduktion und geben Sie UI>Browser>WebAppInstalls in das Feld Components ein. Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

Unterstützung für die API anzeigen

Verwenden Sie deklaratives Link-Caching? Ihre öffentliche Unterstützung 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 ihn verwenden.

Nützliche Links

Danksagungen

Die deklarative Linkerfassung wurde von Matt Giuca mit Unterstützung von Alan Cutter und Dominick Ng entwickelt. Die API wurde von Alan Cutter implementiert. Dieser Artikel wurde von Joe Medley, Matt Giuca, Alan Cutter und Shunya Shishido geprüft. Hero-Image von Zulmaury Saavedra auf Unsplash