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 è 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 di entrambi e in che modo i nuovi metodi li risolvono.
NavigateEvent.transitionWhile()
Il metodo NavigateEvent.trasitionWhile(), introdotto con l'API di navigazione in Chrome 102, intercetta la navigazione per le transizioni lato client nelle app a pagina singola. Il suo primo argomento è una promessa che segnala al browser e ad altre parti dell'applicazione web che il processo è terminato.
Nella pratica questo ha funzionato male. Considera questo modello di programmazione comune:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Questa funzione è equivalente al codice riportato di seguito. Questo determina l'esecuzione di parte della navigazione prima che l'API venga a conoscenza del fatto che lo sviluppatore intende intercettare la navigazione.
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 sempre eseguito dopo il commit della navigazione e, ad esempio, sono state acquisite le posizioni di scorrimento, evitando i problemi relativi a transitionWhile().
Il metodo transitionWhile() è ancora disponibile, ma è stato ritirato e verrà rimosso in Chrome 108.
Utilizzo di intercetta()
NavigateEvent.intercept() ha le stesse limitazioni di transitionWhile(), perché non può essere chiamato in tutti gli eventi di navigazione. Le navigazioni tra origini non possono essere intercettate e nemmeno gli attraversamenti tra documenti. In questo modo verrà restituito un elemento 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()
Una navigazione come quella dalla parte superiore della pagina a un ancoraggio (da /a a /a#id) è gestita completamente dal browser anche in un'app con una sola pagina. Tuttavia, passare a un ancoraggio su 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 questa operazione è difficile.
Che cosa è cambiato
Nelle app a pagina singola, ora puoi stabilire se il browser deve gestire lo scorrimento fino a un ancoraggio o se deve gestire il tuo codice.
Utilizzo dello scorrimento()
Per impostazione predefinita, il browser tenterà di gestire automaticamente lo scorrimento una volta completata l'intercettazione. Se vuoi gestire personalmente lo scorrimento, 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 ritirato e verrà rimosso in Chrome 108.
Conclusione
Ci auguriamo di aggiornare presto il nostro articolo sull'API di navigazione. Nel frattempo, le specifiche di questa API contengono molte informazioni specifiche per gli sviluppatori web.