Chrome 105 introduce due nuovi metodi nella NavigateEvent dell'API di navigazione (introdotto nella versione 102) per migliorare i metodi che si sono dimostrati problematici nella pratica. intercept(), che consente agli sviluppatori di controllare lo stato dopo la navigazione, sostituisce transitionWhile(), che si è dimostrato difficile da utilizzare. Il metodo scroll(), che scorre fino a un'ancora specificata nell'URL, sostituisce restoreScroll(), che non funziona per tutti i tipi di navigazione.
In questo articolo spiegherò i problemi di entrambi e come 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 indica al browser e ad altre parti dell'applicazione web che è terminata.
Questo approccio non ha funzionato bene nella pratica. Considera questo modello di programmazione comune:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Questa funzione è equivalente al codice riportato di seguito. Consente di eseguire una parte della navigazione prima che l'API sia consapevole dell'intenzione dello sviluppatore di intercettarla.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Un esempio di questo aspetto può compromettere un'app è la logica di ripristino tramite scorrimento, in cui quest'ultima 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 accetta un gestore oltre alle proprietà focusReset e scrollRestoration supportate da transitionWhile(). Il nuovo gestore viene eseguito sempre dopo i commit di navigazione e vengono acquisite informazioni 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 intercept()
NavigateEvent.intercept() ha le stesse limitazioni di transitionWhile(), in quanto non può essere chiamato in tutti gli eventi di navigazione. Non è possibile intercettare le navigazioni tra origini né i traversali tra documenti. In questo modo verrà generato un DOMException di tipo "SecurityError".
Per utilizzare intercept(), è sufficiente passare il tuo gestore personalizzato quando lo chiami.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
La navigazione, ad esempio dalla parte superiore della pagina a un'ancora (da /a a /a#id), viene gestita completamente dal browser anche in un'app a pagina singola. Tuttavia, la navigazione a un'ancora su un'altra "pagina" (da /a a /b#id), che è semplice per le app multipagina, è più complicata 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'ancora. Come indicato sopra, al momento è difficile farlo.
Che cosa è cambiato
Nelle app a pagina singola, ora puoi controllare se è il browser a gestire lo scorrimento fino a un'ancora o se è il tuo codice.
Utilizzo di scroll()
Per impostazione predefinita, il browser tenterà di gestire automaticamente lo scorrimento una volta completata l'intercettazione. Se vuoi gestire lo scorrimento autonomamente, imposta scroll su "manual" e poi 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 aggiornare presto il nostro articolo sull'API Navigation. Nel frattempo, le specifiche di questa API contengono molte informazioni specifiche per gli sviluppatori web.