Kies hoe links binnen het bereik uw PWA openen met Declarative Link Capturing

Thomas Steiner

Wat is declaratieve linkregistratie?

Het klikken op links op internet kan soms een aangename verrassing zijn. Als u bijvoorbeeld op een mobiel apparaat op een webpaginalink naar YouTube klikt, wordt de YouTube-app voor iOS of Android geopend, als deze is geïnstalleerd. Maar wanneer u de YouTube PWA op een desktopcomputer installeert en op een link klikt, wordt deze geopend in een browsertabblad.

Maar het wordt complexer. Wat als de link niet op een website verschijnt, maar in een chatbericht dat u ontvangt in een van de chat-apps van Google? Moet er op desktopbesturingssystemen, die het idee hebben van afzonderlijke app-vensters, voor elke klik op een link een nieuw venster of tabblad worden gemaakt als de app al geopend is? Als je erover nadenkt, zijn er veel manieren waarop links en navigatie kunnen worden vastgelegd, inclusief, maar niet beperkt tot, het volgende:

Declarative Link Capturing is een voorstel voor een webapp-manifesteigenschap genaamd "capture_links" waarmee ontwikkelaars declaratief kunnen bepalen wat er moet gebeuren wanneer de browser wordt gevraagd naar een URL te navigeren die binnen het navigatiebereik van de applicatie valt, vanuit een context buiten het navigatiebereik . Dit voorstel is niet van toepassing als de gebruiker zich al binnen het navigatiebereik bevindt (bijvoorbeeld als de gebruiker een browsertabblad geopend heeft dat binnen het bereik valt en op een interne link klikt).

Sommige speciale omstandigheden, zoals klikken met de middelste muisknop op een link (of klikken met de rechtermuisknop en vervolgens 'openen in een nieuw tabblad'), activeren doorgaans niet het gedrag van het vastleggen van links. Of een link target=_self of target=_blank is, doet er niet toe, zodat links waarop in een browservenster (of venster van een andere PWA) wordt geklikt, in de PWA worden geopend, zelfs als ze normaal gesproken een navigatie binnen hetzelfde tabblad veroorzaken.

Voorgestelde gebruiksscenario's

Voorbeelden van sites die deze API kunnen gebruiken zijn:

  • PWA's die een venster willen openen in plaats van een browsertabblad wanneer de gebruiker op een link naar hen klikt. In een desktopomgeving is het vaak zinvol om meerdere toepassingsvensters tegelijk geopend te hebben.
  • PWA's met één venster waarbij de ontwikkelaar er de voorkeur aan geeft om slechts één exemplaar van de app op elk moment open te hebben, met nieuwe navigatie die zich richt op het bestaande exemplaar. Subgebruiksgevallen zijn onder meer:
    • Apps waarvoor het zinvol is om slechts één exemplaar actief te hebben (bijvoorbeeld een muziekspeler of een game).
    • Apps die het beheer van meerdere documenten binnen één exemplaar omvatten (bijvoorbeeld een in HTML geïmplementeerde tabbladstrook).

Inschakelen via about://flags

Als u lokaal wilt experimenteren met Declarative Link Capturing, zonder een origin-proeftoken, schakelt u de vlag #enable-desktop-pwas-link-capturing in about://flags in.

Hoe gebruik ik Declaratieve Link Capture?

Ontwikkelaars kunnen declaratief bepalen hoe links moeten worden vastgelegd door gebruik te maken van het extra webapp-manifestveld "capture_links" . De waarde ervan is een string of een array van strings. Als er een array met strings wordt opgegeven, kiest de user-agent het eerste ondersteunde item in de lijst, standaard ingesteld op "none" . De volgende waarden worden ondersteund:

  • "none" (de standaard): geen koppeling vastleggen; aangeklikte links die naar dit PWA-bereik leiden, navigeren zoals normaal zonder een PWA-venster te openen.
  • "new-client" : Elke aangeklikte link opent een nieuw PWA-venster op die URL.
  • "existing-client-navigate" : de aangeklikte link wordt geopend in een bestaand PWA-venster, als er een beschikbaar is, of in een nieuw venster als dat niet het geval is. Als er meer dan één PWA-venster bestaat, kan de browser er willekeurig één kiezen. Dit gedraagt ​​zich als een "new-client" als er momenteel geen venster geopend is. 🚨Let op! Deze optie leidt mogelijk tot gegevensverlies, omdat pagina's willekeurig kunnen worden weggenavigeerd. Sites moeten zich ervan bewust zijn dat ze zich aanmelden voor dergelijk gedrag door deze optie te kiezen. Deze optie werkt het beste voor 'alleen-lezen'-sites die geen gebruikersgegevens in het geheugen bewaren, zoals muziekspelers. Als de pagina waarvan wordt genavigeerd een gebeurtenis beforeunload heeft, ziet de gebruiker de prompt voordat de navigatie is voltooid.

Demo

De demo voor Declarative Link Capturing bestaat eigenlijk uit twee demo's die met elkaar samenwerken:

  1. https://continue-oogst-tomaat.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

De onderstaande screencast laat zien hoe de twee met elkaar omgaan. Ze laten twee verschillende gedragingen zien: "new-client" en "existing-client-navigate" . Zorg ervoor dat u de apps in verschillende statussen test, uitgevoerd op een tabblad of als geïnstalleerde PWA, om het verschil in gedrag te zien.

Beveiliging en machtigingen

Het Chromium-team heeft Declarative Link Capturing ontworpen en geïmplementeerd met behulp van de kernprincipes die zijn gedefinieerd in Toegangscontrole tot krachtige webplatformfuncties , waaronder gebruikerscontrole, transparantie en ergonomie. Deze API biedt sites nieuwe extra controleopties. Ten eerste de mogelijkheid om geïnstalleerde apps automatisch in een venster te openen. Dit maakt gebruik van de bestaande gebruikersinterface, maar maakt het mogelijk dat de site deze automatisch activeert. Ten tweede de mogelijkheid om een ​​bestaand venster op zijn eigen domein te richten en een gebeurtenis te activeren die de aangeklikte URL bevat. Dit is bedoeld om de site in staat te stellen via een bestaand venster naar een nieuwe pagina te navigeren, waarbij de standaard HTML-navigatiestroom wordt overschreven.

Migreer naar Launch Handler API

De Declarative Link Capturing API Origin-proefperiode liep op 30 maart 2022 af voor Chromium 97 en lager. Het zal worden vervangen door een reeks nieuwe functies en API's in Chromium 98 en hoger, waaronder door de gebruiker ingeschakelde koppelingsregistratie en de Launch Handler API .

In Chromium 98 is het automatisch vastleggen van links nu een opt-in-gedrag van de gebruiker in plaats van dat dit wordt toegestaan ​​tijdens de installatie van een web-app. Om het vastleggen van links in te schakelen, moet een gebruiker een geïnstalleerde app vanuit de browser starten met behulp van Openen met en Mijn keuze onthouden kiezen.

Voorbeeld van de instelling 'Openen met' van een geïnstalleerde app met de optie 'Onthoud mijn keuze' ingeschakeld.

Als alternatief kunnen gebruikers het vastleggen van links in- of uitschakelen voor een specifieke web-app op de instellingenpagina voor app-beheer.

Voorbeeld van de instellingenpagina van een geïnstalleerde app.

Het vastleggen van links is voorlopig alleen beschikbaar in ChromeOS; ondersteuning voor Windows, macOS en Linux wordt momenteel uitgevoerd.

Start de Handler-API

De controle over een inkomende navigatie wordt gemigreerd naar de Launch Handler API, waarmee webapps kunnen beslissen hoe een webapp wordt gestart in verschillende situaties, zoals het vastleggen van links, het delen van doelen of het verwerken van bestanden, enz. Om te migreren van de Declarative Link Capturing API naar de Handler-API starten:

  1. Registreer uw site voor de Origin-proefversie van Launch Handler en plaats de Origin-proefsleutel in uw web-app.

  2. Voeg een "launch_handler" vermelding toe aan het manifest van uw site.

    • Om "capture_links": "new-client" te gebruiken, voegt u toe: "launch_handler": { "route_to": "new-client" } .
    • Om "capture_links": "existing-client-navigate" te gebruiken, voegt u toe: "launch_handler": { "route_to": "existing-client-navigate" } .
    • Om "capture_links": "existing-client-event" (wat nooit is geïmplementeerd in de Declarative Link Capturing origin-proefversie) te gebruiken, voegt u het volgende toe: "launch_handler": { "route_to": "existing-client-retain" } . Met deze optie navigeren pagina's in uw app-bereik niet langer automatisch wanneer een linknavigatie wordt vastgelegd. U moet de LaunchParams in JavaScript afhandelen door window.launchQueue.setConsumer() aan te roepen om navigatie in te schakelen.

Het veld capture_links en de registratie van de Declarative Link Capturing origin-proefperiode zijn geldig tot 30 maart 2022. Dit zorgt ervoor dat gebruikers op Chromium 97 en lager de web-app nog steeds kunnen starten via een vastgelegde link.

Voor meer details, ga naar Controle hoe uw app wordt gelanceerd .

Feedback

Het Chromium-team wil graag horen wat uw ervaringen zijn met Declarative Link Capturing.

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 gebruik te maken van Declarative Link Capturing? 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 #DeclarativeLinkCapturing en laat ons weten waar en hoe u deze gebruikt.

Handige Links

Dankbetuigingen

Declarative Link Capturing werd gespecificeerd door Matt Giuca met input van Alan Cutter en Dominick Ng . De API is geïmplementeerd door Alan Cutter. Dit artikel is beoordeeld door Joe Medley , Matt Giuca, Alan Cutter en Shunya Shishido . Heldenafbeelding door Zulmaury Saavedra op Unsplash .