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 Nutzung zu vereinfachen.

Thomas Steiner

Hintergrundinformationen zu Schemas (auch Protokolle genannt)

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. Die URI-Syntax ist daher ein föderiertes und erweiterbares Benennungssystem, bei dem die Spezifikation jedes Schemas die Syntax und Semantik der mit diesem Schema verwendeten Bezeichner 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, der das Protokoll enthält, das von der Website verarbeitet werden soll.
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 der Zulassungsliste stehenden Schemas sein (z. B. mailto, bitcoin oder magnet) oder mit web+ beginnen, gefolgt von mindestens einem oder mehreren Kleinbuchstaben des ASCII-Zeichensatzes 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/, die den folgenden Aufruf ausführt: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
Später klickt der Nutzer auf https://randomsite.example.com/ auf einen Link wie <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
Dadurch wird der Browser zur folgenden URL weitergeleitet: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. Der 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. Sowohl die vorgeschlagene manifestbasierte Registrierung als auch die traditionelle registerProtocolHandler() spielen in der Praxis eine sehr ähnliche Rolle, bieten aber dennoch die Möglichkeit für eine ergänzende Nutzererfahrung:

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 PWA für die Präsentation automatisch im richtigen Umfang geöffnet und die Foliensammlung wird angezeigt.
In einer plattformspezifischen Chat-App erhält der Nutzer in einer Chatnachricht einen Link zu einer magnet-URL. Wenn Sie auf den Link klicken, wird eine installierte Torrent-PWA gestartet und der Download beginnt.
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 mailto-Protokoll, 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

Handlerregistrierungen werden mit der neuesten Manifestversion synchronisiert, die von der App bereitgestellt wird. Es gibt zwei Fälle:

Ein Update, durch das neue Handler hinzugefügt werden, löst die Handlerregistrierung aus (separat von der App-Installation).
Ein Update, bei dem Handler entfernt werden, löst die Handler-Abmeldung aus (separat von der App-Deinstallation).

Protokoll-Handler-Fehlerbehebung in den Entwicklertools

Rufen Sie über den Bereich Anwendung > Manifest den Abschnitt Protokoll-Handler auf. Hier können Sie sich 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 Name und der Ursprung der App angezeigt. Außerdem wird der Nutzer gefragt, ob die App Links aus dem 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

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

Planen Sie die Verwendung der Registrierung von URL-Protokoll-Handlern für PWAs? Ihre öffentliche Unterstützung hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

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