W Chrome 105 wprowadziliśmy 2 nowe metody w NavigateEvent interfejsu Navigation API (wprowadzone w wersji 102), aby udoskonalić metody, które w praktyce okazały się problematyczne. intercept(), który pozwala deweloperom kontrolować stan po nawigacji, zastępuje 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 we wszystkich typach nawigacji.
W tym artykule wyjaśnię, jakie są problemy obu tych typów, a także jak nowe metody mogą je rozwiązać.
NavigateEvent.transitionWhile()
Metoda NavigateEvent.trasitionWhile(), wprowadzona w interfejsie API nawigacji w Chrome 102, przechwytuje nawigację w przypadku przejść po stronie klienta w aplikacjach na jednej stronie. Pierwszym argumentem jest obietnica, która sygnalizuje przeglądarce i innym częściom aplikacji internetowej, że przetwarzanie zostało zakończone.
W praktyce okazało się to nieskuteczne. Przeanalizujmy ten popularny schemat kodowania:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Jest to odpowiednik poniższego kodu. Powoduje to, że część nawigacji działa, zanim interfejs API wie, że deweloper chce przechwycić nawigację.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Przykładem, w którym może to zakłócić działanie aplikacji, jest logika przywracania przewijania, czyli przechwytywanie pozycji przewijania po zmianie DOM, a nie wcześniej.
Co się zmieniło?
Aby zastąpić transitionWhile(), obecna specyfikacja wprowadza NavigateEvent.intercept(). Nowa metoda wymaga modułu obsługi oprócz właściwości focusReset i scrollRestoration obsługiwanych przez transitionWhile(). Nowy moduł obsługi zawsze uruchamia się po zatwierdzeniach nawigacji i zarejestrowano takie elementy jak pozycje przewijania, dzięki czemu można uniknąć problemów z elementem transitionWhile().
Metoda transitionWhile() jest nadal dostępna, ale została wycofana i zostanie usunięta w Chrome 108.
Korzystanie z funkcji przecięcia
Element NavigateEvent.intercept() ma takie same ograniczenia jak właściwość transitionWhile(), ponieważ nie może być wywoływany w przypadku wszystkich zdarzeń nawigacji. Nie można przechwytywać nawigacji między domenami ani przechwytywać informacji między dokumentami. Spowoduje to zgłoszenie DOMException typu "SecurityError".
Aby używać elementu intercept(), po prostu przekaż niestandardową obsługę podczas jej wywoływania.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
Nawigacja, na przykład z góry strony do zakotwiczenia (czyli przejście z /a do /a#id), jest obsługiwana w całości przez przeglądarkę nawet w aplikacji składającej się z jednej strony. Jednak w przypadku aplikacji jednostronicowych przejście do kotwicy na innej „stronie” (z /a do /b#id), co jest łatwiejsze w przypadku aplikacji na wielu stronach, jest bardziej skomplikowane. Aplikacja musi przechwycić nawigację do witryny /b#id za pomocą metody NavigateEvent.transitionWhile(), a następnie wywołać metodę NavigateEvent.restoreScroll(), aby wyświetlić reklamę zakotwiczoną. Jak już wspomnieliśmy, jest to obecnie trudne.
Co się zmieniło?
W aplikacjach jednostronicowych możesz teraz kontrolować, czy przeglądarka obsługuje przewijanie do postaci zakotwiczonej, czy też kod ma to robić.
Korzystanie z funkcji Scroll()
Domyślnie po wykonaniu czynności przez narzędzie przechwytujące przeglądarka spróbuje automatycznie obsłużyć przewijanie. Jeśli chcesz samodzielnie obsługiwać przewijanie, ustaw scroll na "manual", a następnie wywołaj NavigateEvent.scroll(), gdy przeglądarka powinna pró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 uda nam się zaktualizować nasz artykuł o interfejsie API nawigacji. Tymczasem specyfikacja tego interfejsu API zawiera wiele informacji przeznaczonych specjalnie dla programistów stron internetowych.