Registrierung des URL-Protokoll-Handlers für PWAs

Links, die ein bestimmtes Protokoll verwenden, lassen sich für installierte PWAs verarbeiten. Das sorgt für eine ganzheitlichere Integration.

Thomas Steiner

Hintergrundwissen zu Schemas (Protokolle)

Ein Uniform Resource Identifier (URI) ist eine kompakte Folge von Zeichen, die einen abstrakte oder physische Ressource. Jeder URI beginnt mit einem scheme-Name, der auf eine Spezifikation für die Zuweisung von Kennungen innerhalb dieses Schemas. Daher ist die URI-Syntax eine föderierte und erweiterbare Namenssystem genannt, bei dem die Spezifikation jedes Schemas die Syntax und Semantik eines bestimmten Kennzeichnungen mit diesem Schema. Schemas werden auch als Protokolle bezeichnet. Sie sehen einige Beispiele Schemas unten beschrieben.

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 zusätzlich zu eine Ressource identifizieren, eine Möglichkeit zum Auffinden der Ressource bieten, indem Sie ihren primären Zugriff beschreiben Mechanismus (z.B. Netzwerkstandort).

Hintergrundinformationen zur registerProtocolHandler()-Methode

Die Methode Navigator, die ausschließlich für sichere Inhalte gilt registerProtocolHandler() ermöglicht es Websites, ihre Fähigkeit zum Öffnen oder Verarbeiten bestimmter URL-Schemas zu registrieren. Daher müssen Websites rufen Sie die Methode so auf: navigator.registerProtocolHandler(scheme, url). Die beiden Parameter sind wie folgt 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 die durch die zu verarbeitende Escape-URL ersetzt wird.

Das Schema muss entweder eines der Schemas auf der Zulassungsliste (z. B. mailto, bitcoin oder magnet) oder beginnen Sie mit web+, gefolgt von mindestens einem oder weitere ASCII-Kleinbuchstaben 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 durchführt: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
  2. Beim Besuch von https://randomsite.example.com/ klickt der Nutzer später auf einen Link. z. B. <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
  3. Dadurch ruft der Browser die folgende URL auf: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato Die Suchanfrage wird der String URL-decodiert und dann wird ?type=web+coffee://latte-macchiato gelesen.

Worum geht es bei der Protokollverarbeitung?

Bei der Registrierung des URL-Protokoll-Handlers für PWAs geht es um die Bereitstellung von Protokoll-Handlern. im Rahmen einer PWA-Installation über ihr Manifest registriert. Nach der Registrierung einer PWA als Protokoll-Handler, wenn ein Nutzer auf einen Hyperlink mit einem bestimmten Schema wie mailto klickt , bitcoin oder web+music in einem Browser oder einer plattformspezifischen App aktiviert haben, wird die registrierte PWA geöffnet. und die URL abrufen. Es ist wichtig zu beachten, dass sowohl die vorgeschlagene Manifest-basierte Registrierung als spielen die traditionellen registerProtocolHandler() in der Praxis sehr ähnliche Rollen, Dies ermöglicht eine komplementäre User Experience:

  • Zu den Gemeinsamkeiten gehören Anforderungen bezüglich der Liste der Systeme, die registriert werden dürfen, sowie die Name und Format von Parametern usw.
  • Die auf Manifest basierende Registrierung unterscheidet sich nur geringfügig, doch sie könnten nützlich sein, für PWA-Nutzer. Für die Manifest-basierte PWA-Registrierung ist beispielsweise möglicherweise kein zusätzliche Nutzeraktion abgesehen von der vom Nutzer initiierten Installation der PWA.

Anwendungsfälle

  • In einer Textverarbeitungs-PWA stößt der Nutzer in einem Dokument auf einen Link zu einer Präsentation, z. B. web+presentations://deck2378465 Wenn der Nutzer auf den Link klickt, wird die PWA der Präsentation automatisch im richtigen Umfang geöffnet und die Präsentation angezeigt wird.
  • 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 Musikstreaming-PWA installiert. Wenn ein Freund einen Link zu einem Lied teilt, das dir gefällt web+music://songid=1234&time=0:13 und wenn der Nutzer darauf klickt, wird die Musikstreaming-PWA automatisch automatisch in einem eigenständigen Fenster geöffnet.

Registrierung der URL-Protokoll-Handler für PWAs

Das API für die Registrierung von URL-Protokoll-Handlern ist nah an der navigator.registerProtocolHandler() Genau dieses Mal werden die Informationen deklarativ über das Web-App-Manifest in der neuen Property "protocol_handlers" mit einem Array von -Objekte mit den beiden erforderlichen Schlüsseln "protocol" und "url". Das folgende Code-Snippet zeigt, Registrieren Sie web+tea und web+coffee. Die Werte sind Zeichenfolgen, die die URL des Handlers mit Den erforderlichen %s-Platzhalter für die maskierte URL

{
  "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. mailto-Protokoll enthält, zeigt das Betriebssystem dem Nutzer eine Auswahl an und überlässt ihm registrierte Handler.

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

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

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

Protokoll-Handler-Debugging in den Entwicklertools

Gehen Sie zum Abschnitt Protokoll-Handler über Application > Bereich Manifest. Sie können Hier können Sie sich alle verfügbaren Protokolle ansehen und sie testen.

Installieren Sie beispielsweise diese Demo-PWA. Im Protocol Handlers auf, geben Sie "americano" ein. und klicken Sie auf Protokoll testen, um die Kaffeeseite zu öffnen. in der PWA an.

Protokoll-Handler im Bereich „Manifest“

Demo

Sie können sich in Glitch eine Demo zur Registrierung des URL-Protokoll-Handlers für PWAs ansehen.

  1. Rufen Sie https://protocol-handler.glitch.me/ auf und installieren Sie den PWA und laden Sie die App nach der Installation neu. Der Browser hat die PWA jetzt als Handler für das web+coffee-Protokoll mit dem Betriebssystem.
  2. Klicken Sie im Fenster der installierten PWA auf den Link. https://protocol-handler-link.glitch.me/. Dadurch wird einen neuen Browsertab mit drei Links öffnen. Klicken Sie auf das erste oder das zweite (Latte Macchiato oder americano). Der Browser zeigt Ihnen nun eine Aufforderung an und fragt, ob Sie damit einverstanden sind, dass die App ein Protokoll-Handler für das web+coffee-Protokoll. Wenn Sie zustimmen, wird die PWA geöffnet und Kaffee ausgewählt.
  3. Klicken Sie zum Vergleichen mit dem herkömmlichen Workflow, bei dem navigator.registerProtocolHandler() verwendet wird, auf auf die Schaltfläche Protokoll-Handler registrieren in der PWA. Klicken Sie dann im Browsertab auf den dritten Link (Chai). In diesem Fall wird zwar eine Eingabeaufforderung angezeigt, aber dann wird die PWA in einem Tab und nicht in einem Browserfenster geöffnet.
  4. 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. Genauso sollte das Dialogfeld PWA installiert haben.

Demo zum URL-Protokoll-Handler mit einem Browsertab mit Links auf der linken und einem eigenständigen PWA-Fenster auf der rechten Seite.

Sicherheitsaspekte

Da der Kontext bei der PWA-Installation sicher sein muss, wird bei der Protokollverarbeitung Folgendes übernommen: Einschränkung. Die Liste der registrierten Protokoll-Handler ist in keiner Weise im Web sichtbar, kann nicht als Fingerabdruckvektor verwendet werden.

Nicht vom Nutzer initiierte Navigationsversuche

Navigationsversuche, die nicht vom Nutzer initiiert, aber programmatisch sind, werden möglicherweise nicht geöffnet Apps. Die benutzerdefinierte Protokoll-URL darf nur in Browserkontexten der obersten Ebene verwendet werden, beispielsweise nicht als URL eines iFrames an.

Zulassungsliste mit Protokollen

Genau wie bei registerProtocolHandler() gibt es eine Zulassungsliste mit Protokollen, die von Apps registriert werden können die Sie verarbeiten können.

Beim ersten Start der PWA aufgrund eines aufgerufenen Protokolls wird dem Nutzer eine Berechtigungsdialogfeld. In diesem Dialogfeld werden der App-Name und der Ursprung der App angezeigt. Der Nutzer wird gefragt, ob darf die App Links aus dem Protokoll verarbeiten. Wenn ein Nutzer das Berechtigungsdialogfeld ablehnt, registrierter Protokoll-Handler vom Betriebssystem ignoriert. So heben Sie die Registrierung des Protokolls auf: muss der Nutzer die PWA deinstallieren, über die sie registriert wurde. Der Browser hebt die Registrierung Den Protokoll-Handler, wenn der Nutzer "Meine Auswahl speichern" auswählt. und wählt "Disallow" aus.

Feedback

Das Chromium-Team möchte mehr über Ihre Erfahrungen mit der Registrierung des URL-Protokoll-Handlers für PWAs.

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? Fragen oder Kommentare zur Sicherheit haben Modell? Reichen Sie ein Spezifikationsproblem im entsprechenden GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem Problem zu beheben.

Problem mit der Implementierung melden

Hast du einen Fehler bei der Implementierung von Chromium gefunden? Oder weicht die Implementierung von der Spezifikation ab? Melde einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich an, einfache Anweisungen zur Reproduktion und gib UI>Browser>WebAppInstalls in das Feld Komponenten ein. . Glitch eignet sich hervorragend, um schnelle und einfache Reproduktionen zu teilen.

Unterstützung für die API anzeigen

Möchten Sie die Registrierung der URL-Protokoll-Handler für PWAs verwenden? Ihre öffentliche Unterstützung hilft Das Chromium-Team priorisiert Funktionen und zeigt anderen Browseranbietern, wie wichtig der Support ist .

Im WICG Discourse-Thread können Sie uns mitteilen, wie Sie den Dienst verwenden möchten. Tweet senden an @ChromiumDev mit dem Hashtag #ProtocolHandler und teilen Sie uns mit, wo und wie Sie sie nutzen.

Danksagungen

Die Registrierung des URL-Protokoll-Handlers für PWAs wurde implementiert und angegeben durch Fabio Rocha Diego González, Connor Moody und Samuel Tang vom Microsoft Edge-Team Dieser Artikel wurde von Joe Medley und Fabio Rocha bewertet. Hero-Image von JJ Ying auf Unsplash