PWA's als URL-handlers

Laat geïnstalleerde PWA's de URL's afhandelen 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 messaging-app zoals Berichten op macOS en jullie het over muziek hebben. Stel je verder voor dat jullie allebei de PWA music.example.com 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 wellicht besloten om een ​​extra korte link aan elk nummer toe te voegen, bijvoorbeeld https://🎵.example.com/ra/nggyu .

Met PWA als URL-handler kunnen apps zoals music.example.com zich registreren als URL-handler 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 vanuit een instant messaging-app 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 "url_handlers" van de webapplicatie.
2. Het web-app-origin-association bestandsformaat voor het valideren van URL-associaties binnen en buiten het toepassingsgebied.

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

Voorbeelden van sites die deze API kunnen gebruiken zijn:

• Muziek- of videostreamingsites zorgen ervoor dat tracklinks of playlistlinks worden geopend in de spelerweergave van de app.
• Nieuws- of RSS-lezers, dus de sites die je volgt of waarop je geabonneerd bent, worden geopend in de leesmodus van de app.

Hoe PWA's als URL-handlers te gebruiken

Schakel dit in via about://flags

Om lokaal te experimenteren met PWA's als URL-handlers, zonder een origin trial-token, schakel je de vlag #enable-desktop-pwas-url-handling in about://flags .

Het manifestlid "url_handlers" van de webapp

Om een ​​geïnstalleerde PWA te koppelen aan URL-patronen, moeten deze patronen worden gespecificeerd in het web-app-manifest. Dit gebeurt via het lid "url_handlers" . Dit lid accepteert een array van objecten met een eigenschap origin , een verplichte string die een patroon is voor het matchen van origins. Deze patronen mogen een wildcard ( * ) bevatten om meerdere subdomeinen op te nemen (zoals https://*.example.com ). URL's die overeenkomen met deze origins kunnen door deze web-app worden verwerkt. Het schema wordt altijd verondersteld https:// te zijn, maar dit moet expliciet worden vermeld.

Het volgende fragment uit een webapp-manifest laat zien hoe het muziek-PWA-voorbeeld uit de inleiding 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 mogelijke 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 bestand

Omdat de PWA zich op een andere oorsprong bevindt ( music.example.com ) dan sommige URL's die het moet verwerken (bijv. https://🎵.example.com ), moet de app het eigendom van deze andere oorsprongen verifiëren. Dit gebeurt in een web-app-origin-association bestand dat op de andere oorsprongen 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 webapplicatie. Elk object bevat:

Elk "details" -object bevat:

Hieronder staat een voorbeeld van web-app-origin-association bestand voor de muziek-PWA uit het bovenstaande voorbeeld. Dit bestand wordt gehost op de origin 🎵.example.com en legt de koppeling met de music.example.com PWA, die wordt geïdentificeerd door de URL van het web-app-manifest.

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

Wanneer komt een URL overeen?

Een PWA komt in aanmerking voor verwerking op basis van een URL als aan beide volgende voorwaarden is voldaan:

• De URL komt overeen met een van de oorspronkelijke tekenreeksen in "url_handlers" .
• De browser kan aan de hand van het betreffende web-app-origin-association bestand controleren of elke oorsprong ermee instemt dat deze app een dergelijke URL afhandelt.

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

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

Demo

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

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

Beveiliging en machtigingen

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

Gebruikersbesturing

Als meer dan één PWA zich registreert als URL-handler voor een bepaald URL-patroon, wordt de gebruiker gevraagd te kiezen met welke PWA het patroon moet worden afgehandeld – of überhaupt met welke. Navigaties die in een browsertabblad starten, vallen niet onder dit voorstel; het is expliciet gericht op navigaties die buiten de browser starten.

Transparantie

Als de noodzakelijke associatievalidatie tijdens de PWA-installatie om welke reden dan ook niet succesvol kan worden voltooid, registreert de browser de app niet als een 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 systeem.

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

Persistentie van toestemming

Een website kan zijn 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 gevalideerd kan worden omdat de koppelingsgegevens zijn gewijzigd of niet langer beschikbaar zijn, verwijdert de browser de registraties.

Feedback

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

Vertel ons iets over het API-ontwerp.

Werkt er iets aan de API niet 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 specificatie-issue in op de bijbehorende GitHub-repository , of voeg je gedachten 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 . Vermeld zoveel mogelijk details, instructies voor het reproduceren van de bug en voer UI>Browser>WebAppInstalls in bij het veld Components .

Toon je steun voor de API

Ben je van plan om 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 ze te ondersteunen.

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

Handige links

• Openbare uitleg
• Demo | Demo-bron
• Chromium-bug bij het opsporen van een bug
• ChromeStatus.com-item
• Blink-component: UI>Browser>WebAppInstalls
• TAG-recensie
• Microsoft-documentatie

Dankbetuigingen

Het gebruik van PWA's als URL-handlers is gespecificeerd en geïmplementeerd door Lu Huang en Mandy Chen van het Microsoft Edge-team. Dit document is beoordeeld door Joe Medley .