Navigate event

  • navigation-api
  • javascript
  • web-api
Содержание

На прошлой неделе Navigation API стал доступен во всех трёх браузерах.

Апи классное и долгожданное — теперь можно очень просто отследить не только программные софт-навигации, но и переходы по ссылкам, сабмиты формы, и всё это с помощью одного события — navigate.

Типы навигации

Есть четыре типа навигаций:

  • reload — перезагрузка текущей navigation entry;
  • push — добавление новой записи в список навигаций;
  • replace — замена текущей записи новой;
  • traverse — переход вперёд/назад к существующим записям в истории навигации.

Очень ждал этого события, так как иногда бывает нужно реализовать сбор аналитики при переходах между страницами, и бывает важно понимать тип навигации.

Первые инсайты

Сейчас быстренько воткнул обработчик события в проект, чтобы посмотреть, как оно работает.

Вот несколько инсайтов:

  1. Первичный заход на страницу не триггерит navigate событие.
  2. Событие с типом push срабатывает и при программной навигации, и если пользователь кликнул по ссылке. Отличить одно от другого можно с помощью свойства userInitiated.
  3. Событие с типом reload стреляет только если программно вызвать перезагрузку страницы, например, с помощью navigation.reload(). Если перезагружать страницу с помощью браузерной кнопки перезагрузки или с помощью Ctrl+R — navigate event совсем не стреляет. Вот это очень досадно и неожиданно.

Что ещё умеет

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

Также есть метод, который может обрабатывать скролл при смене навигации.

Подробней про событие можно почитать на MDN, а в целом про Navigation API — в статье от Google.