Deze pagina is vertaald door de Cloud Translation API.

Registratie van URL-protocolhandler voor PWA's, Registratie van URL-protocolhandler voor PWA's

Laat geïnstalleerde PWA's links afhandelen die een specifiek protocol gebruiken voor een meer geïntegreerde ervaring.

Thomas Steiner

Achtergrondinformatie over schema's (ook wel protocollen genoemd)

Een Uniform Resource Identifier (URI) is een compacte reeks tekens die een abstracte of fysieke bron identificeert. Elke URI begint met een schemanaam die verwijst naar een specificatie voor het toewijzen van identifiers binnen dat schema. Als zodanig is de URI-syntaxis een federatief en uitbreidbaar naamgevingssysteem waarin de specificatie van elk schema de syntaxis en semantiek van identificaties die dat schema gebruiken verder kan beperken. Schema's worden ook wel protocollen genoemd. Hieronder ziet u enkele voorbeelden van schema's.

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

De term Uniform Resource Locator (URL) verwijst naar de subset van URI's die, naast het identificeren van een bron, een middel bieden om de bron te lokaliseren door het primaire toegangsmechanisme ervan te beschrijven (bijvoorbeeld de netwerklocatie).

Achtergrondinformatie over de methode `registerProtocolHandler()`

Met de Navigator -methode registerProtocolHandler() die alleen beveiligde inhoud bevat, kunnen sites registreren of ze bepaalde URL-schema's kunnen openen of verwerken. Daarom moeten sites de methode als volgt aanroepen: navigator.registerProtocolHandler(scheme, url) . De twee parameters worden als volgt gedefinieerd:

scheme : Een string die het protocol bevat dat de site wil verwerken.
url : Een tekenreeks die de URL van de handler bevat. Deze URL moet %s bevatten als tijdelijke aanduiding die zal worden vervangen door de te verwerken escape-URL.

Het schema moet een van de schema's op de veilige lijst zijn (bijvoorbeeld mailto , bitcoin of magnet ) of beginnen met web+ , gevolgd door ten minste een of meer kleine ASCII-letters na het web+ -voorvoegsel, bijvoorbeeld web+coffee .

Om dit duidelijker te maken, is hier een concreet voorbeeld van de stroom:

De gebruiker bezoekt een site op https://coffeeshop.example.com/ die de volgende aanroep doet: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s') .
Op een later moment, tijdens een bezoek aan https://randomsite.example.com/ , klikt de gebruiker op een link zoals <a href="web+coffee:latte-macchiato">All about latte macchiato</a> .
Hierdoor navigeert de browser naar de volgende URL: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato . De URL-gedecodeerde zoekreeks luidt vervolgens ?type=web+coffee://latte-macchiato .

Waar protocolafhandeling over gaat

Het huidige mechanisme voor URL-protocolhandlerregistratie voor PWA's gaat over het aanbieden van protocolhandlerregistratie als onderdeel van een PWA-installatie via het manifest. Na registratie van een PWA als protocolhandler, wanneer een gebruiker op een hyperlink met een specifiek schema zoals mailto , bitcoin of web+music vanuit een browser of een platformspecifieke app klikt, wordt de geregistreerde PWA geopend en ontvangt de URL. Het is belangrijk op te merken dat zowel de voorgestelde op manifest gebaseerde registratie als de traditionele registerProtocolHandler() in de praktijk zeer vergelijkbare rollen spelen, terwijl ze nog steeds de mogelijkheid bieden voor complementaire gebruikerservaringen:

Overeenkomsten zijn onder meer vereisten rond de lijst met schema's die mogen worden geregistreerd, en de naam en het formaat van parameters, enz.
De verschillen in de op manifesten gebaseerde registratie zijn subtiel, maar kunnen nuttig zijn om de ervaring voor PWA-gebruikers te verbeteren. Voor op een manifest gebaseerde PWA-registratie is bijvoorbeeld mogelijk geen extra gebruikersactie vereist, afgezien van de door de gebruiker geïnitieerde installatie van de PWA.

Gebruiksgevallen

Bij een tekstverwerkings-PWA komt de gebruiker in een document een link tegen naar een presentatie zoals web+presentations://deck2378465 . Wanneer de gebruiker op de link klikt, wordt de presentatie PWA automatisch in het juiste bereik geopend en wordt het slidedeck weergegeven.
In een platformspecifieke chat-app ontvangt de gebruiker in een chatbericht een link naar een magnet -URL. Als je op de link klikt, wordt een geïnstalleerde torrent-PWA gestart en begint het downloaden.
De gebruiker heeft een PWA voor muziekstreaming geïnstalleerd. Wanneer een vriend een link deelt naar een nummer zoals web+music://songid=1234&time=0:13 en de gebruiker erop klikt, wordt de PWA voor het streamen van muziek automatisch gestart in een zelfstandig venster.

Hoe u URL-protocolhandlerregistratie voor PWA's kunt gebruiken

De API voor registratie van URL-protocolhandlers is nauw gemodelleerd naar navigator.registerProtocolHandler() . Deze keer wordt de informatie declaratief doorgegeven via het webapp-manifest in een nieuwe eigenschap genaamd "protocol_handlers" die een array van objecten gebruikt met de twee vereiste sleutels "protocol" en "url" . In het onderstaande codefragment ziet u hoe u web+tea en web+coffee kunt registreren. De waarden zijn tekenreeksen die de URL van de handler bevatten met de vereiste %s tijdelijke aanduiding voor de ontsnapte URL.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Meerdere apps registreren zich voor hetzelfde protocol

Als meerdere applicaties zichzelf registreren als handlers voor hetzelfde schema, bijvoorbeeld het mailto -protocol, zal het besturingssysteem de gebruiker een kiezer tonen en hem laten beslissen welke van de geregistreerde handlers hij wil gebruiken.

Dezelfde app registreert zich voor meerdere protocollen

Dezelfde app kan zichzelf registreren voor meerdere protocollen, zoals je kunt zien in het codevoorbeeld hierboven.

App-updates en handlerregistratie

Handlerregistraties worden gesynchroniseerd met de nieuwste manifestversie van de app. Er zijn twee gevallen:

Een update die nieuwe handlers toevoegt, activeert handlerregistratie (los van de app-installatie).
Een update die handlers verwijdert, activeert de registratie van de handler (los van het verwijderen van de app).

Foutopsporing in protocolhandler in DevTools

Navigeer naar de sectie Protocolhandlers via het paneel Toepassing > Manifest . Hier kunt u alle beschikbare protocollen bekijken en testen.

Installeer bijvoorbeeld deze demo PWA . Typ in de sectie Protocolhandlers "americano" en klik op Testprotocol om de koffiepagina in de PWA te openen.

Protocolhandlers in het paneel Manifest

Demo

U kunt een demo bekijken van URL-protocolhandlerregistratie voor PWA's op Glitch.

Ga naar https://protocol-handler.glitch.me/ , installeer de PWA en laad de app opnieuw na de installatie. De browser heeft de PWA nu geregistreerd als handler voor het web+coffee -protocol bij het besturingssysteem.
Klik in het geïnstalleerde PWA-venster op de link https://protocol-handler-link.glitch.me/ . Hierdoor wordt een nieuw browsertabblad geopend met drie links. Klik op de eerste of de tweede (latte macchiato of americano). De browser toont u nu een prompt en vraagt of u het goed vindt dat de app een protocolhandler is voor het web+coffee -protocol. Als u akkoord gaat, wordt de PWA geopend en wordt de geselecteerde koffie weergegeven.
Om te vergelijken met de traditionele stroom die navigator.registerProtocolHandler() gebruikt, klikt u op de knop Protocolhandler registreren in de PWA. Klik vervolgens in het browsertabblad op de derde link (chai). Er wordt eveneens een prompt weergegeven, maar dan wordt de PWA op een tabblad geopend, niet in een browservenster.
Stuur uzelf een bericht via een platformspecifieke applicatie zoals Skype op Windows met een link zoals <a href="web+coffee://americano">Americano</a> en klik erop. Het zou op dezelfde manier de geïnstalleerde PWA moeten openen.

URL-protocolhandlerdemo met browsertabblad met links aan de linkerkant en een zelfstandig PWA-venster aan de rechterkant.

Beveiligingsoverwegingen

Omdat PWA-installatie vereist dat de context veilig is, neemt de protocolafhandeling deze beperking over. De lijst met geregistreerde protocolhandlers is op geen enkele manier toegankelijk voor internet en kan dus niet als vingerafdrukvector worden gebruikt.

Niet door de gebruiker geïnitieerde navigatiepogingen

Navigatiepogingen die niet door de gebruiker zijn geïnitieerd, maar die programmatisch zijn, openen mogelijk geen apps. De aangepaste protocol-URL mag alleen worden gebruikt in browsercontexten op het hoogste niveau, maar niet bijvoorbeeld als de URL van een iframe.

Toelatingslijst met protocollen

Net als bij registerProtocolHandler() is er een toelatingslijst met protocollen waarvoor apps zich kunnen registreren.

Toestemmingsprompt

Bij de eerste keer opstarten van de PWA als gevolg van een aangeroepen protocol, krijgt de gebruiker een toestemmingsdialoogvenster te zien. In dit dialoogvenster worden de app-naam en de oorsprong van de app weergegeven, en wordt de gebruiker gevraagd of de app koppelingen van het protocol mag verwerken. Als een gebruiker het toestemmingsdialoogvenster afwijst, wordt de geregistreerde protocolhandler door het besturingssysteem genegeerd. Om de registratie van de protocolhandler ongedaan te maken, moet de gebruiker de PWA verwijderen die deze heeft geregistreerd. De browser zal de registratie van de protocolhandler ook ongedaan maken als de gebruiker "Onthoud mijn keuze" en "Niet toestaan" selecteert.

Feedback

Het Chromium-team wil graag horen wat uw ervaringen zijn met URL-protocolhandlerregistratie voor PWA's.

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

Heb je 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 URL-protocolhandlerregistratie voor PWA's 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.

Deel hoe u het wilt gebruiken in de WICG Discourse-thread . Stuur een tweet naar @ChromiumDev met de hashtag #ProtocolHandler en laat ons weten waar en hoe je deze gebruikt.

Nuttige links

Dankbetuigingen

Registratie van URL-protocolhandlers voor PWA's is geïmplementeerd en gespecificeerd door Fabio Rocha , Diego González , Connor Moody en Samuel Tang van het Microsoft Edge-team. Dit artikel is beoordeeld door Joe Medley en Fabio Rocha. Hero-afbeelding door JJ Ying op Unsplash .