Diese Seite wurde von der Cloud Translation API übersetzt.

Registrierung des URL-Protokoll-Handlers für PWAs

Installierte PWAs können Links mit einem bestimmten Protokoll verarbeiten, um eine bessere Integration zu ermöglichen.

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 einem Schemanamen, der sich auf eine Spezifikation für die Zuweisung von Kennungen innerhalb dieses Schemas bezieht. Die URI-Syntax ist also ein föderiertes und erweiterbares Namenssystem, 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:[email protected]
news:comp.infosystems.www.servers.unix
https://web.dev/

Der Begriff Uniform Resource Locator (URL) bezieht sich auf die Teilmenge von URIs, die zusätzlich zur Identifizierung einer Ressource auch eine Möglichkeit bieten, die Ressource zu finden, indem ihr primärer Zugriffsmechanismus (z.B. ihr Netzwerkstandort) beschrieben wird.

Hintergrund zur `registerProtocolHandler()`-Methode

Mit der Methode „secure-content-only“ Navigator registerProtocolHandler() können Websites registrieren, dass 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 so definiert:

scheme: Ein String, der das Protokoll enthält, 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, 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 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/, die den folgenden Aufruf ausführt: 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 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.

Protokoll-Handler

Beim aktuellen Mechanismus zur Registrierung von URL-Protokoll-Handlern für PWAs geht es darum, die Registrierung von Protokoll-Handlern als Teil einer PWA-Installation über das Manifest anzubieten. Wenn eine PWA als Protokoll-Handler registriert ist und ein Nutzer in einem Browser oder einer plattformspezifischen App auf einen Hyperlink mit einem bestimmten Schema wie mailto, bitcoin oder web+music klickt, wird die registrierte PWA geöffnet und empfängt die URL. Sowohl die vorgeschlagene manifestbasierte Registrierung als auch die herkömmliche registerProtocolHandler() spielen in der Praxis eine sehr ähnliche Rolle, bieten aber dennoch die Möglichkeit für ergänzende Nutzererlebnisse:

Ähnlichkeiten bestehen unter anderem bei den Anforderungen an die Liste der Schemas, die registriert werden dürfen, sowie beim Namen und Format der Parameter.
Die Unterschiede bei der manifestbasierten Registrierung sind gering, können aber die Nutzerfreundlichkeit für PWA-Nutzer verbessern. Bei der manifestbasierten PWA-Registrierung ist beispielsweise möglicherweise keine zusätzliche Nutzeraktion erforderlich, abgesehen von der vom Nutzer initiierten Installation der PWA.

Anwendungsfälle

In einer Textverarbeitungs-PWA findet 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 das Deck 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 Musikstreaming-PWA automatisch in einem separaten 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. Diesmal werden die Informationen jedoch deklarativ über das Web-App-Manifest in einer neuen Eigenschaft namens "protocol_handlers" übergeben, die ein Array von Objekten mit den beiden erforderlichen Schlüsseln "protocol" und "url" akzeptiert. Das folgende Code-Snippet zeigt, wie Sie web+tea und web+coffee registrieren. 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 mehrere Anwendungen als Handler für dasselbe Schema registriert sind, 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

Dieselbe App kann sich für mehrere Protokolle registrieren, wie im obigen Codebeispiel zu sehen ist.

App-Updates und Handler-Registrierung

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

Wenn durch ein Update neue Handler hinzugefügt werden, wird die Handler-Registrierung ausgelöst (unabhängig von der App-Installation).
Durch ein Update, bei dem Handler entfernt werden, wird die Registrierung der Handler aufgehoben (unabhängig von der Deinstallation der App).

Protokoll-Handler in den Entwicklertools debuggen

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

Installieren Sie beispielsweise diese Demo-PWA. Geben Sie im Bereich Protokollhandler „americano“ ein und klicken Sie auf Protokoll testen, um die Kaffeseite in der PWA zu öffnen.

Protokoll-Handler im Manifestbereich

Demo

Auf Glitch finden Sie eine Demo der Registrierung von URL-Protokoll-Handlern für PWAs.

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.
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 zweite Option (Latte macchiato oder Americano). Der Browser zeigt nun eine Aufforderung an und fragt, ob Sie damit einverstanden sind, dass die App ein Protokollhandler für das web+coffee-Protokoll ist. 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 Register protocol handler (Protokollhandler registrieren). Klicken Sie dann im 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 eine Nachricht über eine plattformspezifische Anwendung wie Skype unter Windows mit einem Link wie <a href="web+coffee://americano">Americano</a> und klicken Sie darauf. Dadurch sollte die installierte PWA ebenfalls geöffnet werden.

Demo für URL-Protokoll-Handler mit Browser-Tab mit Links auf der linken Seite und eigenständigem PWA-Fenster auf der rechten Seite.

Sicherheitsaspekte

Da für die Installation von PWAs ein sicherer Kontext erforderlich ist, gilt diese Einschränkung auch für die Protokollverarbeitung. Die Liste der registrierten Protokoll-Handler wird nicht im Web verfügbar gemacht und kann daher nicht als Fingerprinting-Vektor verwendet werden.

Navigationsversuche, die nicht vom Nutzer initiiert wurden

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

Zulassungsliste von Protokollen

Genau wie bei registerProtocolHandler() gibt es eine Zulassungsliste von Protokollen, die Apps registrieren können, um sie zu verarbeiten.

Einwilligungsaufforderung

Beim ersten Start der PWA aufgrund eines aufgerufenen Protokolls wird dem Nutzer ein Berechtigungsdialogfeld angezeigt. In diesem Dialogfeld werden der App-Name und die Herkunft der App angezeigt. Der Nutzer wird 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 Protokollhandlers aufzuheben, muss der Nutzer die PWA deinstallieren, mit der er registriert wurde. Der Browser hebt die Registrierung des Protokoll-Handlers auch auf, wenn der Nutzer „Meine Auswahl speichern“ und „Nicht zulassen“ auswählt.

Feedback

Das Chromium-Team möchte wissen, wie Ihre Erfahrungen mit der Registrierung von URL-Protokoll-Handlern für PWAs sind.

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 Registrierung von URL-Protokoll-Handlern für PWAs zu verwenden? Ihr öffentlicher Support 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 die API verwenden möchten. Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #ProtocolHandler und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Nützliche Links

Danksagungen

Die Registrierung von URL-Protokoll-Handlern 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.