Registrierung des URL-Protokoll-Handlers für PWAs

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

Hintergrundwissen zu Schemas (Protokolle)

Ein Uniform Resource Identifier (URI) ist eine kompakte Zeichenfolge, die eine abstrakte oder physische Ressource identifiziert. Jeder URI beginnt mit einem Schemanamen, der auf eine Spezifikation für die Zuweisung von Kennzeichnungen innerhalb dieses Schemas verweist. 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 Navigator-Methode registerProtocolHandler(), bei der ausschließlich sichere Inhalte geschützt sind, können Websites ihre Fähigkeit registrieren, bestimmte URL-Schemas zu öffnen oder zu verarbeiten. Daher müssen Websites die Methode so aufrufen: navigator.registerProtocolHandler(scheme, url). Die beiden Parameter sind so 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 maskierte 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:

  1. Der Nutzer besucht eine Website unter https://coffeeshop.example.com/, die den folgenden Aufruf ausführt: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
  2. 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>.
  3. 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?

Beim aktuellen Mechanismus URL-Protokoll-Handler-Registrierung für PWAs wird die Registrierung des Protokoll-Handlers als Teil einer PWA-Installation über ihr Manifest angeboten. 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 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. Wenn Sie auf den Link klicken, wird eine installierte Torrent-PWA gestartet und der Download beginnt.
  • Der Nutzer hat eine Musikstreaming-PWA 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 des URL-Protokoll-Handlers ist navigator.registerProtocolHandler() sehr ähnlich. 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

Wie Sie im obigen Codebeispiel sehen, kann dieselbe App sich selbst für mehrere Protokolle registrieren.

App-Updates und Handler-Registrierung

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 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.

  1. 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 als Handler für das web+coffee-Protokoll beim Betriebssystem registriert.
  2. 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 entweder auf den ersten oder den zweiten (Latte Macchiato oder Americano). Im Browser wird nun eine Eingabeaufforderung angezeigt und Sie werden gefragt, ob die Anwendung ein Protokoll-Handler für das web+coffee-Protokoll sein darf. Wenn Sie zustimmen, wird die PWA geöffnet und der ausgewählte Kaffee angezeigt.
  3. Für einen Vergleich mit dem herkömmlichen Ablauf, bei dem navigator.registerProtocolHandler() verwendet wird, klicken Sie in der PWA auf die Schaltfläche Protokoll-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.
  4. 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. Genauso 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 in keiner Weise im Web sichtbar und kann daher nicht als Fingerabdruckvektor verwendet werden.

Nicht vom Nutzer initiierte Navigationsversuche

Nicht vom Nutzer initiierte, aber programmatische Navigationsversuche können dazu führen, dass keine Apps geöffnet werden. Die benutzerdefinierte Protokoll-URL darf nur in Browserkontexten der obersten Ebene verwendet werden, nicht z. B. als URL eines Iframes.

Zulassungsliste für Protokolle

Wie bei registerProtocolHandler() gibt es eine Zulassungsliste mit Protokollen, die Anwendungen für die Verarbeitung registrieren können.

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 Protokoll-Handlers aufzuheben, muss der Nutzer die PWA deinstallieren, über die er registriert wurde. 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 zur Umsetzung 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

Hast du einen Fehler bei der Implementierung von Chromium 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.

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