Telegram-канал frontendhubvk - Frontend VK Hub: Unsorted

Frontend VK Hub

07 May 2026 12:00

History API создавался для полных перезагрузок страниц. SPA-роутеры годами строили поверх него абстракции: popstate не стреляет при pushState, клики по ссылкам нужно перехватывать вручную, для хеша нужен отдельный слушатель, а history.length даёт только число вместо доступа к стеку.

Navigation API решает это единым событием navigate на window.navigation. К нему приходят клики по ссылкам, сабмиты форм, back/forward и программные переходы — один обработчик вместо россыпи слушателей.

➡️ Роутер на History API:

window.addEventListener("click", (e) => {
  const link = e.target.closest("a");
  if (!link) return;
  e.preventDefault();
  history.pushState({}, "", link.href);
  render(link.href);
});

window.addEventListener("popstate", () => {
  render(location.pathname);
});

➡️ Тот же роутер на Navigation API:

navigation.addEventListener("navigate", (e) => {
  if (!e.canIntercept) return;

  e.intercept({
    async handler() {
      const data = await loadRoute(new URL(e.destination.url));
      render(data);
      e.scroll();
    },
  });
});

intercept() отключает перезагрузку страницы — DOM обновляет роутер. Условие !canIntercept отсекает переходы, которые нельзя перехватить. Браузер показывает нативный лоадер, пока промис из handler не зарезолвится. e.scroll() восстанавливает прокрутку при back/forward без ручного сохранения координат.

Стек истории

history.length — просто число. Navigation API открывает стек через navigation.entries():

const prev = navigation
  .entries()
  .slice(0, navigation.currentEntry.index)
  .findLast((e) => new URL(e.url).pathname.startsWith("/list"));

if (prev) navigation.traverseTo(prev.key);

Код находит последний /list в стеке и переходит к нему. На History API для этого нужен параллельный стек на глобальных переменных.

У каждой записи два идентификатора:
🔵id – для привязки кэша, уникальный, не переиспользуется
🔵key – для навигации по стеку, переиспользуется при replace

Состояние записи читается через getState() — оно иммутабельно, для обновления нужен updateCurrentEntry().

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

e.intercept({
  async handler() {
    const data = await fetch(url, { signal: e.signal });
    if (e.signal.aborted) return;
    render(data);
  },
});

Новый API поддерживается в Chrome 102+, Firefox 147+, Safari 26.2+. Полифилл — @virtualstate/navigation. React Router и TanStack Router пока остаются на History API, но оба уже обсуждают переход.

#frontendvk #javascript #navigationapi