Gepubliceerd: 19 augustus 2025
Navigatiebeheer omvat de methoden om te bepalen hoe een Progressive Web App (PWA) gebruikersnavigatie afhandelt. Een cruciaal onderdeel hiervan is navigatieregistratie , het browserproces dat bepaalt of het klikken op een link de geïnstalleerde PWA opent of een nieuw browsertabblad.
Deze handleiding behandelt de nieuwe versie van navigatieregistratie, beschikbaar in Chrome 139. Hoewel het standaardgedrag van de browser in de meeste gevallen geschikt is, is een dieper begrip van deze beheertechnieken en de bijbehorende API's essentieel als u uw gebruikers een zo soepel mogelijke ervaring wilt bieden.
In het gedeelte 'Ontwikkelaarsinstellingen' leest u hoe u de navigatie kunt aanpassen voor een optimale startervaring met uw PWA.
Het nieuwe standaardgedrag
Om aan te sluiten bij de voorkeuren van gebruikers en de wrijving te verminderen, standaardiseert Chrome de manier waarop het links verwerkt. Voorheen was dit gedrag inconsistent op alle platforms. Mobiele apparaten gaven doorgaans voorrang aan het starten van geïnstalleerde apps, terwijl desktopbrowsers eerst een link in een tabblad openden voordat ze aangaven dat een app deze kon verwerken.
De nieuwe, uniforme aanpak voor navigatieregistratie opent automatisch links in de bijbehorende geïnstalleerde PWA. Links vallen alleen terug op een browsertabblad als de PWA niet is geïnstalleerd of als de gebruiker zich heeft afgemeld. Deze nieuwe functionaliteit is beschikbaar in Chrome 139 voor Windows, Mac en Linux, met ondersteuning voor ChromeOS in een toekomstige release.
Het navigatiebeheerproces
Het vastleggen van navigatiegegevens maakt deel uit van het navigatiebeheerproces. Dit proces omvat de volledige flow, van de eerste actie van de gebruiker tot de beslissingen van de browser en het daaruit voortvloeiende gedrag dat door de ontwikkelaar is geconfigureerd:
- Gebruikersacties: omvat interacties zoals klikken of tikken op links.
- Browserbeslissingen: omvat taken en beslissingen die door de browser worden beheerd, zoals standaardgedragingen, zoals het vastleggen van navigatie.
- Ontwikkelaarsinstellingen: Bevat web-API's waarmee ontwikkelaars de browser kunnen instrueren over hoe specifieke taken moeten worden uitgevoerd.
De wisselwerking tussen deze elementen bepaalt of de PWA wordt geopend in een zelfstandig venster of in een browsertabblad.
Een fundamenteel gebruiksvoorbeeld voor navigatiebeheer is wanneer een gebruiker op een link naar de geïnstalleerde PWA klikt of tikt vanaf een andere pagina in de browser. Het volgende voorbeeld behandelt het geval van een gebruiker die de Google Chat PWA heeft geïnstalleerd en op een link naar de PWA klikt vanuit een Google Agenda-uitnodiging.
calendar.google.com .Gebruikersacties
Elke gebruikersactie bestaat uit drie belangrijke elementen: de gebeurtenis (zoals een klik of tik), het oppervlak waarop deze plaatsvindt (zoals een webpagina of snelkoppeling op het bureaublad) en het type koppeling dat wordt geactiveerd (zoals een HTTPS-URL). Een gebruikersactie kan bijvoorbeeld bestaan uit het klikken op een link naar https://chat.google.com/meeting_room_id binnen het bereik van de Google Chat PWA vanaf een webpagina op calendar.google.com .
Browserbeslissingen
Na een gebruikersactie, zoals de gebruiker die in de vorige stap klikt, voert de browser het navigatieregistratieproces uit om te bepalen of links moeten worden geopend in een browsertabblad of in een geïnstalleerde PWA. Dit proces bestaat uit de volgende stappen:
- Bepaal of de navigatie kan worden vastgelegd : over het algemeen wordt een navigatie als vastlegbaar beschouwd als deze een nieuw frame maakt en niet wordt geopend in een aanvullende browsercontext.
- Identificeer een controlerende PWA : als de navigatie kan worden vastgelegd, probeert de browser een PWA te vinden die de URL 'beheert' ( binnen het bereik valt dat is gedefinieerd in het web-app-manifest).
- Gebruikersvoorkeur verifiëren : Als er een controlerende PWA wordt gevonden, controleert de browser de gebruikersvoorkeur. Als de gebruiker zich niet heeft afgemeld in de app-instellingen, wordt de PWA gestart; anders wordt de link geopend in een nieuw browsertabblad.
- Start de PWA : De browser start de PWA met behulp van het Launch Handler-algoritme. Je kunt dit beïnvloeden met de Launch Handler API , die hieronder wordt besproken.
Het volgende diagram vat dit proces samen:
Ontwikkelaarscontroles
Hoewel het navigatieproces voornamelijk afhankelijk is van browserstandaarden en gebruikersinstellingen, kunt u verschillende API's gebruiken om specifieke aspecten ervan te beheren. Na de recente update van de navigatieregistratie zijn sommige al lang bestaande web-API's relevanter geworden.
Lanceer Handler API
Deze API komt in actie wanneer de browser besluit de PWA te starten. U kunt hiermee bepalen hoe de PWA wordt gestart, bijvoorbeeld in een nieuw of bestaand venster.
Definieer hoe de PWA wordt gestart via het launch_handler lid in het webappmanifest, dat een subveld met de naam client_mode bevat. Dit subveld bepaalt of een nieuw of bestaand venster moet worden gebruikt en of er moet worden genavigeerd. De toegestane waarden voor client_mode zijn:
-
focus-existing: Om de koppeling in een bestaand app-venster te verwerken, zoals een PWA die al in de stand-alone modus draait. -
navigate-existing: met deze optie navigeert de meest recent gebruikte browsecontext in een web-appvenster naar de doel-URL van de lancering. -
navigate-new: met deze optie wordt een nieuwe browsecontext gemaakt in een web-appvenster om de doel-URL van de lancering te laden.
Gebruik de launchQueue API om extra parameters op te geven en speciale gevallen af te handelen. De Launch Handler API is beschikbaar vanaf Chrome 110, maar wordt veel nuttiger met de update van de navigatieregistratie. Meer informatie hierover vindt u in de documentatie van de Launch Handler API .
Andere gerelateerde API's
Naast de lanceringsafhandeling kunnen ook andere API's een rol spelen in dit proces, afhankelijk van de specifieke behoeften van uw app. Voorbeelden hiervan zijn URL Protocol Handlers , waarmee een webapp kan registreren dat deze URL-schema's kan verwerken die verder gaan dan de standaard http en https (bijvoorbeeld standaardprotocollen zoals mailto: of aangepaste protocollen zoals web+music ). Met de Web App Scope Extensions API (momenteel in ontwikkeling) kunt u de reikwijdte van uw PWA uitbreiden om links van andere bronnen te verzamelen, inclusief subdomeinen. Wanneer een gebruiker op een link van een gekoppelde bron klikt, kan de PWA worden gelanceerd. Het valt buiten het bestek van dit artikel om hier uitgebreid op in te gaan, maar u kunt de bijbehorende links raadplegen voor meer informatie.
Gebruiksvoorbeeld: Google Chat-links vastleggen in de Chat PWA
Tot slot leggen we uit hoe de verschillende onderdelen samenwerken aan de hand van het voorbeeld van het klikken op een Google Agenda-link naar een Google Chat-room, voor een gebruiker die de Google Chat PWA al heeft geïnstalleerd.
Vóór het vastleggen van de navigatie
In de volgende video maakt een gebruiker een Google Agenda-vergadering aan en nodigt hij drie gasten uit. De Agenda-app genereert automatisch een Google Chat-link met alle deelnemers. Wanneer de gebruiker op deze link klikt, wordt de chatroom geopend in een nieuw browsertabblad. Een pictogram in de adresbalk geeft vervolgens aan dat er een bijbehorende PWA is geïnstalleerd, maar dat de gebruiker deze handmatig moet starten. Dit was het gedrag vóór de update van de navigatieregistratie:
Na het vastleggen van de navigatie
De volgende video toont dezelfde gebruikersworkflow, maar nu met het nieuwe navigatieregistratiegedrag. In deze versie wordt bij het klikken op de Google Chat-link vanuit Google Agenda de bijbehorende chatroom direct in de geïnstalleerde PWA geopend. Bovendien heeft het Google Chat-team Launch Handling geïmplementeerd door een launch_handler kenmerk toe te voegen aan het webappmanifest. Door de client_mode in te stellen op focus-existing , zorgen ze ervoor dat de link wordt geopend in een bestaande PWA-instantie, indien deze al actief is. Door de latentie te verwijderen die gepaard gaat met het openen van een nieuw browsertabblad en het vervolgens activeren van een paginalading, kan de effectieve 'tijd tot gebruikersinteractiviteit', door het ontwerp, worden versneld. Google Chat heeft de navigatielatentie zelfs aanzienlijk verbeterd door de noodzaak voor het starten van een nieuwe app weg te nemen.
Conclusie en volgende stappen
In dit artikel wordt het nieuwe standaard navigatieregistratiegedrag van Chrome 139 besproken, met de nadruk op een veelvoorkomend gebruiksvoorbeeld waarbij een gebruiker op een HTTPS-link klikt binnen het bereik van een geïnstalleerde PWA. Meer informatie en gebruiksvoorbeelden vindt u in Navigatiebeheer in geïnstalleerde PWA's . Het volgende diagram toont een volledige uitsplitsing van de gebruiksvoorbeelden, inclusief gebruikersgebeurtenissen, -oppervlakken en -protocollen, met de bijbehorende resultaten:
Navigatiebeheer is een cruciaal, maar vaak over het hoofd gezien, aspect van de gebruikerservaring van je app, omdat het het toegangspunt bepaalt. De functies en links die in dit artikel worden besproken, kunnen je helpen de best mogelijke app-achtige ervaring voor je PWA te creëren.