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

Thomas Steiner

Wat is Declarative Link Capturing?

Het klikken op links op internet kan soms een aangename verrassing zijn. Als je bijvoorbeeld op een webpagina met een link naar YouTube op een mobiel apparaat klikt, wordt de YouTube iOS- of Android-app geopend, als die is geïnstalleerd. Maar wanneer je 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 je ontvangt in een van Googles chat-apps? Moet er op desktopbesturingssystemen, die aparte app-vensters hebben, voor elke klik op een link een nieuw venster of tabblad worden aangemaakt als de app al geopend is? Er zijn talloze manieren om links en navigatie vast te leggen, waaronder, maar niet beperkt tot, de volgende:

Declarative Link Capturing is een voorstel voor een manifesteigenschap voor een webapp met de naam "capture_links" Hiermee kunnen ontwikkelaars declaratief bepalen wat er moet gebeuren wanneer de browser wordt gevraagd om te navigeren naar een URL die zich binnen het navigatiebereik van de applicatie bevindt, 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 heeft geopend dat binnen het bereik valt en op een interne link klikt).

Sommige speciale omstandigheden, zoals met de middelste muisknop op een link klikken (of met de rechtermuisknop klikken en vervolgens "openen in nieuw tabblad"), activeren het link capture-gedrag doorgaans niet. Het maakt niet uit of een link target=_self of target=_blank is, dus links die in een browservenster (of venster van een andere PWA) worden aangeklikt, worden wel in de PWA geopend, zelfs als ze normaal gesproken binnen hetzelfde tabblad zouden navigeren.

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 ernaartoe klikt. In een desktopomgeving is het vaak zinvol om meerdere applicatievensters tegelijk open te hebben.
  • PWA's met één venster, waarbij de ontwikkelaar er de voorkeur aan geeft om slechts één exemplaar van de app tegelijk open te hebben, waarbij nieuwe navigatie zich richt op het bestaande exemplaar. Subgebruiksvoorbeelden zijn onder andere:
    • Apps waarbij het zinvol is om slechts één exemplaar ervan te laten draaien (bijvoorbeeld een muziekspeler of een spel).
    • Apps die het beheer van meerdere documenten in één instantie ondersteunen (bijvoorbeeld een in HTML geïmplementeerde tabbladstrook).

Inschakelen via about://flags

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

Hoe gebruik je Declarative Link Capturing?

Ontwikkelaars kunnen declaratief bepalen hoe links moeten worden vastgelegd door gebruik te maken van het extra manifestveld "capture_links" in de webapp. Dit veld accepteert een string of een array met strings als waarde. 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" (standaard): Geen koppeling vastgelegd. Koppelingen die naar deze PWA-scope leiden en waarop wordt geklikt, navigeren op de normale manier zonder dat er een PWA-venster wordt geopend.
  • "new-client" : Elke keer dat u op een link klikt, wordt een nieuw PWA-venster op die URL geopend.
  • "existing-client-navigate" : De aangeklikte link wordt geopend in een bestaand PWA-venster, indien beschikbaar, 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 "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 voor dit gedrag aanmelden door deze optie te kiezen. Deze optie werkt het beste voor "alleen-lezen" sites die geen gebruikersgegevens in het geheugen opslaan, zoals muziekspelers. Als de pagina waarvan wordt weggenavigeerd een beforeunload -gebeurtenis heeft, ziet de gebruiker de prompt voordat de navigatie is voltooid.

Demonstratie

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

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

De onderstaande screencast laat zien hoe de twee samenwerken. Ze vertonen twee verschillende gedragingen: "new-client" en "existing-client-navigate" . Test de apps in verschillende statussen, draaiend in een tabblad of als een geïnstalleerde PWA, om het verschil in gedrag te zien.

Beveiliging en machtigingen

Het Chromium-team heeft Declarative Link Capturing ontworpen en geïmplementeerd op basis van de kernprincipes die zijn gedefinieerd in Controlling Access to Powerful Web Platform Features , waaronder gebruikerscontrole, transparantie en ergonomie. Deze API biedt websites nieuwe, extra controlemogelijkheden. 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 website deze automatisch activeert. Ten tweede de mogelijkheid om een ​​bestaand venster op een eigen domein te focussen en een gebeurtenis te activeren met de aangeklikte URL. Dit is bedoeld om de website in staat te stellen vanuit een bestaand venster naar een nieuwe pagina te navigeren, waarbij de standaard HTML-navigatiestroom wordt overschreven.

Migreren naar Launch Handler API

De proefperiode van de Declarative Link Capturing API is verlopen op 30 maart 2022 voor Chromium 97 en lager. Deze wordt vervangen door een reeks nieuwe functies en API's in Chromium 98 en hoger, waaronder door de gebruiker ingeschakelde linkcapturing en de Launch Handler API .

In Chromium 98 is het automatisch vastleggen van links nu een keuze van de gebruiker in plaats van dat het wordt toegekend tijdens de installatie van een webapp. Om het vastleggen van links in te schakelen, moet een gebruiker een geïnstalleerde app vanuit de browser starten met Openen met en Mijn keuze onthouden selecteren.

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

Gebruikers kunnen het vastleggen van links ook voor een specifieke web-app in- of uitschakelen op de pagina met app-beheerinstellingen.

Voorbeeld van de instellingenpagina van een geïnstalleerde app.

Het vastleggen van links is vooralsnog alleen beschikbaar in ChromeOS; ondersteuning voor Windows, macOS en Linux is in ontwikkeling.

Lanceer Handler API

De controle over inkomende navigatie wordt gemigreerd naar de Launch Handler API, waarmee web-apps kunnen bepalen hoe een web-app wordt gestart in verschillende situaties, zoals het vastleggen van links, het delen van doelen of het verwerken van bestanden, enz. Ga als volgt te werk om te migreren van de Declarative Link Capturing API naar de Launch Handler API:

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

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

    • Om "capture_links": "new-client" te gebruiken, voeg het volgende toe: "launch_handler": { "route_to": "new-client" } .
    • Om "capture_links": "existing-client-navigate" te gebruiken, voegt u het volgende toe: "launch_handler": { "route_to": "existing-client-navigate" } .
    • Om "capture_links": "existing-client-event" te gebruiken (wat nooit geïmplementeerd was in de proefperiode voor het vastleggen van de oorsprong van declaratieve links), 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 verwerken door window.launchQueue.setConsumer() aan te roepen om navigatie mogelijk te maken.

De registratie voor het veld capture_links en de Declarative Link Capturing Origin-proefversie is geldig tot 30 maart 2022. Zo kunnen gebruikers op Chromium 97 en lager de webapp nog steeds starten via een vastgelegde link.

Voor meer informatie, zie Bepaal hoe uw app wordt gestart .

Feedback

Het Chromium-team wil graag uw ervaringen met Declarative Link Capturing 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 Declarative Link Capturing 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 #DeclarativeLinkCapturing en laat ons weten waar en hoe je deze gebruikt.

Nuttige links

Dankbetuigingen

Declaratieve linkcapturing is 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 . Hero-afbeelding door Zulmaury Saavedra op Unsplash .