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 aan het chatten bent via een instant messenger-applicatie zoals Berichten op macOS en dat je het over muziek hebt. Stel je verder voor dat jullie allebei de music.example.com PWA op jullie apparaten hebben geïnstalleerd. Als je je favoriete nummer wilt delen zodat je vriend ervan kan genieten, kun je hem of haar een deep link sturen, zoals https://music.example.com/rick-astley/never-gonna-give-you-up . Omdat deze link behoorlijk lang is, hebben de ontwikkelaars van music.example.com mogelijk besloten om aan elke track een extra korte link toe te voegen, zoals bijvoorbeeld https://🎵.example.com/ra/nggyu .

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

PWA als URL-handlers bestaat uit twee toevoegingen:

1. Het manifestlid van de web-app "url_handlers" .
2. De bestandsindeling web-app-origin-association voor het valideren van URL-associaties binnen en buiten het bereik.

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

Voorbeelden van sites die deze API kunnen gebruiken zijn:

• Muziek- of videostreamingsites, dus tracklinks of afspeellijstlinks worden geopend in de spelerervaring van de app.
• Nieuws- of RSS-lezers, dus gevolgde of geabonneerde sites, worden geopend 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-proeftoken, schakelt u de vlag #enable-desktop-pwas-url-handling in about://flags in.

Het manifestlid van de web-app "url_handlers"

Als u een geïnstalleerde PWA wilt koppelen aan URL-patronen, moeten deze patronen worden opgegeven in het web-app-manifest. Dit gebeurt via het lid "url_handlers" . Het accepteert een array van objecten met een origin eigenschap, wat een vereiste string is die een patroon is voor het matchen van origins. Deze patronen mogen een wildcard ( * )-voorvoegsel hebben om meerdere subdomeinen op te nemen (zoals https://*.example.com ). URL's die overeenkomen met deze oorsprong 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 webapp-manifest laat zien hoe het muziek-PWA-voorbeeld uit de inleidende paragraaf dit zou kunnen opzetten. De tweede invoer met het jokerteken ( "https://*.music.example.com" ) zorgt ervoor dat de app ook wordt geactiveerd voor https://www.music.example.com of mogelijke 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 op een andere oorsprong ( music.example.com ) staat dan sommige van de URL's die deze moet verwerken (bijvoorbeeld https://🎵.example.com ), moet de app het eigendom van deze andere oorsprong verifiëren. Dit gebeurt in een web-app-origin-association op de andere oorsprong wordt gehost.

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

Elk "details" -object bevat:

Hieronder vindt u een voorbeeld van een web-app-origin-association voor het muziek-PWA-voorbeeld van hierboven. Het wordt gehost op de oorsprong 🎵.example.com en brengt de associatie 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 oorsprongsreeksen in "url_handlers" .
• De browser kan via het betreffende web-app-origin-association valideren dat elke origin ermee instemt om deze app een dergelijke URL te laten verwerken.

Met betrekking tot het ontdekken van bestanden web-app-origin-association

Om ervoor te zorgen dat de browser het web-app-origin-association kan ontdekken, moeten ontwikkelaars het web-app-origin-association in de map /.well-known/ in de hoofdmap van de app plaatsen. Om dit te laten werken, moet de bestandsnaam exact web-app-origin-association zijn.

Demo

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 webapp-manifest te kijken, kun je zien dat het URL's verwerkt met de volgende URL-patronen: https://mandymsft.github.io en https://luhuangmsft.github.io . Omdat deze laatste een andere oorsprong heeft ( luhuangmsft.github.io ) dan de PWA, moet de PWA op mandymsft.github.io het eigendom bewijzen, wat gebeurt via het web-app-origin-association bestand dat wordt gehost op https:// luhuangmsft.github.io/.well-known/web-app-origin-association .

Om te testen of het inderdaad werkt, stuurt u uzelf een testbericht met een instant messaging-app van uw keuze of een e-mail die u bekijkt in een e-mailclient die niet webgebaseerd is, zoals Mail op macOS. Het e-mail- of sms-bericht moet een van de links https://mandymsft.github.io of https://luhuangmsft.github.io bevatten. Beide zouden moeten openen in de geïnstalleerde PWA.

Beveiliging en machtigingen

Het Chromium-team ontwierp en implementeerde PWA's als URL-handlers met behulp van de kernprincipes die zijn gedefinieerd in Toegangscontrole tot krachtige webplatformfuncties , waaronder gebruikerscontrole, transparantie en ergonomie.

Gebruikerscontrole

Als meer dan één PWA zich registreert als URL-handler voor een bepaald URL-patroon, wordt de gebruiker gevraagd te kiezen met welke PWA hij het patroon wil afhandelen, als die er al is. Navigaties die starten in een browsertabblad vallen niet onder dit voorstel, het is expliciet gericht op navigaties die buiten de browser starten.

Transparantie

Als de noodzakelijke associatievalidatie om welke reden dan ook niet succesvol kan worden voltooid tijdens de PWA-installatie, registreert de browser de app niet als actieve URL-handler voor de betreffende URL's. URL-handlers kunnen, indien onjuist geïmplementeerd, worden gebruikt om verkeer naar websites te kapen. Daarom is het app-associatiemechanisme een belangrijk onderdeel van het schema.

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

Persistentie van toestemming

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

Feedback

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

Vertel ons over het API-ontwerp

Is 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? Heeft u een vraag of opmerking over het beveiligingsmodel? Dien een spec issue in op de corresponderende GitHub repository , of voeg uw gedachten toe aan een bestaand issue.

Meld een probleem met de implementatie

Heeft u een bug gevonden in de implementatie van Chromium? Of wijkt de uitvoering af van de specificaties? Dien een bug in op new.crbug.com . Zorg ervoor dat u zoveel mogelijk details en eenvoudige instructies voor het reproduceren opneemt, en voer UI>Browser>WebAppInstalls in het vak Componenten in. Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon ondersteuning voor de API

Bent u van plan PWA's als URL-handlers te gebruiken? Jouw 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.

Handige Links

• Openbare uitlegger
• Demonstratie | Demobron
• Chromium-trackingbug
• ChromeStatus.com-invoer
• Knippercomponent: 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 . Heldenafbeelding door Bryson Hammer op Unsplash .