Освоение Navigation API: Маршрутизация и управление историей в одностраничных приложениях

Navigation API представляет собой значительный шаг вперёд в том, как мы обрабатываем маршрутизацию и управляем историей в одностраничных приложениях (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)`: Добавляет обработчик событий, связанных с навигацией.

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 Не найдено
Страница не найдена.
';
  }
}

Далее, добавим обработчик события `navigate`:

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

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

  event.transition = promise;
});

Этот код перехватывает событие `navigate`, извлекает URL из объекта `event.destination`, предотвращает стандартную навигацию браузера, вызывает `handleRouteChange` для обновления контента и устанавливает промис `event.transition`. Установка `event.transition` гарантирует, что браузер дождется завершения обновления контента перед визуальным обновлением страницы.

Наконец, вы можете создать ссылки, которые инициируют навигацию:

Главная | О нас | Контакты

И прикрепить к этим ссылкам обработчик кликов:

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

Таким образом настраивается базовая клиентская маршрутизация с использованием Navigation API. Теперь клики по ссылкам будут вызывать событие навигации, которое обновляет содержимое `div` с id `content` без полной перезагрузки страницы.

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

Navigation API также позволяет связывать состояние с каждой записью в истории. Это полезно для сохранения данных между событиями навигации. Давайте изменим предыдущий пример, чтобы включить объект состояния.

При вызове `navigation.navigate()` можно передать объект `state`:

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

Внутри обработчика события `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` позволяет связать промис с событием навигации, гарантируя, что браузер дождется завершения асинхронной операции перед обновлением страницы. Смотрите примеры выше.

3. Восстановление прокрутки

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

4. Обработка ошибок

Важно обрабатывать ошибки, которые могут возникнуть во время навигации, такие как сетевые ошибки или необработанные исключения. Событие `navigateerror` позволяет корректно перехватывать и обрабатывать эти ошибки, предотвращая сбой приложения или отображение сообщения об ошибке пользователю.

5. Прогрессивное улучшение

При создании SPA с помощью Navigation API важно учитывать прогрессивное улучшение. Убедитесь, что ваше приложение работает корректно, даже если Navigation API не поддерживается браузером. Вы можете использовать обнаружение функций для проверки наличия объекта `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