Chrome 105 introduit deux nouvelles méthodes sur le NavigateEvent de l'API Navigation (introduite dans la version 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 avéré difficile à utiliser. La méthode scroll(), qui défile jusqu'à une ancre spécifiée dans l'URL, remplace restoreScroll(), qui ne fonctionne pas pour tous les types de navigation.
Cet article décrit les problèmes liés à 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 schéma de codage courant:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
D'un point de vue fonctionnel, ce code est équivalent au code ci-dessous. Cela entraîne l'exécution d'une partie de la navigation avant que l'API ne sache que le développeur a l'intention d'intercepter la navigation.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Par exemple, cela peut perturber une application dans la logique de restauration du défilement, qui capture les positions de défilement après le changement 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 la capture d'éléments tels que les positions de défilement, 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, de même que les balayages entre documents. Cela générera une 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 telle que celle du haut de la page vers une ancre (appelez-la en passant de /a à /a#id) est entièrement gérée par le navigateur, même dans une application monopage. Toutefois, accéder à une ancre sur une autre "page" (/a à /b#id), qui est simple pour les applications multipages, est plus compliqué 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 déterminer si le navigateur gère le défilement jusqu'à une ancre ou si votre code le fait.
Utiliser défilement()
Par défaut, le navigateur tentera de gérer automatiquement le défilement une fois que la personne à l'origine de l'interception a rempli le formulaire. Si vous souhaitez gérer vous-même le défilement, définissez scroll sur "manual", puis appelez NavigateEvent.scroll() lorsque le navigateur doit essayer 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 mettre bientôt à jour notre article sur l'API Navigation. En attendant, les spécifications de cette API contiennent de nombreuses informations destinées spécifiquement aux développeurs Web.