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

Библиотека Navigo опирается на механизм History API (pushState, replaceState, popstate) для управления маршрутизацией без перезагрузки страницы. Однако в старых браузерах, таких как Internet Explorer (до версии 10) и ранние мобильные браузеры, этот API либо отсутствует, либо реализован частично.

В таких условиях Navigo автоматически или вручную переводится в режим hash, при котором маршруты формируются через часть URL после символа #:

https://example.com/#/users/42

Этот подход обеспечивает базовую совместимость, поскольку изменение hash поддерживается практически всеми браузерами.

Принудительное включение hash-режима

Navigo позволяет явно указать режим работы:

const router = new Navigo('/', { hash: true });

При включении этого параметра:

  • маршрутизация не использует History API
  • изменения URL не требуют серверной поддержки
  • поведение становится предсказуемым для старых браузеров

Ограничения старых браузеров

Отсутствие pushState

В браузерах без pushState:

  • невозможно изменять URL без перезагрузки страницы
  • обработчик popstate либо не вызывается, либо работает некорректно

Navigo решает это следующим образом:

  • переключается на отслеживание события hashchange
  • использует window.location.hash вместо pathname

Проблемы с обработкой событий

Некоторые устаревшие браузеры:

  • не поддерживают addEventListener
  • используют attachEvent (Internet Explorer 8 и ниже)

Navigo не поддерживает такие браузеры напрямую. Для их работы требуется дополнительный слой совместимости.

Использование полифиллов

Для расширения совместимости применяются полифиллы — скрипты, добавляющие недостающий функционал.

Полифилл для History API

Пример использования:

<script src="https://cdnjs.cloudflare.com/ajax/libs/history.js/1.8/native.history.min.js"></script>

Этот полифилл:

  • имитирует pushState и replaceState
  • обеспечивает единое API для разных браузеров
  • работает поверх hashchange, если необходимо

Полифилл для событий

Для поддержки старых браузеров также могут понадобиться:

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.6.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.6.7/es5-sham.min.js"></script>

Они добавляют:

  • Function.prototype.bind
  • Array.prototype.forEach
  • другие методы, используемые внутри Navigo

Особенности маршрутизации в hash-режиме

Формирование маршрутов

Вместо:

/users/42

используется:

#/users/42

Navigo автоматически обрабатывает эту разницу:

router.on('/users/:id', (params) => {
  console.log(params.id);
});

Работает одинаково в обоих режимах.

Навигация

router.navigate('/users/42');

В зависимости от режима:

  • History API: меняется pathname
  • Hash: меняется hash

SEO и старые браузеры

Hash-роутинг имеет ограничения:

  • поисковые системы хуже индексируют URL с #
  • сервер не получает информацию о маршруте

Для старых браузеров это компромисс:

  • либо поддержка пользователей
  • либо полноценный SEO

Часто применяется гибридный подход:

  • современные браузеры — History API
  • старые — hash

Серверная поддержка

При использовании History API требуется настройка сервера:

  • все маршруты должны возвращать index.html

В старых браузерах (hash-режим):

  • серверная настройка не требуется
  • вся логика остается на клиенте

Детекция возможностей браузера

Navigo выполняет базовую проверку:

if (window.history && window.history.pushState) {
  // History API доступен
}

При необходимости можно реализовать собственную проверку:

const supportsHistory = !!(window.history && window.history.pushState);

const router = new Navigo('/', {
  hash: !supportsHistory
});

Ограничения Internet Explorer

IE 9

  • частичная поддержка History API
  • нестабильная работа popstate
  • рекомендуется использовать hash-режим

IE 8 и ниже

  • отсутствует addEventListener
  • нет History API
  • требуется значительное количество полифиллов
  • использование Navigo не рекомендуется

Производительность

В старых браузерах:

  • события hashchange могут срабатывать чаще
  • обработка маршрутов менее оптимизирована
  • возможны задержки при частой навигации

Navigo минимизирует нагрузку:

  • простой механизм сопоставления маршрутов
  • отсутствие тяжелых зависимостей

Практика совместимости

Универсальная конфигурация

const useHash = !('pushState' in window.history);

const router = new Navigo('/', {
  hash: useHash
});

Подключение полифиллов

<!--[if lt IE 10]>
<script src="history-polyfill.js"></script>
<![endif]-->

Структура URL

  • современные браузеры: /users/42
  • старые браузеры: #/users/42

Ограничения пользовательского опыта

Hash-режим:

  • меняет вид URL
  • влияет на поведение кнопки “Назад”
  • может вызывать проблемы с якорями (#section)

Navigo изолирует маршруты, но при смешивании с якорями возможны конфликты.

Тестирование совместимости

Для проверки работы:

  • эмуляция старых браузеров через DevTools
  • использование реальных устройств
  • проверка fallback-логики

Критические сценарии:

  • переходы между маршрутами
  • обновление страницы
  • работа кнопок браузера

Подход progressive enhancement

Навигация строится по принципу:

  1. Базовая функциональность (hash)
  2. Улучшение (History API)

Это обеспечивает:

  • работоспособность везде
  • улучшенный опыт в современных браузерах

Ограничения библиотеки

Navigo не включает:

  • встроенные полифиллы
  • автоматическую поддержку IE < 9
  • fallback для нестандартных браузеров

Ответственность за совместимость лежит на конфигурации проекта.

Практическая рекомендация архитектуры

  • использовать hash-режим по умолчанию для широких аудиторий
  • включать History API для современных проектов
  • добавлять полифиллы при необходимости
  • избегать сложной логики маршрутизации в старых браузерах
Оглавление