Работа со старыми браузерами

Библиотека Page.js является современным клиентским маршрутизатором для одностраничных приложений (SPA), построенным на основе HTML5 History API. Основная задача Page.js — управлять переходами между состояниями приложения без полной перезагрузки страницы. Однако при работе со старыми браузерами, которые не поддерживают History API (pushState, replaceState), необходимо использовать дополнительные подходы для обеспечения совместимости.

Проверка поддержки History API

Перед использованием возможностей Page.js важно определить, поддерживает ли браузер History API. Для этого применяется простая проверка:

function supportsHistoryAPI() {
    return !!(window.history && history.pushState);
}

Если функция возвращает false, браузер старый, и стандартная маршрутизация через pushState работать не будет. В таких случаях требуется fallback-механизм.

Использование hash-based маршрутизации

Для старых браузеров применяется хеш-маршрутизация. Вместо изменения URL без перезагрузки (/about), используется фрагмент после #:

// Инициализация Page.js с hash-маршрутизацией
if (!supportsHistoryAPI()) {
    page.configure({
        popstate: false, // отключение History API
        hashbang: true   // использование хэшей
    });
}

При такой конфигурации URL будут выглядеть так:

http://example.com/#/about

Преимущество hash-маршрутизации в том, что изменение хэша не вызывает полной перезагрузки страницы, что полностью сохраняет концепцию SPA. Недостаток — URL менее эстетичен и требует дополнительной обработки на стороне сервера при прямых переходах.

Настройка Page.js для двойной поддержки

Для обеспечения работы как в современных, так и в устаревших браузерах можно комбинировать обычную маршрутизацию и hash-маршруты:

if (supportsHistoryAPI()) {
    page('/about', showAboutPage);
    page('/contact', showContactPage);
    page();
} else {
    page({
        hashbang: true
    });
    page('/about', showAboutPage);
    page('/contact', showContactPage);
    page();
}

Таким образом, при наличии History API URL будут чистыми (/about), а при его отсутствии автоматически используется #/about.

Обработка ссылок и fallback

Для старых браузеров важно корректно обрабатывать клики по ссылкам. Page.js перехватывает события click на <a> и предотвращает стандартное поведение. В режиме hash-маршрутизации ссылки должны быть изменены на хэш-формат:

<a href="#/about">О нас</a>
<a href="#/contact">Контакты</a>

Если в приложении требуется поддержка старых ссылок (/about), можно использовать редиректы на hash через Jav * aScript:

if (!supportsHistoryAPI() && window.location.pathname !== '/') {
    window.location.replace('#' + window.location.pathname);
}

Это гарантирует корректную работу переходов на устаревших браузерах без потери функционала.

Ограничения и нюансы

  1. Состояние браузера: старые браузеры не сохраняют состояние при обновлении страницы так же, как современные, поэтому методы replaceState и pushState будут недоступны. При переходе с хэш-маршрутизацией история сохраняется, но функциональность state ограничена.
  2. Серверная поддержка: при использовании хэшей сервер не получает информацию о маршруте после #. Поэтому серверная маршрутизация для SEO и прямых переходов должна учитывать только путь до #.
  3. Обработка параметров: Page.js позволяет работать с параметрами (:id, *), однако в hash-маршрутах они остаются в фрагменте. Нужно убедиться, что парсинг URL работает корректно.

Пример полной настройки с fallback

function initRouting() {
    function showHome(ctx) { console.log('Главная страница'); }
    function showAbout(ctx) { console.log('О нас'); }

    if (supportsHistoryAPI()) {
        page('/', showHome);
        page('/about', showAbout);
        page();
    } else {
        page({ hashbang: true });
        page('/', showHome);
        page('/about', showAbout);
        page();
    }
}

initRouting();

В данном примере одинаковый код маршрутов используется и для новых, и для старых браузеров, что упрощает поддержку SPA.

Практические рекомендации

  • Всегда включать проверку supportsHistoryAPI для критически старых версий браузеров.
  • Использовать hash-маршрутизацию только как fallback.
  • Следить за корректностью ссылок <a> и редиректов при переходах.
  • Обрабатывать состояние через ctx.params и ctx.path с учетом хэшей.
  • Тестировать работу приложения в Internet Explorer 11 и старых версиях Firefox/Chrome, если поддержка критична.

Page.js обеспечивает удобный механизм fallback для устаревших браузеров, позволяя создавать SPA с минимальными потерями функциональности. Гибкая конфигурация hashbang и popstate позволяет поддерживать современную и старую маршрутизацию одновременно.

Оглавление