PWAs als URL-Handler

Lassen Sie installierte PWAs URLs verarbeiten, um eine bessere Integration zu ermöglichen.

Thomas Steiner

Was sind PWAs als URL-Handler?

Stellen Sie sich vor, Sie chatten mit einem Freund, der eine Instant Messenger-Anwendung wie Messages unter macOS verwendet, und Sie sprechen über Musik. Stellen Sie sich vor, Sie haben beide die PWA music.example.com auf Ihren Geräten installiert. Wenn Sie Ihren Lieblingssong mit Freunden teilen möchten, können Sie ihnen einen Deeplink wie https://music.example.com/rick-astley/never-gonna-give-you-up senden. Da dieser Link ziemlich lang ist, haben die Entwickler von music.example.com möglicherweise beschlossen, jedem Track einen zusätzlichen Kurzlink hinzuzufügen, z. B. https://🎵.example.com/r-a/n-g-g-y-u.

Mit PWA als URL-Handler können sich Apps wie music.example.com als URL-Handler für URLs registrieren, die mit Mustern wie https://music.example.com, https://*.music.example.com oder https://🎵.example.com übereinstimmen. 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.

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

  1. Manifest-Mitglied der Web-App "url_handlers"
  2. Das Dateiformat web-app-origin-association zum Validieren von URL-Verknüpfungen, die innerhalb und außerhalb des Geltungsbereichs liegen.

Empfohlene Anwendungsfälle für PWAs als URL-Handler

Beispiele für Websites, die diese API möglicherweise verwenden:

  • Musik- oder Videostreamingwebsites, sodass Titel- oder Playlist-Links im Player der App geöffnet werden.
  • Nachrichten- oder RSS-Reader, denen Websites gefolgt oder abonniert wurden, werden im Lesemodus der App geöffnet.

PWAs als URL-Handler verwenden

Aktivierung über about://flags

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

Manifest-Mitglied der Web-App "url_handlers"

Um eine installierte PWA mit URL-Mustern zu verknüpfen, müssen diese Muster im Manifest der Web-App angegeben werden. Dies geschieht über das "url_handlers"-Mitglied. Sie akzeptiert ein Array von Objekten mit einer origin-Eigenschaft. Dabei handelt es sich um eine erforderliche string, die ein Muster für den Abgleich von Ursprüngen ist. Diese Muster dürfen ein Platzhalterpräfix (*) haben, um mehrere Subdomains wie https://*.example.com einzuschließen. URLs, die mit diesen Ursprüngen übereinstimmen, können von dieser Webanwendung verarbeitet werden. Es wird immer davon ausgegangen, dass das Schema https:// ist, aber es muss explizit erwähnt werden.

Der folgende Auszug aus einem Web-App-Manifest zeigt, wie das Beispiel für die Musik-PWA aus dem einleitenden Absatz aussehen könnte. Durch den zweiten Eintrag mit dem Platzhalter ("https://*.music.example.com") wird die Anwendung auch für https://www.music.example.com oder potenzielle andere Beispiele wie https://marketing-activity.music.example.com aktiviert.

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

Datei web-app-origin-association

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

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

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

Jedes "details"-Objekt enthält Folgendes:

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

Unten sehen Sie eine web-app-origin-association-Beispieldatei für die Musik-PWA von 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 stimmt mit einer URL für die Verarbeitung überein, wenn die beiden 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 verarbeiten darf.

In Bezug auf die Erkennung von web-app-origin-association-Dateien

Damit der Browser die web-app-origin-association-Datei erkennt, müssen Entwickler die web-app-origin-association-Datei im Ordner /.well-known/ im Stammverzeichnis der Anwendung ablegen. Dazu muss der Dateiname genau web-app-origin-association sein.

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 Web-App sehen Sie, dass URLs mit den folgenden URL-Mustern verarbeitet werden: https://mandymsft.github.io und https://luhuangmsft.github.io. Da die PWA von einem anderen Ursprung (luhuangmsft.github.io) als die PWA stammt, muss die PWA auf mandymsft.github.io die Inhaberschaft nachweisen. Dies erfolgt über die Datei web-app-origin-association, 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 Textnachricht sollte einen der Links https://mandymsft.github.io oder https://luhuangmsft.github.io enthalten. Beide sollten in der installierten PWA geöffnet werden.

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

Sicherheit und Berechtigungen

Das Chromium-Team hat PWAs als URL-Handler anhand der grundlegenden Prinzipien entwickelt und implementiert, die unter Zugriff auf leistungsstarke Webplattformfunktionen steuern definiert wurden, darunter Nutzersteuerung, Transparenz und Ergonomie.

Nutzersteuerung

Wenn sich mehrere PWAs als URL-Handler für ein bestimmtes URL-Muster registrieren, wird der Nutzer aufgefordert, auszuwählen, mit welcher PWA das Muster verarbeitet werden soll – wenn überhaupt. Navigationen, die in einem Browsertab starten, werden von diesem Vorschlag nicht unterstützt. Sie sind explizit auf Navigationen ausgerichtet, die außerhalb des Browsers beginnen.

Transparenz

Wenn die erforderliche Verknüpfungsvalidierung während der Installation der PWA nicht erfolgreich abgeschlossen werden kann, wird die App im Browser nicht als aktiver URL-Handler für die betroffenen URLs registriert. Wenn URL-Handler nicht richtig implementiert werden, können sie verwendet werden, um Traffic für Websites zu hacken. Aus diesem Grund ist der Mechanismus der App-Verknüpfung ein wichtiger Teil des Schemas.

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

Berechtigungspersistenz

Die Verknüpfungen mit PWAs können von einem Ursprung jederzeit geändert werden. Browser versuchen regelmäßig, die Verknüpfungen installierter Web-Apps neu zu validieren. Wenn eine URL-Handler-Registrierung nicht neu validiert werden kann, 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 mehr über Ihre Erfahrungen mit PWAs als URL-Handler erfahren.

Informationen zum API-Design

Gibt es etwas an der API, das nicht so funktioniert, wie Sie es erwartet hatten? Oder fehlen Methoden oder Eigenschaften, um Ihre Idee zu implementieren? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Sie können ein Spezifikationsproblem im entsprechenden GitHub-Repository melden oder Ihre Gedanken zu einem vorhandenen Problem hinzufügen.

Problem mit der Implementierung melden

Haben Sie einen Fehler bei der Implementierung von Chromium gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Melden Sie einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Geben Sie UI>Browser>WebAppInstalls in das Feld Komponenten ein. Glitch eignet sich perfekt, um schnelle und einfache Reproduzierungen zu teilen.

Unterstützung für die API zeigen

Möchten Sie PWAs als URL-Handler 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 mit dem Hashtag #URLHandlers an @ChromiumDev und teilen Sie uns mit, wo und wie Sie das Tool verwenden.

Nützliche Links

Danksagungen

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