Mestring av Navigation API: Ruting og historikkadministrasjon for Single Page Applications

Navigation API representerer et betydelig fremskritt i hvordan vi håndterer ruting og historikkadministrasjon i Single Page Applications (SPA-er). Tradisjonelle metoder er ofte avhengige av å manipulere `window.location`-objektet eller benytte tredjepartsbiblioteker. Selv om disse tilnærmingene har tjent oss godt, tilbyr Navigation API en mer strømlinjeformet, ytelsessterk og funksjonsrik løsning, som gir utviklere større kontroll over brukerens navigasjonsopplevelse.

Hva er Navigation API?

Navigation API er et moderne nettleser-API designet for å forenkle og forbedre måten SPA-er håndterer navigasjon, ruting og historikk på. Det introduserer et nytt `navigation`-objekt, som tilbyr metoder og hendelser som lar utviklere fange opp og kontrollere navigasjonshendelser, oppdatere URL-en og opprettholde en konsekvent nettleserhistorikk uten fullstendige sidelastinger. Dette resulterer i en raskere, jevnere og mer responsiv brukeropplevelse.

Fordeler ved å bruke Navigation API

• Forbedret ytelse: Ved å eliminere fullstendige sidelastinger forbedrer Navigation API ytelsen til SPA-er betydelig. Overganger mellom ulike visninger blir raskere og jevnere, noe som fører til en mer engasjerende brukeropplevelse.
• Forbedret kontroll: API-et gir finkornet kontroll over navigasjonshendelser, noe som lar utviklere fange opp og endre navigasjonsatferd etter behov. Dette inkluderer å forhindre navigasjon, omdirigere brukere og utføre tilpasset logikk før eller etter navigasjon skjer.
• Forenklet historikkadministrasjon: Håndtering av nettleserens historikkstakk gjøres enklere med Navigation API. Utviklere kan programmatisk legge til, erstatte og navigere gjennom historikkoppføringer, noe som sikrer en konsekvent og forutsigbar nettleseropplevelse.
• Deklarativ navigasjon: Navigation API oppmuntrer til en mer deklarativ tilnærming til ruting, og lar utviklere definere navigasjonsregler og -atferd på en klar og konsis måte. Dette forbedrer kodens lesbarhet og vedlikeholdbarhet.
• Integrasjon med moderne rammeverk: Navigation API er designet for å integreres sømløst med moderne JavaScript-rammeverk og -biblioteker, som React, Angular og Vue.js. Dette lar utviklere utnytte API-ets funksjoner i sine eksisterende utviklingsarbeidsflyter.

Kjernekonsepter og funksjoner

1. `navigation`-objektet

Hjertet av Navigation API er `navigation`-objektet, som er tilgjengelig via det globale `window`-objektet (dvs. `window.navigation`). Dette objektet gir tilgang til ulike egenskaper og metoder relatert til navigasjon, inkludert:

• `currentEntry`: Returnerer et `NavigationHistoryEntry`-objekt som representerer den nåværende oppføringen i navigasjonshistorikken.
• `entries()`: Returnerer en matrise av `NavigationHistoryEntry`-objekter som representerer alle oppføringene i navigasjonshistorikken.
• `navigate(url, { state, info, replace })`: Navigerer til en ny URL.
• `back()`: Navigerer tilbake til forrige historikkoppføring.
• `forward()`: Navigerer fremover til neste historikkoppføring.
• `reload()`: Laster den nåværende siden på nytt.
• `addEventListener(event, listener)`: Legger til en hendelseslytter for navigasjonsrelaterte hendelser.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry`-grensesnittet representerer en enkelt oppføring i navigasjonshistorikken. Det gir informasjon om oppføringen, som dens URL, tilstand og unike ID.

• `url`: URL-en til historikkoppføringen.
• `key`: En unik identifikator for historikkoppføringen.
• `id`: En annen unik identifikator, spesielt nyttig for å spore livssyklusen til en navigasjonshendelse.
• `sameDocument`: En boolsk verdi som indikerer om navigasjonen resulterer i en samme-dokument-navigasjon.
• `getState()`: Returnerer tilstanden knyttet til historikkoppføringen (satt under navigasjon).

3. Navigasjonshendelser

Navigation API sender ut flere hendelser som lar utviklere overvåke og kontrollere navigasjonsatferd. Disse hendelsene inkluderer:

• `navigate`: Utløses når en navigasjon initieres (f.eks. ved å klikke på en lenke, sende inn et skjema eller kalle `navigation.navigate()`). Dette er den primære hendelsen for å fange opp og håndtere navigasjonsforespørsler.
• `navigatesuccess`: Utløses når en navigasjon fullføres vellykket.
• `navigateerror`: Utløses når en navigasjon mislykkes (f.eks. på grunn av en nettverksfeil eller et uhåndtert unntak).
• `currentchange`: Utløses når den nåværende historikkoppføringen endres (f.eks. når man navigerer fremover eller bakover).
• `dispose`: Utløses når en `NavigationHistoryEntry` ikke lenger er tilgjengelig, for eksempel når den fjernes fra historikken under en `replaceState`-operasjon.

Implementering av ruting med Navigation API: Et praktisk eksempel

La oss illustrere hvordan man bruker Navigation API for å implementere grunnleggende ruting i en enkel SPA. Se for deg en applikasjon med tre visninger: Hjem, Om oss og Kontakt.

Først, lag en funksjon for å håndtere ruteendringer:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Hjem
Velkommen til Hjem-siden!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
Om oss
Lær mer om oss.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Ta kontakt med oss.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Ikke funnet
Siden ble ikke funnet.
';
  }
}

Deretter legger du til en hendelseslytter for `navigate`-hendelsen:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Forhindre standard nettlesernavigasjon

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Løs promiset etter rutehåndtering
  });

  event.transition = promise;
});

Denne koden fanger opp `navigate`-hendelsen, trekker ut URL-en fra `event.destination`-objektet, forhindrer standard nettlesernavigasjon, kaller `handleRouteChange` for å oppdatere innholdet, og setter `event.transition`-promiset. Å sette `event.transition` sikrer at nettleseren venter på at innholdsoppdateringen er fullført før den visuelt oppdaterer siden.

Til slutt kan du lage lenker som utløser navigasjon:

Hjem | Om oss | Kontakt

Og legg til en klikk-lytter på disse lenkene:

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

Dette setter opp grunnleggende klient-side-ruting ved hjelp av Navigation API. Nå vil klikk på lenkene utløse en navigasjonshendelse som oppdaterer innholdet i `content`-diven uten en fullstendig sidelasting.

Legge til tilstandshåndtering

Navigation API lar deg også knytte tilstand (state) til hver historikkoppføring. Dette er nyttig for å bevare data på tvers av navigasjonshendelser. La oss endre det forrige eksempelet for å inkludere et tilstandsobjekt.

Når du kaller `navigation.navigate()`, kan du sende med et `state`-objekt:

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

Inne i `navigate`-hendelseslytteren kan du få tilgang til tilstanden ved hjelp av `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 || 'Min App'; // Standardtittel

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Hjem
Velkommen til Hjem-siden!
';
      title = 'Hjem';
      break;
    case '/about':
      contentDiv.innerHTML = '
Om oss
Lær mer om oss.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Ta kontakt med oss.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Ikke funnet
Siden ble ikke funnet.
';
      title = '404 Ikke funnet';
  }
  document.title = title;
}

I dette modifiserte eksempelet aksepterer `handleRouteChange`-funksjonen nå en `state`-parameter og bruker den til å oppdatere dokumenttittelen. Hvis ingen tilstand sendes med, blir standardverdien 'Min App'.

Bruk av `navigation.updateCurrentEntry()`

Noen ganger vil du kanskje oppdatere tilstanden til den nåværende historikkoppføringen uten å utløse en ny navigasjon. `navigation.updateCurrentEntry()`-metoden lar deg gjøre dette. For eksempel, hvis en bruker endrer en innstilling på den nåværende siden, kan du oppdatere tilstanden for å reflektere den endringen:

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

// Eksempel på bruk:
updateUserSetting('theme', 'dark');

Denne funksjonen henter den nåværende tilstanden, fletter inn den oppdaterte innstillingen, og oppdaterer deretter den nåværende historikkoppføringen med den nye tilstanden.

Avanserte bruksområder og betraktninger

1. Håndtering av skjemainnsendinger

Navigation API kan brukes til å håndtere skjemainnsendinger i SPA-er, noe som forhindrer fullstendig sidelasting og gir en mer sømløs brukeropplevelse. Du kan fange opp skjemainnsendingshendelsen og bruke `navigation.navigate()` til å oppdatere URL-en og vise resultatene uten en fullstendig sidelasting.

2. Asynkrone operasjoner

Når du håndterer navigasjonshendelser, kan det hende du må utføre asynkrone operasjoner, som å hente data fra et API. `event.transition`-egenskapen lar deg knytte et promise til navigasjonshendelsen, noe som sikrer at nettleseren venter på at den asynkrone operasjonen er fullført før siden oppdateres. Se eksemplene ovenfor.

3. Gjenoppretting av rulleposisjon

Å opprettholde rulleposisjonen under navigasjon er avgjørende for å gi en god brukeropplevelse. Navigation API gir mekanismer for å gjenopprette rulleposisjonen når du navigerer bakover eller fremover i historikken. Du kan bruke `scroll`-egenskapen til `NavigationHistoryEntry` for å lagre og gjenopprette rulleposisjonen.

4. Feilhåndtering

Det er viktig å håndtere feil som kan oppstå under navigasjon, som nettverksfeil eller uhåndterte unntak. `navigateerror`-hendelsen lar deg fange opp og håndtere disse feilene på en elegant måte, og forhindrer at applikasjonen krasjer eller viser en feilmelding til brukeren.

5. Progressiv forbedring

Når du bygger SPA-er med Navigation API, er det viktig å vurdere progressiv forbedring. Sørg for at applikasjonen din fungerer korrekt selv om Navigation API ikke støttes av nettleseren. Du kan bruke funksjonsdeteksjon for å sjekke om `navigation`-objektet finnes og falle tilbake på tradisjonelle rutingsmetoder om nødvendig.

Sammenligning med tradisjonelle rutingsmetoder

Tradisjonelle rutingsmetoder i SPA-er er ofte avhengige av å manipulere `window.location`-objektet eller bruke tredjepartsbiblioteker som `react-router` eller `vue-router`. Selv om disse metodene er mye brukt og veletablerte, har de noen begrensninger:

• Fullstendig sidelasting: Direkte manipulering av `window.location` kan utløse fullstendige sidelastinger, noe som kan være tregt og forstyrrende for brukeropplevelsen.
• Kompleksitet: Å håndtere historikk og tilstand med tradisjonelle metoder kan være komplekst og feilutsatt, spesielt i store og komplekse applikasjoner.
• Ytelsesoverhead: Tredjeparts rutingsbiblioteker kan legge til betydelig ytelsesoverhead, spesielt hvis de ikke er optimalisert for de spesifikke behovene til applikasjonen din.

Navigation API løser disse begrensningene ved å tilby en mer strømlinjeformet, ytelsessterk og funksjonsrik løsning for ruting og historikkadministrasjon. Det eliminerer fullstendige sidelastinger, forenkler historikkadministrasjon og gir finkornet kontroll over navigasjonshendelser.

Nettleserkompatibilitet

Per slutten av 2024 har Navigation API god støtte i moderne nettlesere, inkludert Chrome, Firefox, Safari og Edge. Det er imidlertid alltid lurt å sjekke den nyeste informasjonen om nettleserkompatibilitet på ressurser som Can I use før du implementerer Navigation API i produksjonsapplikasjonene dine. Hvis støtte for eldre nettlesere er et must, bør du vurdere å bruke en polyfill eller en fallback-mekanisme.

Konklusjon

Navigation API er et kraftig verktøy for å bygge moderne, ytelsessterke SPA-er med avanserte ruting- og historikkadministrasjonsmuligheter. Ved å utnytte API-ets funksjoner kan utviklere skape raskere, jevnere og mer engasjerende brukeropplevelser. Selv om den innledende læringskurven kan være litt brattere sammenlignet med å bruke enklere, eldre metoder, gjør fordelene med Navigation API, spesielt i komplekse applikasjoner, det til en verdifull investering. Omfavn Navigation API og lås opp det fulle potensialet til dine SPA-er.

Videre læring

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