Chrome 105 introduit deux nouvelles méthodes sur le NavigateEvent de l'API Navigation (introduite en 102) afin d'améliorer les méthodes qui se sont avérées problématiques dans la pratique. intercept(), qui permet aux développeurs de contrôler l'état après la navigation, remplace transitionWhile(), qui s'est révélé difficile à utiliser. La méthode scroll(), qui fait défiler la page jusqu'à un point d'ancrage spécifié dans l'URL, remplace restoreScroll(), qui ne fonctionne pas pour tous les types de navigation.
Dans cet article, je vais vous expliquer les problèmes qui peuvent se produire avec ces deux méthodes et comment les nouvelles méthodes permettent de les résoudre.
NavigateEvent.transitionWhile()
La méthode NavigateEvent.trasitionWhile(), introduite avec l'API Navigation dans Chrome 102, intercepte la navigation pour les transitions côté client dans les applications monopages. Son premier argument est une promesse qui signale au navigateur et à d'autres parties de l'application Web que l'opération est terminée.
Dans la pratique, cela n'a pas fonctionné. Prenons ce modèle de codage courant:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
D'un point de vue fonctionnel, cela équivaut au code ci-dessous. Une partie de la navigation s'exécute avant que l'API ne sache que le développeur a l'intention de l'intercepter.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Par exemple, la logique de restauration du défilement peut perturber une application, où elle capture les positions de défilement après la modification DOM plutôt qu'avant.
Modifications apportées
Pour remplacer transitionWhile(), la spécification actuelle introduit NavigateEvent.intercept(). La nouvelle méthode utilise un gestionnaire en plus des propriétés focusReset et scrollRestoration compatibles avec transitionWhile(). Le nouveau gestionnaire s'exécute toujours après le commit de la navigation et des éléments tels que les positions de défilement ont été capturés, ce qui évite les problèmes avec transitionWhile().
La méthode transitionWhile() est toujours disponible, mais elle est obsolète et sera supprimée dans Chrome 108.
Utiliser intercept()
NavigateEvent.intercept() présente les mêmes restrictions que transitionWhile(), car il ne peut pas être appelé pour tous les événements de navigation. Les navigations multi-origines ne peuvent pas être interceptées, pas plus que les balayages multidocuments. Cela générerait une exception DOMException de type "SecurityError".
Pour utiliser intercept(), il vous suffit de transmettre votre gestionnaire personnalisé lorsque vous l'appelez.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
Une navigation du haut de la page vers une ancre (appelée passer de /a à /a#id) est entièrement gérée par le navigateur, même dans une application monopage. Toutefois, la navigation vers une ancre sur une autre "page" (/a vers /b#id), qui est simple pour les applications multipages, est plus compliquée pour les applications monopages. L'application doit intercepter la navigation vers /b#id à l'aide de NavigateEvent.transitionWhile(), puis appeler NavigateEvent.restoreScroll() pour afficher l'ancre. Comme indiqué ci-dessus, cette opération est actuellement difficile.
Modifications apportées
Dans les applications monopages, vous pouvez désormais contrôler si le navigateur gère le défilement vers une ancre ou si votre code le fait.
Utiliser Scroll()
Par défaut, le navigateur tente de gérer le défilement automatiquement, une fois que l'intercepteur a terminé. Si vous souhaitez gérer le défilement vous-même, définissez scroll sur "manual", puis appelez NavigateEvent.scroll() lorsque le navigateur doit tenter de définir la position de défilement.
navigation.addEventListener("manual", event => {
scroll: "manual",
event.intercept({
async handler() {
doSyncStuff();
// Handle scrolling earlier than by default:
event.scroll();
await doAsyncStuff();
}
});
});
La méthode restoreScroll() est toujours disponible, mais elle est obsolète et sera supprimée dans Chrome 108.
Conclusion
Nous espérons pouvoir bientôt mettre à jour notre article sur l'API Navigation. En attendant, les spécifications de cette API contiennent de nombreuses informations spécifiquement destinées aux développeurs Web.