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

Thomas Steiner

Wat is declaratieve linkcapturing?

Het aanklikken van links op het web kan soms een aangename verrassing zijn. Als je bijvoorbeeld op een webpagina op een mobiel apparaat op een link naar YouTube klikt, opent de YouTube-app voor iOS of Android, mits deze is geïnstalleerd. Maar wanneer je de YouTube PWA op een desktopcomputer installeert en op een link klikt, wordt deze in een nieuw browsertabblad geopend.

Maar het wordt complexer. Wat als de link niet op een website staat, maar in een chatbericht dat je ontvangt in een van de chat-apps van Google? Moet er op desktopbesturingssystemen, die werken met aparte app-vensters, een nieuw venster of tabblad worden aangemaakt voor elke klik op een link, als de app al open is? Als je erover nadenkt, zijn er veel manieren waarop links en navigaties kunnen worden vastgelegd, waaronder, maar niet beperkt tot, de volgende:

Declarative Link Capturing is een voorstel voor een eigenschap in het manifest van een webapplicatie, genaamd "capture_links" Deze eigenschap stelt ontwikkelaars in staat om declaratief te bepalen wat er moet gebeuren wanneer de browser wordt gevraagd om naar een URL te navigeren 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).

In sommige speciale gevallen, zoals het klikken met de middelste muisknop op een link (of het klikken met de rechtermuisknop en vervolgens "openen in nieuw tabblad"), wordt het gedrag voor het vastleggen van links normaal gesproken niet geactiveerd. Of een link nu target=_self of target=_blank heeft, maakt niet uit, dus links die in een browservenster (of een venster van een andere PWA) worden aangeklikt, worden in de PWA geopend, zelfs als ze normaal gesproken een navigatie binnen hetzelfde tabblad zouden 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 de app 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 instantie van de app tegelijk open te hebben, en nieuwe navigaties zich richten op de bestaande instantie. Subgebruiksscenario's zijn onder andere:
    • Apps waarbij het zinvol is om slechts één instantie tegelijk te laten draaien (bijvoorbeeld een muziekspeler, een spel).
    • Apps die het beheer van meerdere documenten binnen één instantie mogelijk maken (bijvoorbeeld een tabbladbalk die is geïmplementeerd met HTML).

Schakel dit in via about://flags

Om lokaal te 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 declaratieve linkcapturing?

Ontwikkelaars kunnen declaratief bepalen hoe links moeten worden vastgelegd door gebruik te maken van het extra veld "capture_links" in het web-app-manifest. Dit veld accepteert een tekenreeks of een array van tekenreeksen als waarde. Als een array van tekenreeksen wordt meegegeven, kiest de user agent het eerste ondersteunde item in de lijst, met als standaardwaarde "none" .

De volgende waarden worden ondersteund:

  • "none" (de standaardwaarde): Er worden geen links vastgelegd; links die naar dit PWA-bereik leiden, navigeren 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, indien beschikbaar, of in een nieuw venster indien dit niet het geval is. Als er meer dan één PWA-venster bestaat, kan de browser er willekeurig één kiezen. Dit werkt hetzelfde als "new-client" als er geen venster open is. Deze optie werkt het beste voor "alleen-lezen"-sites die geen gebruikersgegevens in het geheugen opslaan, zoals muziekspelers. Als de pagina waarvan wordt weggegaan een beforeunload -gebeurtenis heeft, ziet de gebruiker de melding voordat de navigatie is voltooid.

Demo

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

  1. Locatie 1
  2. Locatie 2

De screencast laat zien hoe de twee met elkaar interageren. Ze tonen twee verschillende gedragingen: "new-client" en "existing-client-navigate" . Test de apps in verschillende toestanden, bijvoorbeeld 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 vastgelegd in Controlling Access to Powerful Web Platform Features , waaronder gebruikerscontrole, transparantie en ergonomie. Deze API biedt websites nieuwe, extra controlemogelijkheden. Ten eerste is het mogelijk om geïnstalleerde apps automatisch in een venster te openen. Hierbij wordt gebruikgemaakt van de bestaande gebruikersinterface, maar de website kan dit automatisch activeren. Ten tweede is het mogelijk om een ​​bestaand venster te focussen op het eigen domein 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.

Migreer naar de Launch Handler API.

De proefperiode voor de Declarative Link Capturing API voor Chromium 97 en ouder is op 30 maart 2022 verlopen . Deze is vervangen door een reeks nieuwe functies en API's in Chromium 98 en latere versies, waaronder door de gebruiker in te schakelen linkcapturing en de Launch Handler API .

In Chromium 98 is het automatisch vastleggen van links nu een optie waar de gebruiker zelf voor moet kiezen, in plaats van dat dit automatisch 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 openen met 'Openen met' en ' Mijn keuze onthouden' selecteren.

Voorbeeld van de 'Openen met'-instelling van een geïnstalleerde app met de optie 'Mijn keuze onthouden' ingeschakeld.

Gebruikers kunnen het vastleggen van links voor een specifieke webapp ook in- of uitschakelen via de instellingenpagina voor appbeheer.

Voorbeeld van de instellingenpagina van een geïnstalleerde app.

Linkcapture is voorlopig alleen beschikbaar voor ChromeOS; ondersteuning voor Windows, macOS en Linux is in ontwikkeling.

Launch Handler API

De controle over inkomende navigatie wordt overgezet naar de Launch Handler API. Deze API stelt webapplicaties in staat om te bepalen hoe een webapplicatie wordt gestart in verschillende situaties, zoals het vastleggen van links, het delen van een doel of het verwerken van bestanden, enzovoort. Om te migreren van de Declarative Link Capturing API naar de Launch Handler API:

  1. Registreer uw site voor de Launch Handler origin-proefversie en voeg de origin-proefsleutel toe aan uw webapplicatie.

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

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

Het veld capture_links en de registratie voor de proefversie van Declarative Link Capturing zijn geldig tot 30 maart 2022. Dit zorgt ervoor dat gebruikers van Chromium 97 en ouder de webapp nog steeds kunnen starten via een vastgelegde link.

Raadpleeg voor meer informatie ' Bepaal hoe uw app wordt gestart' .

Feedback

Het Chromium-team wil graag meer horen over uw ervaringen met Declarative Link Capturing.

Vertel ons iets over het API-ontwerp.

Werkt er iets aan de API niet zoals 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 specificatieprobleem in op de bijbehorende GitHub-repository , of voeg je gedachten toe aan een bestaand probleem.

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 Declarative Link Capturing 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 #DeclarativeLinkCapturing en laat ons weten waar en hoe je het gebruikt.

Handige links

Dankbetuigingen

Declaratieve linkcapturing is ontwikkeld door Matt Giuca met input van Alan Cutter en Dominick Ng . De API is geïmplementeerd door Alan Cutter. Dit document is beoordeeld door Joe Medley , Matt Giuca, Alan Cutter en Shunya Shishido .