Chrome 105 introduceert twee nieuwe methoden op de NavigateEvent van de navigatie-API (geïntroduceerd in 102) om methoden te verbeteren die in de praktijk problematisch zijn gebleken. intercept() , waarmee ontwikkelaars de status kunnen controleren na de navigatie, vervangt transitionWhile() , wat moeilijk te gebruiken bleek. De methode scroll() , die naar een anker scrolt dat in de URL is opgegeven, vervangt restoreScroll() wat niet voor alle typen navigatie werkt.
In dit artikel leg ik de problemen met beide uit en hoe de nieuwe methoden deze problemen oplossen.
NavigateEvent.transitionWhile()
De methode NavigateEvent.trasitionWhile() , geïntroduceerd met de navigatie-API in Chrome 102, onderschept navigatie voor overgangen aan de clientzijde in apps met één pagina. Het eerste argument is een belofte die aan de browser en aan andere delen van de webapplicatie aangeeft dat deze klaar is.
Dit werkte in de praktijk slecht. Overweeg dit algemene coderingspatroon:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Dit is functioneel gelijkwaardig aan de onderstaande code. Het zorgt ervoor dat een deel van de navigatie wordt uitgevoerd voordat de API weet dat de ontwikkelaar van plan is de navigatie te onderscheppen.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Een voorbeeld waarbij dit een app in de war kan brengen, is de logica voor scrollherstel, waarbij scrollposities worden vastgelegd na de DOM-wijziging, in plaats van ervoor.
Wat is er veranderd
Om transitionWhile() te vervangen, introduceert de huidige specificatie NavigateEvent.intercept() . De nieuwe methode gebruikt een handler naast de eigenschappen focusReset en scrollRestoration die worden ondersteund door transitionWhile() . De nieuwe handler wordt altijd uitgevoerd nadat de navigatie is vastgelegd en zaken als schuifposities zijn vastgelegd, waardoor de problemen met transitionWhile() worden vermeden.
De methode transitionWhile() is nog steeds beschikbaar, maar is verouderd en wordt verwijderd in Chrome 108.
Intercept() gebruiken
De NavigateEvent.intercept() heeft dezelfde beperkingen als transitionWhile() , omdat deze niet voor alle navigatiegebeurtenissen kan worden aangeroepen. Cross-originele navigatie kan niet worden onderschept, en dat geldt ook voor cross-document traversaties. Als u dit doet, wordt er een DOMException van het type "SecurityError" gegenereerd.
Om intercept() te gebruiken, geeft u eenvoudigweg uw aangepaste handler door wanneer u deze aanroept.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
Een navigatie zoals een navigatie vanaf de bovenkant van de pagina naar een anker (noem het verplaatsen van /a naar /a#id ) wordt volledig door de browser afgehandeld, zelfs in een app met één pagina. Maar navigeren naar een anker op een andere 'pagina' ( /a tot /b#id ), wat eenvoudig is voor apps met meerdere pagina's, is ingewikkelder voor apps met één pagina. De app moet de navigatie naar /b#id onderscheppen met behulp van NavigateEvent.transitionWhile() en vervolgens NavigateEvent.restoreScroll() aanroepen om het anker in beeld te brengen. Zoals hierboven aangegeven is dit op dit moment lastig te verwezenlijken.
Wat is er veranderd
In apps met één pagina kunt u nu bepalen of de browser het scrollen naar een anker afhandelt of dat uw code dat doet.
Scroll() gebruiken
Standaard zal de browser proberen het scrollen automatisch af te handelen, zodra de onderscheppingshander is voltooid. Als u het scrollen zelf wilt afhandelen, stelt u scroll in op "manual" en roept u NavigateEvent.scroll() aan wanneer de browser moet proberen de scrollpositie in te stellen.
navigation.addEventListener("manual", event => {
scroll: "manual",
event.intercept({
async handler() {
doSyncStuff();
// Handle scrolling earlier than by default:
event.scroll();
await doAsyncStuff();
}
});
});
De methode restoreScroll() is nog steeds beschikbaar, maar is verouderd en wordt verwijderd in Chrome 108.
Conclusie
We hopen binnenkort ons artikel over de navigatie-API te kunnen updaten. Inmiddels bevat de specificatie voor deze API veel informatie specifiek voor webontwikkelaars.