Zvládnutí Navigation API: Routování a správa historie v jednostránkových aplikacích

Navigation API představuje významný pokrok ve způsobu, jakým zpracováváme routování a správu historie v jednostránkových aplikacích (Single Page Applications, SPA). Tradiční metody se často spoléhají na manipulaci s objektem `window.location` nebo na využití knihoven třetích stran. Ačkoli nám tyto přístupy dobře posloužily, Navigation API nabízí efektivnější, výkonnější a funkčně bohatší řešení, které vývojářům poskytuje větší kontrolu nad navigační zkušeností uživatele.

Co je Navigation API?

Navigation API je moderní prohlížečové API navržené tak, aby zjednodušilo a vylepšilo způsob, jakým SPA spravují navigaci, routování a historii. Zavádí nový objekt `navigation`, který poskytuje metody a události umožňující vývojářům zachytit a ovládat navigační události, aktualizovat URL a udržovat konzistentní historii procházení bez úplného znovunačtení stránky. Výsledkem je rychlejší, plynulejší a responzivnější uživatelský zážitek.

Výhody použití Navigation API

• Zlepšený výkon: Eliminací úplného znovunačtení stránky Navigation API výrazně zlepšuje výkon SPA. Přechody mezi různými pohledy se stávají rychlejšími a plynulejšími, což vede k poutavějšímu uživatelskému zážitku.
• Vylepšená kontrola: API poskytuje detailní kontrolu nad navigačními událostmi, což umožňuje vývojářům zachytit a upravit chování navigace podle potřeby. To zahrnuje zabránění navigaci, přesměrování uživatelů a spouštění vlastní logiky před nebo po navigaci.
• Zjednodušená správa historie: Správa zásobníku historie prohlížeče je s Navigation API snazší. Vývojáři mohou programově přidávat, nahrazovat a procházet položky historie, což zajišťuje konzistentní a předvídatelný zážitek z procházení.
• Deklarativní navigace: Navigation API podporuje deklarativnější přístup k routování, což umožňuje vývojářům definovat navigační pravidla a chování jasným a stručným způsobem. To zlepšuje čitelnost a udržovatelnost kódu.
• Integrace s moderními frameworky: Navigation API je navrženo pro bezproblémovou integraci s moderními JavaScriptovými frameworky a knihovnami, jako jsou React, Angular a Vue.js. To umožňuje vývojářům využívat funkce API v rámci jejich stávajících vývojových postupů.

Základní koncepty a funkce

1. Objekt `navigation`

Srdcem Navigation API je objekt `navigation`, který je přístupný přes globální objekt `window` (tj. `window.navigation`). Tento objekt poskytuje přístup k různým vlastnostem a metodám souvisejícím s navigací, včetně:

• `currentEntry`: Vrací objekt `NavigationHistoryEntry` představující aktuální položku v historii navigace.
• `entries()`: Vrací pole objektů `NavigationHistoryEntry` představujících všechny položky v historii navigace.
• `navigate(url, { state, info, replace })`: Přejde na novou URL.
• `back()`: Přejde zpět na předchozí položku historie.
• `forward()`: Přejde vpřed na následující položku historie.
• `reload()`: Znovu načte aktuální stránku.
• `addEventListener(event, listener)`: Přidá posluchač událostí pro události související s navigací.

2. `NavigationHistoryEntry`

Rozhraní `NavigationHistoryEntry` představuje jednu položku v historii navigace. Poskytuje informace o položce, jako je její URL, stav a jedinečné ID.

• `url`: URL položky historie.
• `key`: Jedinečný identifikátor pro položku historie.
• `id`: Další jedinečný identifikátor, zvláště užitečný pro sledování životního cyklu navigační události.
• `sameDocument`: Booleovská hodnota udávající, zda navigace vede k navigaci v rámci stejného dokumentu.
• `getState()`: Vrací stav spojený s položkou historie (nastavený během navigace).

3. Navigační události

Navigation API spouští několik událostí, které umožňují vývojářům sledovat a ovládat chování navigace. Mezi tyto události patří:

• `navigate`: Spuštěna, když je zahájena navigace (např. kliknutím na odkaz, odesláním formuláře nebo voláním `navigation.navigate()`). Toto je primární událost pro zachycení a zpracování navigačních požadavků.
• `navigatesuccess`: Spuštěna, když se navigace úspěšně dokončí.
• `navigateerror`: Spuštěna, když se navigace nezdaří (např. kvůli síťové chybě nebo nezpracované výjimce).
• `currentchange`: Spuštěna, když se změní aktuální položka historie (např. při navigaci vpřed nebo vzad).
• `dispose`: Spuštěna, když `NavigationHistoryEntry` již není dostupná, například když je odstraněna z historie během operace `replaceState`.

Implementace routování s Navigation API: Praktický příklad

Ukážeme si, jak použít Navigation API k implementaci základního routování v jednoduché SPA. Představte si aplikaci se třemi pohledy: Domů, O nás a Kontakt.

Nejprve vytvořte funkci pro zpracování změn trasy:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/_':
      contentDiv.innerHTML = '
Domů
Vítejte na domovské stránce!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
O nás
Zjistěte více o nás.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Spojte se s námi.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nenalezeno
Stránka nebyla nalezena.
';
  }
}

Dále přidejte posluchač událostí pro událost `navigate`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Zabrání výchozí navigaci prohlížeče

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Vyřeší promise po zpracování trasy
  });

  event.transition = promise;
});

Tento kód zachytí událost `navigate`, extrahuje URL z objektu `event.destination`, zabrání výchozí navigaci prohlížeče, zavolá `handleRouteChange` pro aktualizaci obsahu a nastaví promise `event.transition`. Nastavení `event.transition` zajišťuje, že prohlížeč počká na dokončení aktualizace obsahu, než vizuálně aktualizuje stránku.

Nakonec můžete vytvořit odkazy, které spouštějí navigaci:

Domů | O nás | Kontakt

A připojte k těmto odkazům posluchač kliknutí:

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

Tímto je nastaveno základní klientské routování pomocí Navigation API. Nyní kliknutí na odkazy spustí navigační událost, která aktualizuje obsah divu `content` bez úplného znovunačtení stránky.

Přidání správy stavu

Navigation API také umožňuje přiřadit stav ke každé položce historie. To je užitečné pro zachování dat mezi navigačními událostmi. Upravme předchozí příklad tak, aby zahrnoval objekt stavu.

Při volání `navigation.navigate()` můžete předat objekt `state`:

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

Uvnitř posluchače události `navigate` můžete přistupovat ke stavu 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 || 'Moje Aplikace'; // Výchozí titulek

  switch (url) {
    case '/_':
      contentDiv.innerHTML = '
Domů
Vítejte na domovské stránce!
';
      title = 'Domů';
      break;
    case '/about':
      contentDiv.innerHTML = '
O nás
Zjistěte více o nás.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Spojte se s námi.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nenalezeno
Stránka nebyla nalezena.
';
      title = '404 Nenalezeno';
  }
  document.title = title;
}

V tomto upraveném příkladu funkce `handleRouteChange` nyní přijímá parametr `state` a používá jej k aktualizaci titulku dokumentu. Pokud není předán žádný stav, použije se výchozí 'Moje Aplikace'.

Použití `navigation.updateCurrentEntry()`

Někdy můžete chtít aktualizovat stav aktuální položky historie bez spuštění nové navigace. Metoda `navigation.updateCurrentEntry()` vám to umožňuje. Například, pokud uživatel změní nastavení na aktuální stránce, můžete aktualizovat stav, aby tuto změnu odrážel:

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

// Příklad použití:
updateUserSetting('theme', 'dark');

Tato funkce získá aktuální stav, sloučí do něj aktualizované nastavení a poté aktualizuje aktuální položku historie novým stavem.

Pokročilé případy použití a úvahy

1. Zpracování odesílání formulářů

Navigation API lze použít ke zpracování odesílání formulářů v SPA, čímž se zabrání úplnému znovunačtení stránky a poskytne plynulejší uživatelský zážitek. Můžete zachytit událost odeslání formuláře a použít `navigation.navigate()` k aktualizaci URL a zobrazení výsledků bez úplného znovunačtení stránky.

2. Asynchronní operace

Při zpracování navigačních událostí může být nutné provádět asynchronní operace, jako je načítání dat z API. Vlastnost `event.transition` vám umožňuje spojit s navigační událostí promise, což zajišťuje, že prohlížeč počká na dokončení asynchronní operace před aktualizací stránky. Viz příklady výše.

3. Obnovení pozice posouvání

Udržování pozice posouvání během navigace je klíčové pro poskytnutí dobrého uživatelského zážitku. Navigation API poskytuje mechanismy pro obnovení pozice posouvání při navigaci zpět nebo vpřed v historii. Můžete použít vlastnost `scroll` objektu `NavigationHistoryEntry` k uložení a obnovení pozice posouvání.

4. Zpracování chyb

Je nezbytné zpracovávat chyby, které mohou nastat během navigace, jako jsou síťové chyby nebo nezpracované výjimky. Událost `navigateerror` vám umožňuje tyto chyby elegantně zachytit a zpracovat, čímž zabráníte pádu aplikace nebo zobrazení chybové zprávy uživateli.

5. Progresivní vylepšování

Při tvorbě SPA s Navigation API je důležité myslet na progresivní vylepšování (progressive enhancement). Ujistěte se, že vaše aplikace funguje správně, i když Navigation API není prohlížečem podporováno. Můžete použít detekci funkcí ke kontrole přítomnosti objektu `navigation` a v případě potřeby se vrátit k tradičním metodám routování.

Srovnání s tradičními metodami routování

Tradiční metody routování v SPA se často spoléhají na manipulaci s objektem `window.location` nebo na použití knihoven třetích stran jako `react-router` nebo `vue-router`. I když jsou tyto metody široce používané a zavedené, mají některá omezení:

• Úplné znovunačtení stránky: Přímá manipulace s `window.location` může spustit úplné znovunačtení stránky, což může být pomalé a rušivé pro uživatelský zážitek.
• Složitost: Správa historie a stavu pomocí tradičních metod může být složitá a náchylná k chybám, zejména ve velkých a komplexních aplikacích.
• Výkonnostní zátěž: Knihovny pro routování třetích stran mohou přidat značnou výkonnostní zátěž, zvláště pokud nejsou optimalizovány pro specifické potřeby vaší aplikace.

Navigation API řeší tato omezení tím, že poskytuje efektivnější, výkonnější a funkčně bohatší řešení pro routování a správu historie. Eliminuje úplné znovunačtení stránky, zjednodušuje správu historie a poskytuje detailní kontrolu nad navigačními událostmi.

Kompatibilita s prohlížeči

Ke konci roku 2024 má Navigation API dobrou podporu v moderních prohlížečích, včetně Chrome, Firefox, Safari a Edge. Nicméně je vždy dobrým zvykem zkontrolovat nejnovější informace o kompatibilitě prohlížečů na zdrojích jako je Can I use před implementací Navigation API ve vašich produkčních aplikacích. Pokud je podpora starších prohlížečů nutností, zvažte použití polyfillu nebo záložního mechanismu.

Závěr

Navigation API je mocný nástroj pro tvorbu moderních, výkonných SPA s pokročilými možnostmi routování a správy historie. Využitím funkcí API mohou vývojáři vytvářet rychlejší, plynulejší a poutavější uživatelské zážitky. Ačkoli počáteční křivka učení může být o něco strmější ve srovnání s používáním jednodušších, starších metod, výhody Navigation API, zejména ve složitých aplikacích, z něj činí investici, která se vyplatí. Využijte Navigation API a odemkněte plný potenciál vašich SPA.

Další zdroje

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