Opanowanie Navigation API: Routing i Zarządzanie Historią w Aplikacjach Jednostronicowych (SPA)

Navigation API stanowi znaczący postęp w sposobie obsługi routingu i zarządzania historią w aplikacjach jednostronicowych (SPA). Tradycyjne metody często polegają na manipulowaniu obiektem `window.location` lub wykorzystaniu bibliotek firm trzecich. Chociaż te podejścia dobrze nam służyły, Navigation API oferuje bardziej usprawnione, wydajne i bogate w funkcje rozwiązanie, zapewniając programistom większą kontrolę nad nawigacją użytkownika.

Czym jest Navigation API?

Navigation API to nowoczesne API przeglądarki zaprojektowane w celu uproszczenia i ulepszenia sposobu, w jaki aplikacje SPA zarządzają nawigacją, routingiem i historią. Wprowadza nowy obiekt `navigation`, udostępniając metody i zdarzenia, które pozwalają programistom przechwytywać i kontrolować zdarzenia nawigacyjne, aktualizować adres URL i utrzymywać spójną historię przeglądania bez pełnego przeładowania strony. Skutkuje to szybszym, płynniejszym i bardziej responsywnym doświadczeniem użytkownika.

Korzyści z używania Navigation API

• Poprawiona wydajność: Eliminując pełne przeładowania strony, Navigation API znacząco poprawia wydajność aplikacji SPA. Przejścia między różnymi widokami stają się szybsze i płynniejsze, co prowadzi do bardziej angażującego doświadczenia użytkownika.
• Zwiększona kontrola: API zapewnia precyzyjną kontrolę nad zdarzeniami nawigacyjnymi, umożliwiając programistom przechwytywanie i modyfikowanie zachowania nawigacji w razie potrzeby. Obejmuje to zapobieganie nawigacji, przekierowywanie użytkowników i wykonywanie niestandardowej logiki przed lub po nawigacji.
• Uproszczone zarządzanie historią: Zarządzanie stosem historii przeglądarki staje się łatwiejsze dzięki Navigation API. Programiści mogą programowo dodawać, zastępować i przechodzić przez wpisy historii, zapewniając spójne i przewidywalne doświadczenie przeglądania.
• Deklaratywna nawigacja: Navigation API zachęca do bardziej deklaratywnego podejścia do routingu, pozwalając programistom definiować reguły i zachowania nawigacyjne w jasny i zwięzły sposób. Poprawia to czytelność i łatwość utrzymania kodu.
• Integracja z nowoczesnymi frameworkami: Navigation API jest zaprojektowane do bezproblemowej integracji z nowoczesnymi frameworkami i bibliotekami JavaScript, takimi jak React, Angular i Vue.js. Umożliwia to programistom wykorzystanie funkcji API w ramach ich istniejących przepływów pracy.

Podstawowe koncepcje i funkcje

1. Obiekt `navigation`

Sercem Navigation API jest obiekt `navigation`, dostępny poprzez globalny obiekt `window` (tj. `window.navigation`). Obiekt ten zapewnia dostęp do różnych właściwości i metod związanych z nawigacją, w tym:

• `currentEntry`: Zwraca obiekt `NavigationHistoryEntry` reprezentujący bieżący wpis w historii nawigacji.
• `entries()`: Zwraca tablicę obiektów `NavigationHistoryEntry` reprezentujących wszystkie wpisy w historii nawigacji.
• `navigate(url, { state, info, replace })`: Nawiguje do nowego adresu URL.
• `back()`: Nawiguje do poprzedniego wpisu w historii.
• `forward()`: Nawiguje do następnego wpisu w historii.
• `reload()`: Przeładowuje bieżącą stronę.
• `addEventListener(event, listener)`: Dodaje nasłuchiwacz zdarzeń dla zdarzeń związanych z nawigacją.

2. `NavigationHistoryEntry`

Interfejs `NavigationHistoryEntry` reprezentuje pojedynczy wpis w historii nawigacji. Dostarcza informacji o wpisie, takich jak jego URL, stan i unikalny identyfikator.

• `url`: Adres URL wpisu w historii.
• `key`: Unikalny identyfikator dla wpisu w historii.
• `id`: Inny unikalny identyfikator, szczególnie przydatny do śledzenia cyklu życia zdarzenia nawigacyjnego.
• `sameDocument`: Wartość logiczna wskazująca, czy nawigacja skutkuje nawigacją w obrębie tego samego dokumentu.
• `getState()`: Zwraca stan powiązany z wpisem w historii (ustawiony podczas nawigacji).

3. Zdarzenia nawigacyjne

Navigation API wywołuje kilka zdarzeń, które pozwalają programistom monitorować i kontrolować zachowanie nawigacji. Zdarzenia te obejmują:

• `navigate`: Wywoływane, gdy inicjowana jest nawigacja (np. przez kliknięcie linku, wysłanie formularza lub wywołanie `navigation.navigate()`). Jest to główne zdarzenie do przechwytywania i obsługi żądań nawigacyjnych.
• `navigatesuccess`: Wywoływane, gdy nawigacja zakończy się pomyślnie.
• `navigateerror`: Wywoływane, gdy nawigacja zakończy się niepowodzeniem (np. z powodu błędu sieciowego lub nieobsłużonego wyjątku).
• `currentchange`: Wywoływane, gdy zmienia się bieżący wpis w historii (np. podczas nawigacji do przodu lub do tyłu).
• `dispose`: Wywoływane, gdy `NavigationHistoryEntry` nie jest już osiągalny, na przykład gdy jest usuwany z historii podczas operacji `replaceState`.

Implementacja routingu z Navigation API: Praktyczny przykład

Zilustrujmy, jak używać Navigation API do implementacji podstawowego routingu w prostej aplikacji SPA. Rozważmy aplikację z trzema widokami: Strona główna, O nas i Kontakt.

Najpierw utwórzmy funkcję do obsługi zmian trasy:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Strona główna
Witaj na stronie głównej!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
O nas
Dowiedz się więcej o nas.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Skontaktuj się z nami.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nie znaleziono
Strona nie została znaleziona.
';
  }
}

Następnie dodajmy nasłuchiwacz zdarzeń do zdarzenia `navigate`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Zapobiegaj domyślnej nawigacji przeglądarki

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Rozwiąż obietnicę po obsłużeniu trasy
  });

  event.transition = promise;
});

Ten kod przechwytuje zdarzenie `navigate`, wyodrębnia adres URL z obiektu `event.destination`, zapobiega domyślnej nawigacji przeglądarki, wywołuje `handleRouteChange` w celu aktualizacji treści i ustawia obietnicę `event.transition`. Ustawienie `event.transition` zapewnia, że przeglądarka poczeka na zakończenie aktualizacji treści przed wizualną aktualizacją strony.

Na koniec możesz utworzyć linki, które wyzwalają nawigację:

Strona główna | O nas | Kontakt

I dołącz do tych linków nasłuchiwacz kliknięć:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

W ten sposób konfigurujemy podstawowy routing po stronie klienta za pomocą Navigation API. Teraz kliknięcie w linki spowoduje wyzwolenie zdarzenia nawigacyjnego, które zaktualizuje zawartość elementu `content` bez pełnego przeładowania strony.

Dodawanie zarządzania stanem

Navigation API pozwala również na powiązanie stanu z każdym wpisem w historii. Jest to przydatne do zachowywania danych między zdarzeniami nawigacyjnymi. Zmodyfikujmy poprzedni przykład, aby zawierał obiekt stanu.

Podczas wywoływania `navigation.navigate()`, możesz przekazać obiekt `state`:

window.navigation.navigate('/about', { state: { pageTitle: 'O nas' } });

Wewnątrz nasłuchiwacza zdarzenia `navigate`, możesz uzyskać dostęp do stanu za pomocą `event.destination.getState()`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Moja Aplikacja'; // Domyślny tytuł

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Strona główna
Witaj na stronie głównej!
';
      title = 'Strona główna';
      break;
    case '/about':
      contentDiv.innerHTML = '
O nas
Dowiedz się więcej o nas.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Skontaktuj się z nami.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nie znaleziono
Strona nie została znaleziona.
';
      title = '404 Nie znaleziono';
  }
  document.title = title;
}

W tym zmodyfikowanym przykładzie funkcja `handleRouteChange` akceptuje teraz parametr `state` i używa go do aktualizacji tytułu dokumentu. Jeśli żaden stan nie zostanie przekazany, domyślnie przyjmuje wartość 'Moja Aplikacja'.

Używanie `navigation.updateCurrentEntry()`

Czasami możesz chcieć zaktualizować stan bieżącego wpisu w historii bez wyzwalania nowej nawigacji. Metoda `navigation.updateCurrentEntry()` pozwala na to. Na przykład, jeśli użytkownik zmieni ustawienie na bieżącej stronie, możesz zaktualizować stan, aby odzwierciedlić tę zmianę:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Zaktualizowano ustawienie:', setting, 'na', value);
}

// Przykładowe użycie:
updateUserSetting('theme', 'dark');

Ta funkcja pobiera bieżący stan, łączy go ze zaktualizowanym ustawieniem, a następnie aktualizuje bieżący wpis w historii nowym stanem.

Zaawansowane przypadki użycia i uwagi

1. Obsługa wysyłania formularzy

Navigation API może być używane do obsługi wysyłania formularzy w aplikacjach SPA, zapobiegając pełnym przeładowaniom strony i zapewniając płynniejsze doświadczenie użytkownika. Możesz przechwycić zdarzenie wysłania formularza i użyć `navigation.navigate()`, aby zaktualizować adres URL i wyświetlić wyniki bez pełnego przeładowania strony.

2. Operacje asynchroniczne

Podczas obsługi zdarzeń nawigacyjnych może być konieczne wykonanie operacji asynchronicznych, takich jak pobieranie danych z API. Właściwość `event.transition` pozwala powiązać obietnicę ze zdarzeniem nawigacyjnym, zapewniając, że przeglądarka poczeka na zakończenie operacji asynchronicznej przed aktualizacją strony. Zobacz przykłady powyżej.

3. Przywracanie przewijania

Utrzymanie pozycji przewijania podczas nawigacji jest kluczowe dla zapewnienia dobrego doświadczenia użytkownika. Navigation API zapewnia mechanizmy do przywracania pozycji przewijania podczas nawigacji wstecz lub w przód w historii. Możesz użyć właściwości `scroll` obiektu `NavigationHistoryEntry`, aby przechowywać i przywracać pozycję przewijania.

4. Obsługa błędów

Niezbędne jest obsłużenie błędów, które mogą wystąpić podczas nawigacji, takich jak błędy sieciowe lub nieobsłużone wyjątki. Zdarzenie `navigateerror` pozwala elegancko przechwytywać i obsługiwać te błędy, zapobiegając awarii aplikacji lub wyświetlaniu komunikatu o błędzie użytkownikowi.

5. Progressive Enhancement

Podczas tworzenia aplikacji SPA z Navigation API ważne jest, aby wziąć pod uwagę progressive enhancement (stopniowe ulepszanie). Upewnij się, że Twoja aplikacja działa poprawnie, nawet jeśli Navigation API nie jest obsługiwane przez przeglądarkę. Możesz użyć wykrywania funkcji, aby sprawdzić obecność obiektu `navigation` i w razie potrzeby wrócić do tradycyjnych metod routingu.

Porównanie z tradycyjnymi metodami routingu

Tradycyjne metody routingu w aplikacjach SPA często polegają na manipulowaniu obiektem `window.location` lub używaniu bibliotek firm trzecich, takich jak `react-router` czy `vue-router`. Chociaż te metody są powszechnie stosowane i dobrze ugruntowane, mają pewne ograniczenia:

• Pełne przeładowania strony: Bezpośrednia manipulacja `window.location` może wywołać pełne przeładowanie strony, co może być powolne i uciążliwe dla użytkownika.
• Złożoność: Zarządzanie historią i stanem za pomocą tradycyjnych metod może być skomplikowane i podatne na błędy, szczególnie w dużych i złożonych aplikacjach.
• Narzut wydajnościowy: Biblioteki routingu firm trzecich mogą wprowadzać znaczny narzut wydajnościowy, zwłaszcza jeśli nie są zoptymalizowane pod kątem konkretnych potrzeb Twojej aplikacji.

Navigation API rozwiązuje te ograniczenia, zapewniając bardziej usprawnione, wydajne i bogate w funkcje rozwiązanie do routingu i zarządzania historią. Eliminuje pełne przeładowania strony, upraszcza zarządzanie historią i zapewnia precyzyjną kontrolę nad zdarzeniami nawigacyjnymi.

Kompatybilność z przeglądarkami

Na koniec 2024 roku Navigation API cieszy się dobrym wsparciem w nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge. Jednak zawsze dobrą praktyką jest sprawdzenie najnowszych informacji o kompatybilności przeglądarek na stronach takich jak Can I use przed wdrożeniem Navigation API w aplikacjach produkcyjnych. Jeśli wsparcie dla starszych przeglądarek jest koniecznością, rozważ użycie polyfilla lub mechanizmu zastępczego.

Podsumowanie

Navigation API to potężne narzędzie do tworzenia nowoczesnych, wydajnych aplikacji SPA z zaawansowanymi możliwościami routingu i zarządzania historią. Wykorzystując funkcje API, programiści mogą tworzyć szybsze, płynniejsze i bardziej angażujące doświadczenia użytkownika. Chociaż początkowa krzywa uczenia się może być nieco bardziej stroma w porównaniu z prostszymi, starszymi metodami, zalety Navigation API, szczególnie w złożonych aplikacjach, sprawiają, że jest to inwestycja warta zachodu. Odkryj Navigation API i uwolnij pełny potencjał swoich aplikacji SPA.

Dalsza nauka

• MDN Web Docs: Navigation API
• Specyfikacja WICG Navigation API