Zmiany w nawigacji Event w Chrome 105

Joe Medley
Joe Medley

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 polega problem i jak można je rozwiązać dzięki nowym metodom.

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();
    }
  });
});

Nawigacja, na przykład przejście z góry strony do reklamy zakotwiczonej (przejście z /a do /a#id), jest w całości obsługiwane przez przeglądarkę, nawet w aplikacji jednostronicowej. przejście do reklamy zakotwiczonej na innej „stronie” (od /a do /b#id), które jest proste w przypadku aplikacji wielostronicowych, jest bardziej skomplikowane w przypadku aplikacji jednostronicowych. Aplikacja musi przechwycić nawigację do adresu /b#id za pomocą metody 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.

Autor zdjęcia: Tim Gouw, Unsplash