Chrome 105 introduce due nuovi metodi nell'NavigateEvent dell'API Navigation (introdotta nella versione 102) per migliorare i metodi che si sono rivelati problematici nella pratica. intercept(), che consente agli sviluppatori di controllare lo stato dopo la navigazione, sostituisce transitionWhile(), che si è rivelato difficile da usare. Il metodo scroll(), che scorre fino a un ancoraggio specificato nell'URL, sostituisce restoreScroll(), che non funziona per tutti i tipi di navigazione.
In questo articolo, spiegherò i problemi entrambi e in che modo i nuovi metodi li risolvono.
NavigateEvent.transitionWhile()
Il metodo NavigateEvent.trasitionWhile(), introdotto con l'API Navigation in Chrome 102, intercetta la navigazione per le transizioni lato client nelle app a pagina singola. Il primo argomento è una promessa che segnala al browser e ad altre parti dell'applicazione web che l'operazione è terminata.
Questo approccio ha funzionato male nella pratica. Considera questo schema di programmazione comune:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Questa funzionalità equivale al codice riportato di seguito. Questo fa sì che una parte della navigazione venga eseguita prima che l'API venga a sapere che lo sviluppatore intende intercettare la navigazione.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Un esempio in cui questo può rovinare un'app è la logica di ripristino dello scorrimento, in cui acquisisce le posizioni di scorrimento dopo la modifica del DOM, anziché prima.
Che cosa è cambiato
Per sostituire transitionWhile(), la specifica corrente introduce NavigateEvent.intercept(). Il nuovo metodo utilizza un gestore oltre alle proprietà focusReset e scrollRestoration supportate da transitionWhile(). Il nuovo gestore viene sempre eseguito dopo i commit di navigazione e sono stati acquisiti elementi come le posizioni di scorrimento, evitando i problemi con transitionWhile().
Il metodo transitionWhile() è ancora disponibile, ma è stato deprecato e verrà rimosso in Chrome 108.
Utilizzo di intercetta()
NavigateEvent.intercept() ha le stesse restrizioni di transitionWhile(), in quanto non può essere chiamato per tutti gli eventi di navigazione. Le navigazioni tra origini non possono essere intercettate né tra documenti diversi. Verrà generato un elemento DOMException di tipo "SecurityError".
Per utilizzare intercept(), è sufficiente passare il gestore personalizzato quando lo chiami.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
Una navigazione come quella dalla parte superiore della pagina a un ancoraggio (chiamato passaggio da /a a /a#id) viene gestita completamente dal browser anche all'interno di un'app a pagina singola. Tuttavia, passare a un ancoraggio in un'altra "pagina" (da /a a /b#id), che è semplice per le app con più pagine, è più complicato per le app a pagina singola. L'app deve intercettare la navigazione verso /b#id utilizzando NavigateEvent.transitionWhile(), quindi chiamare NavigateEvent.restoreScroll() per visualizzare l'ancoraggio. Come indicato sopra, al momento non è possibile farlo.
Che cosa è cambiato
Nelle app a pagina singola, ora puoi controllare se il browser deve gestire lo scorrimento verso un ancoraggio o se il tuo codice lo fa.
Utilizzo di scroll()
Per impostazione predefinita, il browser tenterà di gestire lo scorrimento automaticamente una volta completato l'intercettazione. Se vuoi gestire lo scorrimento autonomamente, imposta scroll su "manual", quindi chiama NavigateEvent.scroll() quando il browser deve tentare di impostare la posizione di scorrimento.
navigation.addEventListener("manual", event => {
scroll: "manual",
event.intercept({
async handler() {
doSyncStuff();
// Handle scrolling earlier than by default:
event.scroll();
await doAsyncStuff();
}
});
});
Il metodo restoreScroll() è ancora disponibile, ma è stato deprecato e verrà rimosso in Chrome 108.
Conclusione
Ci auguriamo di poter aggiornare presto il nostro articolo sull'API di navigazione. Nel frattempo, le specifiche di questa API contengono molte informazioni specifiche per gli sviluppatori web.