Chrome 105 wprowadza 2 nowe metody w interfejsie NavigateEvent interfejsu Navigation API (opisanego w 102 r.), aby usprawnić metody, które okazały się w praktyce problematyczne. Funkcja intercept(), która pozwala programistom kontrolować stan po nawigacji, zastępuje interfejs transitionWhile(), który był trudny w użyciu. Metoda scroll(), która przewija się do kotwicy określonej w adresie URL, zastępuje metodę restoreScroll(), która nie działa w przypadku niektórych rodzajów nawigacji.
W tym artykule wyjaśnię, na czym polegają problemy i jak można je rozwiązać dzięki nowym metodom.
NavigateEvent.transitionWhile()
Metoda NavigateEvent.trasitionWhile(), wprowadzona w interfejsie Navigation API w Chrome 102, przechwytuje nawigację w przypadku przejść po stronie klienta w aplikacjach jednostronicowych. Pierwszym z nich jest obietnica, która informuje przeglądarkę i inne części aplikacji internetowej o jej ukończeniu.
W praktyce kiepsko się to sprawdzało. Przyjrzyjmy się temu wspólnemu formatowi kodowania:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Pod względem funkcjonalnym jest odpowiednikiem poniższego kodu. Powoduje to, że pewna część nawigacji jest uruchamiana, zanim interfejs API wykryje, że deweloper zamierza przechwycić nawigację.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Jednym z przykładów może to zakłócić działanie aplikacji, jest logika przywracania przewijania, w której rejestruje pozycję przewijania po zmianie DOM, a nie przed.
Co się zmieniło?
Obecna specyfikacja zastąpiła interfejs transitionWhile() NavigateEvent.intercept(). Nowa metoda korzysta z modułu obsługi oraz właściwości focusReset i scrollRestoration obsługiwanych przez transitionWhile(). Nowy moduł obsługi zawsze uruchamia się po zatwierdzeniach nawigacji i zostały przechwycone takie elementy jak pozycje przewijania, co pozwala uniknąć problemów z funkcją transitionWhile().
Metoda transitionWhile() jest nadal dostępna, ale została wycofana i zostanie usunięta w Chrome 108.
Korzystanie z funkcji intercept()
Element NavigateEvent.intercept() ma te same ograniczenia co transitionWhile(), ponieważ nie może być wywoływany w przypadku wszystkich zdarzeń związanych z nawigacją. Nie można przechwycić nawigacji z innych domen ani przemierzenia między dokumentami. Spowoduje to zgłoszenie żądania DOMException typu "SecurityError".
Aby używać funkcji intercept(), po prostu przekaż jej niestandardowy moduł obsługi podczas jego wywoływania.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
Nawigacja z góry strony do reklamy zakotwiczonej (przenoszenie z /a do /a#id) jest w całości obsługiwana przez przeglądarkę, nawet w aplikacji składającej się z jednej strony. Jednak przejście do kotwicy na innej „stronie” (od /a do /b#id), co jest proste w przypadku aplikacji wielostronicowych, jest trudniejsze w przypadku aplikacji jednostronicowych. Aplikacja musi przechwycić nawigację do /b#id za pomocą polecenia NavigateEvent.transitionWhile(), a następnie wywołać funkcję NavigateEvent.restoreScroll(), aby wyświetliła się kotwica. Jak wspomnieliśmy powyżej, jest to obecnie trudne do wykonania.
Co się zmieniło?
W aplikacjach jednostronicowych możesz teraz określić, czy przeglądarka obsługuje przewijanie do kotwicy, a także czy kod ma to robić.
Korzystanie z przewijania()
Domyślnie przeglądarka próbuje automatycznie obsłużyć przewijanie, gdy funkcja przechwytywania zostanie wykonana. Jeśli chcesz samodzielnie obsługiwać przewijanie, ustaw scroll na "manual", a następnie wywołaj NavigateEvent.scroll(), gdy przeglądarka powinna spróbować ustawić pozycję przewijania.
navigation.addEventListener("manual", event => {
scroll: "manual",
event.intercept({
async handler() {
doSyncStuff();
// Handle scrolling earlier than by default:
event.scroll();
await doAsyncStuff();
}
});
});
Metoda restoreScroll() jest nadal dostępna, ale została wycofana i zostanie usunięta w Chrome 108.
Podsumowanie
Mamy nadzieję, że wkrótce zaktualizujemy nasz artykuł na temat interfejsu Navigation API. Tymczasem specyfikacja tego interfejsu API zawiera wiele informacji na temat programistów stron internetowych.