Obvladovanje API-ja za navigacijo: Usmerjanje in upravljanje zgodovine v enostranskih aplikacijah (SPA)

API za navigacijo predstavlja pomemben napredek pri obravnavi usmerjanja in upravljanja zgodovine znotraj enostranskih aplikacij (SPA). Tradicionalne metode se pogosto zanašajo na manipulacijo objekta `window.location` ali uporabo knjižnic tretjih oseb. Čeprav so nam ti pristopi dobro služili, API za navigacijo ponuja bolj poenostavljeno, zmogljivo in s funkcijami bogato rešitev, ki razvijalcem omogoča večji nadzor nad uporabniško izkušnjo navigacije.

Kaj je API za navigacijo?

API za navigacijo je sodoben brskalniški API, zasnovan za poenostavitev in izboljšanje načina, kako SPA-ji upravljajo navigacijo, usmerjanje in zgodovino. Uvaja nov objekt `navigation`, ki ponuja metode in dogodke, ki razvijalcem omogočajo prestrezanje in nadzor navigacijskih dogodkov, posodabljanje URL-ja in ohranjanje dosledne zgodovine brskanja brez polnega ponovnega nalaganja strani. To prinaša hitrejšo, bolj gladko in odzivnejšo uporabniško izkušnjo.

Prednosti uporabe API-ja za navigacijo

• Izboljšana zmogljivost: Z odpravo polnih ponovnih nalaganj strani API za navigacijo znatno izboljša delovanje SPA-jev. Prehodi med različnimi pogledi postanejo hitrejši in bolj gladki, kar vodi do bolj privlačne uporabniške izkušnje.
• Izboljšan nadzor: API omogoča natančen nadzor nad navigacijskimi dogodki, kar razvijalcem omogoča prestrezanje in spreminjanje obnašanja navigacije po potrebi. To vključuje preprečevanje navigacije, preusmerjanje uporabnikov in izvajanje logike po meri pred ali po navigaciji.
• Poenostavljeno upravljanje zgodovine: Upravljanje sklada zgodovine brskalnika je z API-jem za navigacijo lažje. Razvijalci lahko programsko dodajajo, zamenjujejo in prehajajo med vnosi v zgodovini, kar zagotavlja dosledno in predvidljivo izkušnjo brskanja.
• Deklarativna navigacija: API za navigacijo spodbuja bolj deklarativen pristop k usmerjanju, kar razvijalcem omogoča, da na jasen in jedrnat način določijo pravila in obnašanje navigacije. To izboljša berljivost in vzdrževanje kode.
• Integracija s sodobnimi ogrodji: API za navigacijo je zasnovan za nemoteno integracijo s sodobnimi JavaScript ogrodji in knjižnicami, kot so React, Angular in Vue.js. To razvijalcem omogoča uporabo funkcij API-ja znotraj njihovih obstoječih razvojnih procesov.

Osnovni koncepti in funkcije

1. Objekt `navigation`

Srce API-ja za navigacijo je objekt `navigation`, ki je dostopen prek globalnega objekta `window` (tj. `window.navigation`). Ta objekt omogoča dostop do različnih lastnosti in metod, povezanih z navigacijo, vključno z:

• `currentEntry`: Vrne objekt `NavigationHistoryEntry`, ki predstavlja trenutni vnos v zgodovini navigacije.
• `entries()`: Vrne polje objektov `NavigationHistoryEntry`, ki predstavljajo vse vnose v zgodovini navigacije.
• `navigate(url, { state, info, replace })`: Navigira na nov URL.
• `back()`: Navigira nazaj na prejšnji vnos v zgodovini.
• `forward()`: Navigira naprej na naslednji vnos v zgodovini.
• `reload()`: Ponovno naloži trenutno stran.
• `addEventListener(event, listener)`: Doda poslušalca dogodkov za dogodke, povezane z navigacijo.

2. `NavigationHistoryEntry`

Vmesnik `NavigationHistoryEntry` predstavlja en sam vnos v zgodovini navigacije. Zagotavlja informacije o vnosu, kot so njegov URL, stanje in edinstven ID.

• `url`: URL vnosa v zgodovini.
• `key`: Edinstven identifikator za vnos v zgodovini.
• `id`: Še en edinstven identifikator, ki je še posebej uporaben za sledenje življenjskega cikla navigacijskega dogodka.
• `sameDocument`: Logična vrednost, ki označuje, ali navigacija povzroči navigacijo znotraj istega dokumenta.
• `getState()`: Vrne stanje, povezano z vnosom v zgodovini (nastavljeno med navigacijo).

3. Navigacijski dogodki

API za navigacijo sproži več dogodkov, ki razvijalcem omogočajo spremljanje in nadzor obnašanja navigacije. Ti dogodki vključujejo:

• `navigate`: Sproži se, ko se začne navigacija (npr. s klikom na povezavo, oddajo obrazca ali klicem `navigation.navigate()`). To je primarni dogodek za prestrezanje in obravnavo zahtev za navigacijo.
• `navigatesuccess`: Sproži se, ko se navigacija uspešno zaključi.
• `navigateerror`: Sproži se, ko navigacija ne uspe (npr. zaradi napake v omrežju ali neobravnavane izjeme).
• `currentchange`: Sproži se, ko se spremeni trenutni vnos v zgodovini (npr. pri navigaciji naprej ali nazaj).
• `dispose`: Sproži se, ko `NavigationHistoryEntry` ni več dosegljiv, na primer, ko je odstranjen iz zgodovine med operacijo `replaceState`.

Implementacija usmerjanja z API-jem za navigacijo: Praktičen primer

Poglejmo si, kako uporabiti API za navigacijo za implementacijo osnovnega usmerjanja v preprosti SPA. Predstavljajmo si aplikacijo s tremi pogledi: Domov, O nas in Kontakt.

Najprej ustvarimo funkcijo za obravnavo sprememb poti:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/_':
      contentDiv.innerHTML = '
Domov
Dobrodošli na domači strani!
';
      break;
    case '/o-nas':
      contentDiv.innerHTML = '
O nas
Izvedite več o nas.
';
      break;
    case '/kontakt':
      contentDiv.innerHTML = '
Kontakt
Stopite v stik z nami.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Ni najdeno
Stran ni bila najdena.
';
  }
}

Nato dodajmo poslušalca dogodkov za dogodek `navigate`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Prepreči privzeto navigacijo brskalnika

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Razreši obljubo po obravnavi poti
  });

  event.transition = promise;
});

Ta koda prestreže dogodek `navigate`, izlušči URL iz objekta `event.destination`, prepreči privzeto navigacijo brskalnika, pokliče `handleRouteChange` za posodobitev vsebine in nastavi obljubo `event.transition`. Nastavitev `event.transition` zagotavlja, da brskalnik počaka na dokončanje posodobitve vsebine, preden vizualno posodobi stran.

Na koncu lahko ustvarite povezave, ki sprožijo navigacijo:

Domov | O nas | Kontakt

In tem povezavam pripnite poslušalca klikov:

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

S tem smo nastavili osnovno usmerjanje na strani odjemalca z uporabo API-ja za navigacijo. Zdaj bo klik na povezave sprožil navigacijski dogodek, ki bo posodobil vsebino elementa `content` brez polnega ponovnega nalaganja strani.

Dodajanje upravljanja stanja

API za navigacijo omogoča tudi povezovanje stanja z vsakim vnosom v zgodovini. To je uporabno za ohranjanje podatkov med navigacijskimi dogodki. Spremenimo prejšnji primer, da vključimo objekt stanja.

Pri klicu `navigation.navigate()` lahko posredujete objekt `state`:

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

Znotraj poslušalca dogodkov `navigate` lahko do stanja dostopate z uporabo `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 aplikacija'; // Privzeti naslov

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Domov
Dobrodošli na domači strani!
';
      title = 'Domov';
      break;
    case '/about':
      contentDiv.innerHTML = '
O nas
Izvedite več o nas.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Stopite v stik z nami.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Ni najdeno
Stran ni bila najdena.
';
      title = '404 Ni najdeno';
  }
  document.title = title;
}

V tem spremenjenem primeru funkcija `handleRouteChange` zdaj sprejme parameter `state` in ga uporabi za posodobitev naslova dokumenta. Če stanje ni posredovano, se privzeto uporabi 'Moja aplikacija'.

Uporaba `navigation.updateCurrentEntry()`

Včasih boste morda želeli posodobiti stanje trenutnega vnosa v zgodovini, ne da bi sprožili novo navigacijo. Metoda `navigation.updateCurrentEntry()` vam to omogoča. Na primer, če uporabnik na trenutni strani spremeni nastavitev, lahko posodobite stanje, da odraža to spremembo:

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

// Primer uporabe:
updateUserSetting('theme', 'dark');

Ta funkcija pridobi trenutno stanje, združi vanj posodobljeno nastavitev in nato posodobi trenutni vnos v zgodovini z novim stanjem.

Napredni primeri uporabe in premisleki

1. Obravnava oddaje obrazcev

API za navigacijo se lahko uporablja za obravnavo oddaje obrazcev v SPA-jih, s čimer se preprečijo polna ponovna nalaganja strani in zagotovi bolj tekoča uporabniška izkušnja. Lahko prestrežete dogodek oddaje obrazca in uporabite `navigation.navigate()` za posodobitev URL-ja in prikaz rezultatov brez polnega ponovnega nalaganja strani.

2. Asinhrono delovanje

Pri obravnavi navigacijskih dogodkov boste morda morali izvesti asinhrone operacije, kot je pridobivanje podatkov iz API-ja. Lastnost `event.transition` vam omogoča, da povežete obljubo z navigacijskim dogodkom, s čimer zagotovite, da brskalnik počaka na dokončanje asinhrone operacije, preden posodobi stran. Oglejte si zgornje primere.

3. Obnovitev položaja drsnika

Ohranjanje položaja drsnika med navigacijo je ključnega pomena za zagotavljanje dobre uporabniške izkušnje. API za navigacijo ponuja mehanizme za obnovitev položaja drsnika pri navigaciji nazaj ali naprej v zgodovini. Za shranjevanje in obnovitev položaja drsnika lahko uporabite lastnost `scroll` objekta `NavigationHistoryEntry`.

4. Obravnavanje napak

Bistveno je obravnavati napake, ki se lahko pojavijo med navigacijo, kot so napake v omrežju ali neobravnavane izjeme. Dogodek `navigateerror` vam omogoča, da te napake elegantno ujamete in obravnavate, s čimer preprečite zrušitev aplikacije ali prikaz sporočila o napaki uporabniku.

5. Progresivno izboljšanje

Pri gradnji SPA-jev z API-jem za navigacijo je pomembno upoštevati progresivno izboljšanje. Zagotovite, da vaša aplikacija deluje pravilno, tudi če brskalnik ne podpira API-ja za navigacijo. Uporabite lahko zaznavanje funkcij, da preverite prisotnost objekta `navigation` in se po potrebi vrnete na tradicionalne metode usmerjanja.

Primerjava s tradicionalnimi metodami usmerjanja

Tradicionalne metode usmerjanja v SPA-jih se pogosto zanašajo na manipulacijo objekta `window.location` ali uporabo knjižnic tretjih oseb, kot sta `react-router` ali `vue-router`. Čeprav so te metode široko uporabljene in dobro uveljavljene, imajo nekatere omejitve:

• Polna ponovna nalaganja strani: Neposredna manipulacija `window.location` lahko sproži polna ponovna nalaganja strani, kar je lahko počasno in moteče za uporabniško izkušnjo.
• Kompleksnost: Upravljanje zgodovine in stanja s tradicionalnimi metodami je lahko zapleteno in nagnjeno k napakam, zlasti v velikih in kompleksnih aplikacijah.
• Dodatna obremenitev zmogljivosti: Knjižnice za usmerjanje tretjih oseb lahko dodajo znatno dodatno obremenitev zmogljivosti, še posebej, če niso optimizirane za specifične potrebe vaše aplikacije.

API za navigacijo odpravlja te omejitve z zagotavljanjem bolj poenostavljene, zmogljive in s funkcijami bogate rešitve za usmerjanje in upravljanje zgodovine. Odpravlja polna ponovna nalaganja strani, poenostavlja upravljanje zgodovine in zagotavlja natančen nadzor nad navigacijskimi dogodki.

Združljivost z brskalniki

Konec leta 2024 ima API za navigacijo dobro podporo v sodobnih brskalnikih, vključno s Chromom, Firefoxom, Safarijem in Edgem. Vendar pa je vedno dobra praksa, da pred implementacijo API-ja za navigacijo v produkcijskih aplikacijah preverite najnovejše informacije o združljivosti brskalnikov na virih, kot je Can I use. Če je podpora za starejše brskalnike nujna, razmislite o uporabi polyfilla ali rezervnega mehanizma.

Zaključek

API za navigacijo je močno orodje za gradnjo sodobnih, zmogljivih SPA-jev z naprednimi zmožnostmi usmerjanja in upravljanja zgodovine. Z izkoriščanjem funkcij API-ja lahko razvijalci ustvarijo hitrejše, bolj gladke in bolj privlačne uporabniške izkušnje. Čeprav je začetna učna krivulja morda nekoliko strmejša v primerjavi z uporabo enostavnejših, starejših metod, prednosti API-ja za navigacijo, zlasti v kompleksnih aplikacijah, upravičijo vložek. Sprejmite API za navigacijo in odklenite polni potencial vaših SPA-jev.

Nadaljnje učenje

• MDN Web Docs: API za navigacijo
• Specifikacija WICG za API za navigacijo