PWAs als URL-Handler

Sie können installierte PWAs URLs zuweisen, um die Nutzung zu vereinfachen.

Thomas Steiner

Was sind PWAs als URL-Handler?

Angenommen, Sie chatten mit einem Freund über eine Instant-Messaging-Anwendung wie Messages auf macOS und sprechen über Musik. Stellen Sie sich außerdem vor, Sie haben beide die PWA music.example.com auf Ihren Geräten installiert. Wenn du deinen Lieblingstitel mit einem Freund teilen möchtest, kannst du ihm einen Deeplink wie https://music.example.com/rick-astley/never-gonna-give-you-up senden. Da dieser Link ziemlich lang ist, haben sich die Entwickler von music.example.com möglicherweise entschieden, jedem Titel einen zusätzlichen kurzen Link hinzuzufügen, z. B. https://🎵.example.com/r-a/n-g-g-y-u.

Mit PWAs als URL-Handler können sich Apps wie music.example.com als URL-Handler für URLs registrieren, die Mustern wie https://music.example.com, https://*.music.example.com oder https://🎵.example.com entsprechen. So werden Links von außerhalb der PWA, z. B. von einer Instant-Messenger-Anwendung oder einem E-Mail-Client, in der installierten PWA und nicht in einem Browsertab geöffnet.

PWA als URL-Handler besteht aus zwei Ergänzungen:

  1. Das Manifest-Element "url_handlers" der Webanwendung.
  2. Das Dateiformat web-app-origin-association zum Validieren von URL-Zuordnungen, die in den Geltungsbereich fallen oder nicht.

Anwendungsfälle für PWAs als URL-Handler

Beispiele für Websites, die diese API verwenden können:

  • Musik- oder Videostreaming-Websites, damit Links zu Titeln oder Playlists im Player der App geöffnet werden.
  • In Nachrichten- oder RSS-Readern werden Websites, die Sie abonniert haben oder denen Sie folgen, im Lesemodus der App geöffnet.

PWAs als URL-Handler verwenden

Aktivierung über „about://flags“

Wenn Sie PWAs lokal als URL-Handler ohne Ursprungstesttoken testen möchten, aktivieren Sie das Flag #enable-desktop-pwas-url-handling in about://flags.

Das Manifest-Element "url_handlers" der Webanwendung

Wenn Sie eine installierte PWA mit URL-Mustern verknüpfen möchten, müssen diese Muster im Manifest der Webanwendung angegeben werden. Das geschieht über das Mitglied "url_handlers". Sie akzeptiert ein Array von Objekten mit der Eigenschaft origin, bei der es sich um eine erforderliche string handelt, die ein Muster für übereinstimmende Ursprünge ist. Diese Muster dürfen ein Platzhalterpräfix (*) haben, um mehrere Subdomains (z. B. https://*.example.com) einzuschließen. URLs, die mit diesen Ursprüngen übereinstimmen, können von dieser Webanwendung verarbeitet werden. Das Schema wird immer als https:// vorausgesetzt, muss aber ausdrücklich erwähnt werden.

Im folgenden Auszug aus einem Web-App-Manifest wird gezeigt, wie dies für die Musik-PWA aus dem einleitenden Absatz eingerichtet werden könnte. Der zweite Eintrag mit dem Platzhalter ("https://*.music.example.com") sorgt dafür, dass die App auch für https://www.music.example.com oder andere Beispiele wie https://marketing-activity.music.example.com aktiviert wird.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

Datei web-app-origin-association

Da sich die PWA an einem anderen Ursprung (music.example.com) befindet als einige der URLs, die sie verarbeiten muss (z.B. https://🎵.example.com), muss die App die Inhaberschaft dieser anderen Ursprünge bestätigen. Das geschieht in einer web-app-origin-association-Datei, die auf den anderen Ursprüngen gehostet wird.

Diese Datei muss gültiges JSON enthalten. Die oberste Struktur ist ein Objekt mit einem Mitglied namens "web_apps". Dieses Mitglied ist ein Array von Objekten. Jedes Objekt stellt einen Eintrag für eine eindeutige Webanwendung dar. Jedes Objekt enthält:

Feld Beschreibung Typ Standard
"manifest" (Erforderlich) URL-String des Web-App-Manifests der verknüpften PWA string –
"details" Optional: Ein Objekt mit Arrays von ein- und ausgeschlossenen URL-Mustern object –

Jedes "details"-Objekt enthält:

Feld Beschreibung Typ Standard
"paths" (Optional) Array zulässiger Pfadstrings string[] []
"exclude_paths" (Optional) Array unzulässiger Pfadstrings string[] []

Unten finden Sie eine Beispiel-web-app-origin-association-Datei für die Musik-PWA aus dem Beispiel oben. Sie wird am Ursprung 🎵.example.com gehostet und stellt die Verknüpfung mit der PWA music.example.com her, die durch ihre Manifest-URL der Web-App identifiziert wird.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Wann stimmt eine URL überein?

Eine PWA wird für die Verarbeitung mit einer URL abgeglichen, wenn beide der folgenden Bedingungen erfüllt sind:

  • Die URL stimmt mit einem der Ursprungsstrings in "url_handlers" überein.
  • Der Browser kann über die entsprechende web-app-origin-association-Datei prüfen, ob jeder Ursprung zustimmt, dass diese App eine solche URL verarbeitet.

web-app-origin-association-Dateien

Damit der Browser die web-app-origin-association-Datei erkennt, müssen Entwickler sie im Stammverzeichnis der App im Ordner /.well-known/ ablegen. Der Dateiname muss dabei genau web-app-origin-association lauten.web-app-origin-association

Demo

Wenn Sie PWAs als URL-Handler testen möchten, müssen Sie das Browser-Flag wie oben beschrieben festlegen und dann die PWA unter https://mandymsft.github.io/pwa/ installieren. Im Manifest der Webanwendung sehen Sie, dass URLs mit den folgenden URL-Mustern verarbeitet werden: https://mandymsft.github.io und https://luhuangmsft.github.io. Da der zweite Ursprung einen anderen Ursprung hat (luhuangmsft.github.io) als die PWA, muss die PWA unter mandymsft.github.io die Inhaberschaft nachweisen. Dies geschieht über die web-app-origin-association-Datei, die unter https://luhuangmsft.github.io/.well-known/web-app-origin-association gehostet wird.

Um zu testen, ob es funktioniert, senden Sie sich selbst eine Testnachricht mit einer Instant Messaging-App Ihrer Wahl oder einer E-Mail, die in einem nicht webbasierten E-Mail-Client wie Mail unter macOS aufgerufen wird. Die E-Mail oder SMS muss entweder die Links https://mandymsft.github.io oder https://luhuangmsft.github.io enthalten. Beide sollten in der installierten PWA geöffnet werden.

Die Windows-Skype-Instant-Messenger-App neben der installierten Demo-PWA, die im eigenständigen Modus geöffnet wird, nachdem in einer Skype-Chatnachricht auf einen von ihr verarbeiteten Link geklickt wurde.

Sicherheit und Berechtigungen

Das Chromium-Team hat PWAs als URL-Handler entwickelt und implementiert. Dabei wurden die in Controlling Access to Powerful Web Platform Features (Zugriff auf leistungsstarke Funktionen der Webplattform steuern) definierten Grundprinzipien berücksichtigt, darunter Nutzerkontrolle, Transparenz und Ergonomie.

Nutzersteuerung

Wenn mehr als eine PWA als URL-Handler für ein bestimmtes URL-Muster registriert ist, wird der Nutzer aufgefordert, auszuwählen, mit welcher PWA das Muster verarbeitet werden soll (falls überhaupt). Navigationen, die auf einem Browsertab beginnen, werden von diesem Vorschlag nicht verarbeitet. Er richtet sich ausdrücklich an Navigationen, die außerhalb des Browsers beginnen.

Transparenz

Wenn die erforderliche Verknüpfungsbestätigung während der PWA-Installation aus irgendeinem Grund nicht erfolgreich abgeschlossen werden kann, registriert der Browser die App nicht als aktiven URL-Handler für die betroffenen URLs. Wenn URL-Handler nicht ordnungsgemäß implementiert sind, können sie dazu verwendet werden, den Traffic für Websites zu hacken. Aus diesem Grund ist der App-Verknüpfungsmechanismus ein wichtiger Bestandteil des Systems.

Plattformspezifische Anwendungen können bereits Betriebssystem-APIs verwenden, um installierte Anwendungen auf dem System des Nutzers aufzulisten. Anwendungen unter Windows können beispielsweise die FindAppUriHandlersAsync API verwenden, um URL-Handler aufzuzählen. Wenn PWAs in Windows als URL-Handler auf Betriebssystemebene registriert werden, sind sie für andere Anwendungen sichtbar.

Berechtigungsspeicherung

Ein Ursprung kann seine Verknüpfungen mit PWAs jederzeit ändern. Browser versuchen regelmäßig, die Verknüpfungen der installierten Web-Apps neu zu validieren. Wenn die erneute Validierung einer URL-Handler-Registrierung fehlschlägt, weil sich die Verknüpfungsdaten geändert haben oder nicht mehr verfügbar sind, entfernt der Browser die Registrierungen.

Feedback

Das Chromium-Team möchte von Ihnen wissen, wie Sie die PWAs als URL-Handler erlebt haben.

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie für die 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

Hast du einen Fehler bei der Implementierung von Chromium gefunden? Oder weicht die Implementierung von der Spezifikation ab? 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, PWAs als URL-Handler zu verwenden? Ihre öffentliche Unterstützung hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #URLHandlers und teilen Sie uns mit, wo und wie Sie ihn verwenden.

Nützliche Links

Danksagungen

PWAs als URL-Handler wurden von Lu Huang und Mandy Chen vom Microsoft Edge-Team definiert und implementiert. Dieser Artikel wurde von Joe Medley überprüft. Hero-Image von Bryson Hammer auf Unsplash