Navigation API в современных браузерах

Navigation API — более новая и мощная замена History API. Она рассматривает навигацию как полноценные объекты, которые можно перехватывать, прерывать и ожидать, — это ближе к тому, как SPA действительно должны обрабатывать маршрутизацию в 2024 году.

window.navigation предоставляет список записей, текущую запись и событие navigate. navigation.entries() возвращает каждую запись текущей истории; navigation.currentEntry — активную запись. Это отличается от непрозрачной длины и недоступного для чтения состояния API истории.

Слушайте navigation.addEventListener("navigate", handler), чтобы перехватывать любую навигацию в пределах одного документа — нажатия на ссылки, отправку форм, переходы назад и вперёд, а также программную навигацию. Один обработчик заменяет набор разрозненных обработчиков нажатий, popstate и отправки форм.

Вызов e.intercept({ handler }) перехватывает навигацию. Обработчик возвращает обещание; пока оно ожидается, навигация «выполняется», а адрес уже обновлён. Это устраняет историческую гонку между изменением адреса и отображением представления.

Не все переходы можно перехватить (переходы между источниками, загрузки). Проверьте e.canIntercept перед вызовом intercept. Эта защитная проверка в одну строку отличает навигацию SPA от настоящего перехода на другой источник.

navigation.navigate(url, options) программно запускает навигацию, эквивалентную нажатию. Возвращаемый объект содержит обещания committed и finished, поэтому можно дождаться изменения адреса или полного завершения обработчика.

У каждой записи навигации есть стабильный ключ, сохраняющийся при перезагрузках, и идентификатор, действующий в пределах сеанса. Используйте ключ для постоянного состояния (сохранённых позиций прокрутки, черновиков форм), а идентификатор — для временного состояния. Единственным состоянием API истории был непрозрачный блок данных.

navigation.back() и navigation.forward() — удобные оболочки вокруг traverseTo. Они возвращают ту же пару обещаний: одно для фиксации перехода, другое для его завершения, поэтому можно дождаться перехода назад перед выполнением дальнейших действий.

Если пользователь нажмёт вторую ссылку, пока первая ещё отображается, незавершённую навигацию можно отменить. Обработчик получает AbortSignal через e.signal; передавайте его в вызовы загрузки данных, чтобы устаревшая работа отменялась при начале новой навигации.

Интерфейс истории работает, но с ним неудобно: изменения состояния и отрисовка представления не связаны, обработку нажатий приходится писать вручную, координация нескольких обработчиков ненадёжна, а восстановление прокрутки неполно. Интерфейс навигации с самого начала создавался для потребностей SPA и решает каждую из этих проблем.

Chrome и Edge поддерживают интерфейс навигации. Safari и Firefox отстают (по состоянию на начало 2026 года); выпускайте код с проверкой поддержки функции ("navigation" in window) и при недоступности используйте запасной вариант на основе интерфейса истории и события изменения истории. Фреймворки вроде SvelteKit и маршрутизатора TanStack уже скрывают эту проверку.

Для новых проектов, ориентированных прежде всего на аудиторию Chromium, внедряйте его сейчас и примите запасной вариант на основе интерфейса истории. Для общедоступных сайтов с широкой аудиторией дождитесь поддержки Safari и Firefox (или используйте библиотеку маршрутизации, скрывающую различия). Более простой интерфейс стоит того, чтобы подождать.

В чём главное преимущество события навигации в интерфейсе навигации по сравнению с сочетанием события изменения истории и ручного перехвата нажатий в интерфейсе истории?

Интерфейс навигации объединяет навигацию SPA в рамках единого события навигации с семантикой intercept и отмены, стабильными ключами для каждого entry и ожиданием асинхронного обработчика. Он заменяет лоскутное сочетание интерфейса истории, события изменения истории и перехвата нажатий. Сегодня он поддерживается в браузерах на Chromium; проверяйте наличие функции и используйте интерфейс истории как запасной вариант в кроссбраузерном коде, пока Safari и Firefox не догонят.