PWAs als URL-Handler

Installierte PWAs können 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 über eine Instant-Messaging-App wie Messages unter macOS und unterhalten sich über Musik. Angenommen, Sie haben beide die music.example.com-PWA auf Ihren Geräten installiert. Wenn du einen deiner Lieblingstracks 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 die Entwickler von music.example.com möglicherweise einen zusätzlichen Kurzlink zu jedem Track hinzugefügt, 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 mit Mustern wie https://music.example.com, https://*.music.example.com oder https://🎵.example.com übereinstimmen. Links von außerhalb der PWA, z. B. aus einer Instant-Messaging-Anwendung oder einem E-Mail-Client, werden dann in der installierten PWA und nicht in einem Browser-Tab geöffnet.

Die Funktion „PWA als URL-Handler“ besteht aus zwei Ergänzungen:

1. Das "url_handlers"-Element des Web-App-Manifests.
2. Das web-app-origin-association-Dateiformat zum Validieren von URL-Zuordnungen innerhalb und außerhalb des Geltungsbereichs.

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

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

• Musik- oder Videostreaming-Websites, damit Track- oder Playlist-Links im Player der App geöffnet werden.
• News- oder RSS-Reader, in denen Sie Websites folgen oder abonnieren, werden im Lesemodus der App geöffnet.

PWAs als URL-Handler verwenden

Aktivierung über about://flags

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

Das "url_handlers"-Element des Web-App-Manifests

Damit eine installierte PWA mit URL-Mustern verknüpft werden kann, müssen diese Muster im Web-App-Manifest angegeben werden. Dies geschieht über das "url_handlers"-Element. Es akzeptiert ein Array von Objekten mit der Eigenschaft origin, die ein erforderliches string ist, das ein Muster für den Abgleich von Ursprüngen darstellt. 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 Web-App verarbeitet werden. Das Schema wird immer als https:// angenommen, muss aber explizit angegeben werden.

Der Auszug aus einem Web-App-Manifest unten zeigt, wie das Musik-PWA-Beispiel aus dem Einleitungsabsatz 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 auf 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. Dies geschieht in einer web-app-origin-association-Datei, die auf den anderen Ursprüngen gehostet wird.

Diese Datei muss gültiges JSON enthalten. Die Struktur der obersten Ebene ist ein Objekt mit dem Mitglied "web_apps". Dieses Element ist ein Array von Objekten. Jedes Objekt steht für einen Eintrag für eine eindeutige Web-App und enthält Folgendes:

Jedes "details"-Objekt enthält:

Unten sehen Sie ein Beispiel für eine web-app-origin-association-Datei für das oben genannte Musik-PWA-Beispiel. Sie wird am Ursprung 🎵.example.com gehostet und stellt die Verknüpfung mit der music.example.com-PWA her, die durch ihre Web-App-Manifest-URL 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 beide der folgenden Bedingungen erfüllt sind:

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

Erkennung von web-app-origin-association-Dateien

Damit der Browser die Datei web-app-origin-association findet, müssen Entwickler sie im Ordner /.well-known/ im Stammverzeichnis der App platzieren. Der Dateiname muss 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 die PWA dann unter https://mandymsft.github.io/pwa/ installieren. Wenn Sie sich das Web-App-Manifest ansehen, können Sie erkennen, dass URLs mit den folgenden URL-Mustern verarbeitet werden: https://mandymsft.github.io und https://luhuangmsft.github.io. Da der Ursprung des letzteren (luhuangmsft.github.io) sich von dem der PWA unterscheidet, 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 über eine Instant-Messaging-App Ihrer Wahl oder eine E‑Mail, die in einem nicht webbasierten E‑Mail-Client wie Mail unter macOS angezeigt wird. Die E‑Mail oder SMS sollte einen der Links https://mandymsft.github.io oder https://luhuangmsft.github.io enthalten. Beide sollten in der installierten PWA geöffnet werden.

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 Webplattformfunktionen steuern) definierten Grundsätze berücksichtigt, darunter Nutzerkontrolle, Transparenz und Ergonomie.

Kontrolle durch Nutzer

Wenn sich mehr als eine PWA als URL-Handler für ein bestimmtes URL-Muster registriert, wird der Nutzer aufgefordert, auszuwählen, mit welcher PWA das Muster verarbeitet werden soll – falls überhaupt. Navigationen, die auf einem Browser-Tab gestartet werden, werden von diesem Vorschlag nicht berücksichtigt. Er zielt explizit auf Navigationen ab, die außerhalb des Browsers gestartet werden.

Transparenz

Wenn die erforderliche Validierung der Verknüpfung während der PWA-Installation aus irgendeinem Grund nicht abgeschlossen werden kann, registriert der Browser die App nicht als aktiven URL-Handler für die betroffenen URLs. URL-Handler können bei unsachgemäßer Implementierung verwendet werden, um Traffic für Websites zu stehlen. Aus diesem Grund ist der Mechanismus zur Verknüpfung von Apps ein wichtiger Bestandteil des Schemas.

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 aufzulisten. Wenn PWAs als URL-Handler auf Betriebssystemebene in Windows registriert werden, ist ihre Präsenz für andere Anwendungen sichtbar.

Beibehalten von Berechtigungen

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

Feedback

Das Chromium-Team möchte wissen, wie Ihre Erfahrungen mit PWAs als URL-Handler sind.

Informationen zum API-Design

Funktioniert etwas an der API nicht wie erwartet? 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, 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 die Funktion verwenden.

Nützliche Links

• Öffentliche Erläuterung
• Demo | Demoquelle
• Chromium-Tracking-Fehler
• ChromeStatus.com-Eintrag
• Blink-Komponente: UI>Browser>WebAppInstalls
• TAG-Überprüfung
• Microsoft-Dokumentation

Danksagungen

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