Овладяване на Navigation API: Рутиране и управление на историята в Single Page Applications

Navigation API представлява значителен напредък в начина, по който обработваме рутирането и управлението на историята в Single Page Applications (SPA). Традиционните методи често разчитат на манипулиране на обекта `window.location` или на използването на библиотеки от трети страни. Въпреки че тези подходи са ни служили добре, Navigation API предлага по-оптимизирано, производително и богато на функции решение, което предоставя на разработчиците по-голям контрол върху навигационното изживяване на потребителя.

Какво е Navigation API?

Navigation API е модерен браузърен API, предназначен да опрости и подобри начина, по който SPA управляват навигацията, рутирането и историята. Той въвежда нов обект `navigation`, който предоставя методи и събития, позволяващи на разработчиците да прихващат и контролират навигационни събития, да актуализират URL адреса и да поддържат последователна история на сърфиране без пълно презареждане на страницата. Това води до по-бързо, по-плавно и по-отзивчиво потребителско изживяване.

Предимства на използването на Navigation API

• Подобрена производителност: Чрез премахване на пълните презареждания на страници, Navigation API значително подобрява производителността на SPA. Преходите между различните изгледи стават по-бързи и по-плавни, което води до по-ангажиращо потребителско изживяване.
• Подобрен контрол: API предоставя фин контрол върху навигационните събития, позволявайки на разработчиците да прихващат и променят поведението на навигацията според нуждите. Това включва предотвратяване на навигация, пренасочване на потребители и изпълнение на персонализирана логика преди или след навигация.
• Опростено управление на историята: Управлението на стека с историята на браузъра е улеснено с Navigation API. Разработчиците могат програмно да добавят, заменят и преминават през записите в историята, осигурявайки последователно и предвидимо изживяване при сърфиране.
• Декларативна навигация: Navigation API насърчава по-декларативен подход към рутирането, позволявайки на разработчиците да дефинират правила и поведения за навигация по ясен и сбит начин. Това подобрява четливостта и поддръжката на кода.
• Интеграция с модерни фреймуърци: Navigation API е проектиран да се интегрира безпроблемно с модерни JavaScript фреймуърци и библиотеки, като React, Angular и Vue.js. Това позволява на разработчиците да използват функциите на API в съществуващите си работни процеси.

Основни концепции и функции

1. Обектът `navigation`

Сърцето на Navigation API е обектът `navigation`, който е достъпен чрез глобалния обект `window` (т.е. `window.navigation`). Този обект предоставя достъп до различни свойства и методи, свързани с навигацията, включително:

• `currentEntry`: Връща обект `NavigationHistoryEntry`, представляващ текущия запис в историята на навигацията.
• `entries()`: Връща масив от обекти `NavigationHistoryEntry`, представляващи всички записи в историята на навигацията.
• `navigate(url, { state, info, replace })`: Навигира към нов URL адрес.
• `back()`: Навигира назад към предишния запис в историята.
• `forward()`: Навигира напред към следващия запис в историята.
• `reload()`: Презарежда текущата страница.
• `addEventListener(event, listener)`: Добавя event listener за събития, свързани с навигацията.

2. `NavigationHistoryEntry`

Интерфейсът `NavigationHistoryEntry` представлява единичен запис в историята на навигацията. Той предоставя информация за записа, като неговия URL, състояние и уникален ID.

• `url`: URL адресът на записа в историята.
• `key`: Уникален идентификатор за записа в историята.
• `id`: Друг уникален идентификатор, особено полезен за проследяване на жизнения цикъл на навигационно събитие.
• `sameDocument`: Булева стойност, указваща дали навигацията води до навигация в рамките на същия документ.
• `getState()`: Връща състоянието, свързано със записа в историята (зададено по време на навигация).

3. Навигационни събития

Navigation API изпраща няколко събития, които позволяват на разработчиците да наблюдават и контролират поведението на навигацията. Тези събития включват:

• `navigate`: Изпраща се, когато се инициира навигация (напр. кликване върху връзка, изпращане на формуляр или извикване на `navigation.navigate()`). Това е основното събитие за прихващане и обработка на заявки за навигация.
• `navigatesuccess`: Изпраща се, когато навигацията завърши успешно.
• `navigateerror`: Изпраща се, когато навигацията е неуспешна (напр. поради мрежова грешка или необработено изключение).
• `currentchange`: Изпраща се, когато текущият запис в историята се промени (напр. при навигация напред или назад).
• `dispose`: Изпраща се, когато `NavigationHistoryEntry` вече не е достъпен, например когато е премахнат от историята по време на операция `replaceState`.

Прилагане на рутиране с Navigation API: Практически пример

Нека илюстрираме как да използваме Navigation API за реализиране на основно рутиране в прост SPA. Да разгледаме приложение с три изгледа: Начало, За нас и Контакти.

Първо, създайте функция за обработка на промените в маршрута:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Начало
Добре дошли на началната страница!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
За нас
Научете повече за нас.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Контакти
Свържете се с нас.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Не е намерено
Страницата не е намерена.
';
  }
}

След това добавете event listener към събитието `navigate`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Предотвратяване на навигацията по подразбиране на браузъра

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Разрешаване на promise след обработка на маршрута
  });

  event.transition = promise;
});

Този код прихваща събитието `navigate`, извлича URL адреса от обекта `event.destination`, предотвратява навигацията по подразбиране на браузъра, извиква `handleRouteChange`, за да актуализира съдържанието, и задава promise за `event.transition`. Задаването на `event.transition` гарантира, че браузърът ще изчака завършването на актуализацията на съдържанието, преди визуално да обнови страницата.

Накрая можете да създадете връзки, които задействат навигация:

Начало | За нас | Контакти

И да прикачите click listener към тези връзки:

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

Това настройва основно рутиране от страна на клиента с помощта на Navigation API. Сега кликването върху връзките ще задейства навигационно събитие, което актуализира съдържанието на `content` div без пълно презареждане на страницата.

Добавяне на управление на състоянието

Navigation API също ви позволява да асоциирате състояние с всеки запис в историята. Това е полезно за запазване на данни между навигационни събития. Нека променим предишния пример, за да включим обект на състоянието.

Когато извиквате `navigation.navigate()`, можете да подадете обект `state`:

window.navigation.navigate('/about', { state: { pageTitle: 'За нас' } });

Във event listener-а на събитието `navigate` можете да получите достъп до състоянието чрез `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 || 'Моето приложение'; // Заглавие по подразбиране

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Начало
Добре дошли на началната страница!
';
      title = 'Начало';
      break;
    case '/about':
      contentDiv.innerHTML = '
За нас
Научете повече за нас.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Контакти
Свържете се с нас.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Не е намерено
Страницата не е намерена.
';
      title = '404 Не е намерено';
  }
  document.title = title;
}

В този променен пример функцията `handleRouteChange` вече приема параметър `state` и го използва за актуализиране на заглавието на документа. Ако не се подаде състояние, то по подразбиране е 'Моето приложение'.

Използване на `navigation.updateCurrentEntry()`

Понякога може да искате да актуализирате състоянието на текущия запис в историята, без да задействате нова навигация. Методът `navigation.updateCurrentEntry()` ви позволява да направите това. Например, ако потребител промени настройка на текущата страница, можете да актуализирате състоянието, за да отразите тази промяна:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Актуализирана настройка:', setting, 'на', value);
}

// Примерна употреба:
updateUserSetting('theme', 'dark');

Тази функция извлича текущото състояние, обединява го с актуализираната настройка и след това актуализира текущия запис в историята с новото състояние.

Разширени случаи на употреба и съображения

1. Обработка на изпращане на формуляри

Navigation API може да се използва за обработка на изпращане на формуляри в SPA, като се предотвратяват пълни презареждания на страницата и се осигурява по-безпроблемно потребителско изживяване. Можете да прихванете събитието за изпращане на формуляр и да използвате `navigation.navigate()`, за да актуализирате URL адреса и да покажете резултатите без пълно презареждане на страницата.

2. Асинхронни операции

При обработка на навигационни събития може да се наложи да извършвате асинхронни операции, като например извличане на данни от API. Свойството `event.transition` ви позволява да асоциирате promise с навигационното събитие, като по този начин гарантирате, че браузърът ще изчака завършването на асинхронната операция, преди да актуализира страницата. Вижте примерите по-горе.

3. Възстановяване на позицията на скрола

Поддържането на позицията на скрола по време на навигация е от решаващо значение за осигуряване на добро потребителско изживяване. Navigation API предоставя механизми за възстановяване на позицията на скрола при навигация назад или напред в историята. Можете да използвате свойството `scroll` на `NavigationHistoryEntry`, за да съхранявате и възстановявате позицията на скрола.

4. Обработка на грешки

От съществено значение е да се обработват грешки, които могат да възникнат по време на навигация, като мрежови грешки или необработени изключения. Събитието `navigateerror` ви позволява да уловите и обработите тези грешки елегантно, като предотвратите срив на приложението или показване на съобщение за грешка на потребителя.

5. Прогресивно подобряване

При изграждането на SPA с Navigation API е важно да се има предвид прогресивното подобряване (progressive enhancement). Уверете се, че приложението ви работи правилно, дори ако Navigation API не се поддържа от браузъра. Можете да използвате откриване на функции (feature detection), за да проверите за наличието на обекта `navigation` и да се върнете към традиционните методи за рутиране, ако е необходимо.

Сравнение с традиционните методи за рутиране

Традиционните методи за рутиране в SPA често разчитат на манипулиране на обекта `window.location` или на използването на библиотеки от трети страни като `react-router` или `vue-router`. Въпреки че тези методи са широко използвани и добре установени, те имат някои ограничения:

• Пълно презареждане на страницата: Директното манипулиране на `window.location` може да предизвика пълно презареждане на страницата, което може да бъде бавно и да наруши потребителското изживяване.
• Сложност: Управлението на историята и състоянието с традиционни методи може да бъде сложно и податливо на грешки, особено в големи и сложни приложения.
• Натоварване на производителността: Библиотеките за рутиране от трети страни могат да добавят значително натоварване върху производителността, особено ако не са оптимизирани за специфичните нужди на вашето приложение.

Navigation API адресира тези ограничения, като предоставя по-оптимизирано, производително и богато на функции решение за рутиране и управление на историята. Той премахва пълните презареждания на страници, опростява управлението на историята и осигурява фин контрол върху навигационните събития.

Съвместимост с браузъри

Към края на 2024 г. Navigation API се радва на добра поддръжка в съвременните браузъри, включително Chrome, Firefox, Safari и Edge. Въпреки това, винаги е добра практика да проверявате най-новата информация за съвместимост с браузъри на ресурси като Can I use, преди да внедрите Navigation API във вашите продукционни приложения. Ако поддръжката на по-стари браузъри е задължителна, помислете за използването на полифил или резервен механизъм.

Заключение

Navigation API е мощен инструмент за изграждане на модерни, производителни SPA с разширени възможности за рутиране и управление на историята. Като използват функциите на API, разработчиците могат да създадат по-бързи, по-плавни и по-ангажиращи потребителски изживявания. Въпреки че първоначалната крива на обучение може да е малко по-стръмна в сравнение с използването на по-прости, по-стари методи, предимствата на Navigation API, особено в сложни приложения, го правят заслужаваща инвестиция. Прегърнете Navigation API и отключете пълния потенциал на вашите SPA.

За допълнително научаване

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