PWA's als URL-handlers

Laat geïnstalleerde PWA's URL's verwerken voor een meer geïntegreerde ervaring.

Thomas Steiner

Wat zijn PWA's als URL-handlers?

Stel je voor dat je met een vriend chat via een instant messenger-applicatie zoals Berichten op macOS en je hebt het over muziek. Stel je vervolgens voor dat jullie beiden de music.example.com PWA op jullie apparaten hebben geïnstalleerd. Als je je favoriete nummer met je vriend wilt delen, kun je hem of haar een deeplink sturen, zoals https://music.example.com/rick-astley/never-gonna-give-you-up . Omdat deze link vrij lang is, hebben de ontwikkelaars van music.example.com er mogelijk voor gekozen om een ​​extra korte link aan elk nummer toe te voegen, zoals bijvoorbeeld https://🎵.example.com/ra/nggyu .

Met PWA's als URL-handlers kunnen apps zoals music.example.com zich registreren als URL-handlers voor URL's die overeenkomen met patronen zoals https://music.example.com , https://*.music.example.com of https://🎵.example.com . Hierdoor worden links van buiten de PWA, bijvoorbeeld van een instant messenger-applicatie of een e-mailclient, geopend in de geïnstalleerde PWA in plaats van in een browsertabblad.

PWA als URL-handler bestaat uit twee toevoegingen:

1. Het manifestlid van de web-app "url_handlers" .
2. Het web-app-origin-association bestandsformaat voor het valideren van URL-koppelingen die binnen en buiten het bereik vallen.

Voorgestelde gebruiksscenario's voor PWA's als URL-handlers

Voorbeelden van sites die deze API kunnen gebruiken zijn:

• Muziek- of videostreamingsites openen tracklinks of afspeellijstlinks in de spelerervaring van de app.
• Nieuws- of RSS-lezers, dus sites waarop u bent geabonneerd of die u volgt, openen in de leesmodus van de app.

Hoe u PWA's als URL-handlers kunt gebruiken

Inschakelen via about://flags

Als u lokaal wilt experimenteren met PWA's als URL-handlers, zonder een origin trial token, schakelt u de vlag #enable-desktop-pwas-url-handling in about://flags .

Het manifestlid van de web-app "url_handlers"

Om een ​​geïnstalleerde PWA aan URL-patronen te koppelen, moeten deze patronen worden gespecificeerd in het manifest van de webapp. Dit gebeurt via het lid "url_handlers" . Dit accepteert een array van objecten met een eigenschap origin , een verplichte string die een patroon vormt voor het matchen van oorsprongen. Deze patronen mogen een joker ( * ) als voorvoegsel hebben om meerdere subdomeinen op te nemen (zoals https://*.example.com ). URL's die overeenkomen met deze oorsprongen kunnen door deze webapp worden verwerkt. Er wordt altijd aangenomen dat het schema https:// is, maar dit moet expliciet worden vermeld.

Het onderstaande fragment van een webappmanifest laat zien hoe het muziek-PWA-voorbeeld uit de inleidende alinea dit zou kunnen instellen. De tweede vermelding met de wildcard ( "https://*.music.example.com" ) zorgt ervoor dat de app ook wordt geactiveerd voor https://www.music.example.com of andere voorbeelden zoals https://marketing-activity.music.example.com .

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

Het web-app-origin-association

Omdat de PWA zich op een andere bron bevindt ( music.example.com ) dan sommige van de URL's die hij moet verwerken (bijvoorbeeld https://🎵.example.com ), moet de app het eigendom van deze andere bronnen verifiëren. Dit gebeurt in een bestand web-app-origin-association dat op de andere bronnen wordt gehost.

Dit bestand moet geldige JSON bevatten. De structuur op het hoogste niveau is een object, met een lid genaamd "web_apps" . Dit lid is een array van objecten en elk object vertegenwoordigt een item voor een unieke web-app. Elk object bevat:

Elk "details" -object bevat:

Hieronder vindt u een voorbeeld van web-app-origin-association voor de hierboven genoemde muziek-PWA. Dit bestand wordt gehost op de oorsprong 🎵.example.com en brengt de koppeling tot stand met de music.example.com PWA, geïdentificeerd door de manifest-URL van de webapp.

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

Wanneer komt een URL overeen?

Een PWA komt overeen met een URL voor verwerking als aan beide volgende voorwaarden is voldaan:

• De URL komt overeen met een van de oorspronkelijke strings in "url_handlers" .
• De browser kan via het betreffende web-app-origin-association bestand valideren dat elke oorsprong ermee akkoord gaat dat deze app een dergelijke URL verwerkt.

Betreffende web-app-origin-association bestanden

Om de browser het bestand web-app-origin-association te laten detecteren, moeten ontwikkelaars het bestand web-app-origin-association in de map /.well-known/ in de root van de app plaatsen. Hiervoor moet de bestandsnaam exact web-app-origin-association zijn.

Demonstratie

Om PWA's als URL-handlers te testen, moet u de browservlag instellen zoals hierboven beschreven en vervolgens de PWA installeren op https://mandymsft.github.io/pwa/ . Door naar het manifest van de webapp te kijken, kunt u zien dat deze URL's verwerkt met de volgende URL-patronen: https://mandymsft.github.io en https://luhuangmsft.github.io . Omdat de laatste zich op een andere oorsprong ( luhuangmsft.github.io ) bevindt dan de PWA, moet de PWA op mandymsft.github.io het eigendom bewijzen. Dit gebeurt via het bestand web-app-origin-association dat gehost wordt op https://luhuangmsft.github.io/.well-known/web-app-origin-association .

Om te testen of het daadwerkelijk werkt, stuur je jezelf een testbericht via een instant messaging-app naar keuze of een e-mail die je bekijkt in een e-mailclient die niet webgebaseerd is, zoals Mail op macOS. De e-mail of sms moet een van de links https://mandymsft.github.io of https://luhuangmsft.github.io bevatten. Beide moeten geopend worden in de geïnstalleerde PWA.

Beveiliging en machtigingen

Het Chromium-team heeft PWA's ontworpen en geïmplementeerd als URL-handlers op basis van de kernprincipes die zijn gedefinieerd in Controlling Access to Powerful Web Platform Features , waaronder gebruikerscontrole, transparantie en ergonomie.

Gebruikerscontrole

Als er meer dan één PWA geregistreerd staat als URL-handler voor een bepaald URL-patroon, wordt de gebruiker gevraagd te kiezen met welke PWA hij het patroon wil afhandelen, indien van toepassing. Navigatie die start in een browsertabblad wordt niet afgehandeld door dit voorstel; het is expliciet gericht op navigatie die buiten de browser start.

Transparantie

Als de benodigde validatie van de koppeling tijdens de PWA-installatie om welke reden dan ook niet succesvol kan worden voltooid, registreert de browser de app niet als actieve URL-handler voor de betreffende URL's. URL-handlers die niet correct zijn geïmplementeerd, kunnen worden gebruikt om verkeer voor websites te kapen. Daarom is het koppelingsmechanisme voor apps een belangrijk onderdeel van het systeem.

Platformspecifieke applicaties kunnen al API's van het besturingssysteem gebruiken om geïnstalleerde applicaties op het systeem van de gebruiker te inventariseren. Applicaties op Windows kunnen bijvoorbeeld de FindAppUriHandlersAsync API gebruiken om URL-handlers te inventariseren. Als PWA's zich registreren als URL-handlers op besturingssysteemniveau in Windows, is hun aanwezigheid zichtbaar voor andere applicaties.

Permissiepersistentie

Een oorsprong kan de koppelingen met PWA's op elk moment wijzigen. Browsers proberen regelmatig de koppelingen van geïnstalleerde webapps opnieuw te valideren. Als een URL-handlerregistratie niet opnieuw kan worden gevalideerd omdat de koppelingsgegevens zijn gewijzigd of niet meer beschikbaar zijn, verwijdert de browser de registraties.

Feedback

Het Chromium-team wil graag uw ervaringen met de PWA's als URL-handlers horen.

Vertel ons over het API-ontwerp

Werkt er iets aan de API dat niet werkt zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heb je een vraag of opmerking over het beveiligingsmodel? Dien een spec-issue in op de betreffende GitHub-repository of voeg je mening toe aan een bestaand issue.

Meld een probleem met de implementatie

Heb je een bug gevonden in de implementatie van Chromium? Of wijkt de implementatie af van de specificatie? Meld een bug op new.crbug.com . Zorg ervoor dat je zoveel mogelijk details opgeeft, eenvoudige instructies voor het reproduceren, en voer UI>Browser>WebAppInstalls in het vak Componenten in.

Toon ondersteuning voor de API

Bent u van plan PWA's als URL-handlers te gebruiken? Uw publieke steun helpt het Chromium-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Stuur een tweet naar @ChromiumDev met de hashtag #URLHandlers en laat ons weten waar en hoe je deze gebruikt.

Nuttige links

• Publieke uitleg
• Demo | Demobron
• Chromium-trackingbug
• ChromeStatus.com-vermelding
• Blink-component: UI>Browser>WebAppInstalls
• TAG-recensie
• Microsoft-documentatie

Dankbetuigingen

PWA's als URL-handlers zijn gespecificeerd en geïmplementeerd door Lu Huang en Mandy Chen van het Microsoft Edge-team. Dit artikel is beoordeeld door Joe Medley . Hero-afbeelding van Bryson Hammer op Unsplash .