Diese Seite wurde von der Cloud Translation API übersetzt.

Registrierung des URL-Protokoll-Handlers für PWAs

Installierte PWAs können Links verarbeiten, die ein bestimmtes Protokoll verwenden, um die Nutzerfreundlichkeit zu verbessern.

Thomas Steiner

Hintergrundwissen zu Schemas (Protokolle)

Ein Uniform Resource Identifier (URI) ist eine kompakte Zeichenfolge, die eine abstrakte oder physische Ressource identifiziert. Jeder URI beginnt mit dem Namen eines Schemas, das sich auf eine Spezifikation für die Zuweisung von IDs innerhalb dieses Schemas bezieht. Daher ist die URI-Syntax ein föderiertes und erweiterbares Benennungssystem, in dem die Spezifikation jedes Schemas die Syntax und Semantik von Kennungen, die dieses Schema verwenden, weiter einschränken kann. Schemata werden auch als Protokolle bezeichnet. Unten finden Sie einige Beispiele für Schemas.

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

Der Begriff Uniform Resource Locator (URL) bezieht sich auf die Teilmenge der URIs, die nicht nur eine Ressource identifizieren, sondern auch eine Möglichkeit bieten, die Ressource zu finden, indem der primäre Zugriffsmechanismus (z. B. der Netzwerkstandort) beschrieben wird.

Hintergrundinformationen zur `registerProtocolHandler()`-Methode

Mit der Methode Navigator für sicheren Inhalt registerProtocolHandler() können Websites registrieren, ob sie bestimmte URL-Schemata öffnen oder verarbeiten können. Daher müssen Websites die Methode so aufrufen: navigator.registerProtocolHandler(scheme, url). Die beiden Parameter sind folgendermaßen definiert:

scheme: Ein String mit dem Protokoll, das die Website verarbeiten möchte.
url: Ein String mit der URL des Handlers. Diese URL muss %s als Platzhalter enthalten, der durch die zu verarbeitende URL ersetzt wird.

Das Schema muss entweder eines der auf die Zulassungsliste gesetzten Schemas sein (z. B. mailto, bitcoin oder magnet) oder mit web+ beginnen, gefolgt von mindestens einem oder mehreren ASCII-Kleinbuchstaben nach dem Präfix web+, z. B. web+coffee.

Zur Verdeutlichung hier ein konkretes Beispiel für den Ablauf:

Der Nutzer besucht eine Website unter https://coffeeshop.example.com/, über die der folgende Aufruf erfolgt: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
Später klickt der Nutzer beim Besuch von https://randomsite.example.com/ auf einen Link wie <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
Dadurch ruft der Browser die folgende URL auf: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. Der mit URL decodierte Suchstring lautet dann ?type=web+coffee://latte-macchiato.

Was ist Protokoll-Verarbeitung?

Der aktuelle Mechanismus zur Registrierung von URL-Protokoll-Handlern für PWAs bietet die Registrierung von Protokoll-Handlern im Rahmen einer PWA-Installation über das Manifest an. Nachdem Sie eine PWA als Protokoll-Handler registriert haben, wird die registrierte PWA geöffnet und erhält die URL, wenn ein Nutzer in einem Browser oder einer plattformspezifischen App auf einen Hyperlink mit einem bestimmten Schema wie mailto, bitcoin oder web+music klickt. Wichtig ist, dass sowohl die vorgeschlagene Manifest-basierte Registrierung als auch das herkömmliche registerProtocolHandler() in der Praxis sehr ähnliche Rollen spielen, aber dennoch die Möglichkeit für ergänzende Nutzererfahrungen bieten:

Zu den Ähnlichkeiten gehören Anforderungen an die Liste der zulässigen Registrierungsschemata sowie an den Namen und das Format von Parametern.
Die Unterschiede bei der manifestbasierten Registrierung sind geringfügig, können aber die Nutzerfreundlichkeit für PWA-Nutzer verbessern. Für die manifestbasierte PWA-Registrierung ist beispielsweise neben der vom Nutzer initiierten Installation der PWA möglicherweise keine weitere Nutzeraktion erforderlich.

Anwendungsfälle

In einer PWA für die Textverarbeitung sieht der Nutzer in einem Dokument einen Link zu einer Präsentation wie web+presentations://deck2378465. Wenn der Nutzer auf den Link klickt, wird die Präsentations-PWA automatisch im richtigen Bereich geöffnet und die Präsentation angezeigt.
In einer plattformspezifischen Chat-App erhält der Nutzer in einer Chatnachricht einen Link zu einer magnet-URL. Beim Klicken auf den Link wird eine installierte Torrent-PWA gestartet und der Download gestartet.
Der Nutzer hat eine PWA für Musikstreaming installiert. Wenn ein Freund einen Link zu einem Song wie web+music://songid=1234&time=0:13 teilt und der Nutzer darauf klickt, wird die PWA für Musikstreaming automatisch in einem eigenständigen Fenster geöffnet.

Registrierung der URL-Protokoll-Handler für PWAs verwenden

Die API für die Registrierung von URL-Protokoll-Handlern ist eng an navigator.registerProtocolHandler() angelehnt. Nur werden die Informationen dieses Mal deklarativ über das Manifest der Webanwendung in einer neuen Property namens "protocol_handlers" übergeben, die ein Array von Objekten mit den beiden erforderlichen Schlüsseln "protocol" und "url" annimmt. Im folgenden Code-Snippet wird gezeigt, wie web+tea und web+coffee registriert werden. Die Werte sind Strings, die die URL des Handlers mit dem erforderlichen Platzhalter %s für die maskierte URL enthalten.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Mehrere Apps registrieren sich für dasselbe Protokoll

Wenn sich mehrere Anwendungen als Handler für dasselbe Schema registrieren, z. B. das Protokoll mailto, zeigt das Betriebssystem dem Nutzer eine Auswahl an und lässt ihn entscheiden, welcher der registrierten Handler verwendet werden soll.

Dieselbe App registriert sich für mehrere Protokolle

Die gleiche App kann sich für mehrere Protokolle registrieren, wie im Codebeispiel oben zu sehen.

App-Updates und Handlerregistrierung

Handler-Registrierungen werden mit der neuesten von der App bereitgestellten Manifestversion synchronisiert. Es gibt zwei Fälle:

Ein Update, durch das neue Handler hinzugefügt werden, löst die Handlerregistrierung aus (separat von der App-Installation).
Durch ein Update, durch das Handler entfernt werden, wird die Aufhebung der Registrierung des Handlers ausgelöst (unabhängig von der Deinstallation der App).

Protokoll-Handler-Debugging in den Entwicklertools

Rufen Sie über den Bereich Anwendung > Manifest den Abschnitt Protokoll-Handler auf. Hier können Sie alle verfügbaren Protokolle ansehen und testen.

Installieren Sie beispielsweise diese Demo-PWA. Geben Sie im Bereich Protocol Handlers (Protokoll-Handler) „americano“ ein und klicken Sie auf Test protocol (Protokoll testen), um die Kaffeeseite in der PWA zu öffnen.

Protokoll-Handler im Bereich „Manifest“

Demo

Auf Glitch können Sie sich eine Demo der Registrierung von URL-Protokoll-Handlern für PWAs ansehen.

Rufen Sie https://protocol-handler.glitch.me/ auf, installieren Sie die PWA und laden Sie die App nach der Installation neu. Der Browser hat die PWA jetzt beim Betriebssystem als Handler für das web+coffee-Protokoll registriert.
Klicken Sie im Fenster der installierten PWA auf den Link https://protocol-handler-link.glitch.me/. Daraufhin wird ein neuer Browsertab mit drei Links geöffnet. Klicken Sie auf die erste oder die zweite Option (Latte Macchiato oder Americano). Der Browser zeigt Ihnen nun eine Aufforderung an und fragt, ob Sie damit einverstanden sind, dass die App als Protokoll-Handler für das web+coffee-Protokoll verwendet wird. Wenn Sie zustimmen, wird die PWA geöffnet und der ausgewählte Kaffee angezeigt.
Wenn Sie den traditionellen Ablauf mit navigator.registerProtocolHandler() vergleichen möchten, klicken Sie in der PWA auf die Schaltfläche Protocol Handler registrieren. Klicken Sie dann auf dem Browsertab auf den dritten Link (chai). Es wird ebenfalls eine Aufforderung angezeigt, aber die PWA wird dann in einem Tab und nicht in einem Browserfenster geöffnet.
Senden Sie sich selbst in einer plattformspezifischen Anwendung wie Skype unter Windows eine Nachricht mit einem Link wie <a href="web+coffee://americano">Americano</a> und klicken Sie darauf. Außerdem sollte die installierte PWA geöffnet werden.

Demo des URL-Protokoll-Handlers mit Browsertab mit Links auf der linken Seite und eigenständigem PWA-Fenster auf der rechten Seite.

Sicherheitsaspekte

Da für die Installation einer PWA der Kontext sicher sein muss, wird diese Einschränkung auf die Protokollverarbeitung übertragen. Die Liste der registrierten Protokoll-Handler ist nicht im Web verfügbar und kann daher nicht als Fingerprint-Vektor verwendet werden.

Nicht vom Nutzer initiierte Navigationsversuche

Navigationsversuche, die nicht vom Nutzer, sondern programmatisch initiiert werden, öffnen möglicherweise keine Apps. Die benutzerdefinierte Protokoll-URL darf nur in Browserkontexten der obersten Ebene verwendet werden, nicht z. B. als URL eines Iframes.

Zulassungsliste für Protokolle

Ähnlich wie bei registerProtocolHandler() gibt es eine Zulassungsliste mit Protokollen, die Apps zum Verarbeiten registrieren können.

Aufforderung zur Einwilligung

Beim ersten Start der PWA aufgrund eines aufgerufenen Protokolls wird dem Nutzer ein Berechtigungsdialogfeld angezeigt. In diesem Dialogfeld werden der App-Name und der Ursprung der App angezeigt. Außerdem wird der Nutzer gefragt, ob die App Links vom Protokoll verarbeiten darf. Wenn ein Nutzer das Berechtigungsdialogfeld ablehnt, wird der registrierte Protokoll-Handler vom Betriebssystem ignoriert. Um die Registrierung des Protokollabhandlers aufzuheben, muss der Nutzer die PWA deinstallieren, die ihn registriert hat. Der Browser deregistriert den Protokoll-Handler auch, wenn der Nutzer „Meine Auswahl merken“ und „Verweigern“ auswählt.

Feedback

Das Chromium-Team möchte von Ihnen wissen, wie Sie die Registrierung von URL-Protokoll-Handlern für PWAs erlebt haben.

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 Implementierung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar 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 einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung für die Reproduktion an. Geben Sie dann UI>Browser>WebAppInstalls in das Feld Komponenten ein. Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

Unterstützung für die API anzeigen

Möchten Sie die Registrierung der URL-Protokoll-Handler für PWAs verwenden? Dein öffentlicher Support hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig eine Unterstützung für sie ist.

Teilen Sie im WICG-Discourse-Thread mit, wie Sie es verwenden möchten. Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #ProtocolHandler und teilen Sie uns mit, wo und wie Sie ihn verwenden.

Nützliche Links

Danksagungen

Die Registrierung der URL-Protokoll-Handler für PWAs wurde von Fabio Rocha, Diego González, Connor Moody und Samuel Tang vom Microsoft Edge-Team implementiert und spezifiziert. Dieser Artikel wurde von Joe Medley und Fabio Rocha überprüft. Hero-Image von JJ Ying auf Unsplash