S(GH)PA: взлом одностраничного приложения для страниц GitHub

В течение некоторого времени я хотел иметь возможность маршрутизировать пути для веб-сайта GitHub Pages к его index.html для обработки в качестве одностраничного приложения (SPA). Это табличные ставки, потому что такие приложения требуют, чтобы все запросы направлялись в один файл HTML, если только вы не хотите копировать один и тот же файл во все ваши маршруты каждый раз, когда вы вносите изменения в проект. В настоящее время GitHub Pages не предлагает решения для обработки маршрутов; Система Pages задумана как плоский, простой механизм для обслуживания основного контента проекта.

Если вы не знали, GitHub предоставляет одну возможность настройки веб-сайта вашего проекта: возможность добавить файл 404.html и использовать его в качестве пользовательской страницы ошибок. Я предпринял первую попытку взлома SPA, просто продублировав файл index.html и переименовав копию в 404.html . Оказывается, многие люди столкнулись с той же проблемой с GitHub Pages, и им понравилась общая идея. Тем не менее, проблема, которую правильно подняли некоторые люди в Твиттере, заключалась в том, что страница 404.html по-прежнему обслуживается с кодом состояния 404, что не очень хорошо для сканеров поисковых систем. Перчатка была брошена, и я решил ответить — и ответить с силой!

Еще раз, с чувством

Выспавшись на нем, я подумал про себя: «Я глубоко зашел на территорию грязного хака, так почему бы мне не сделать этот хак еще грязнее?!» С этой целью я разработал еще лучший хак, который обеспечивает ту же функциональность и простоту, а также сохраняет возможности сканера вашего веб-сайта — и вам даже больше не нужно тратить время на дублирование файла index.html и переименование его в 404.html ! Следующее решение должно работать во всех современных настольных и мобильных браузерах (Edge, Chrome, Firefox, Safari) и в Internet Explorer 10+.

Шаблон и демонстрация . Если вы хотите пропустить объяснение и получить товар, вот репозиторий шаблона и тестовый URL-адрес, чтобы увидеть его в действии.

Это так мета

Первое, что я сделал, это изучил другие варианты перенаправления браузера на страницу index.html . Эта часть была довольно простой. В основном у вас есть три варианта: конфигурация сервера, манипуляция location JavaScript или метатег refresh . Первый, очевидно, не подходит для страниц GitHub. И JavaScript в основном такой же, как обновление, но, возможно, хуже для индексации поисковым роботом. Это оставляет нас с метатегом. Метатег со значением обновления 0 рассматривается поисковыми системами как перенаправление 301, что хорошо подходит для этого варианта использования.

Вам нужно начать с добавления файла 404.html в репозиторий gh-pages , который содержит внутри пустой HTML-документ. Этот документ должен иметь размер более 512 байт (поясняется ниже). Затем поместите следующую разметку в элемент head страницы 404.html :

 <script> sessionStorage.redirect = location.href; </script> <meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

Этот код устанавливает URL-адрес попытки входа в переменную стандартного объекта sessionStorage и немедленно перенаправляет на страницу вашего проекта index.html с помощью метатега обновления. Если вы делаете сайт Github Organization, не добавляйте имя репозитория в текст заменителя атрибута содержимого, просто сделайте следующее: content=“0;URL='/'”

Настройка обработки маршрута

Если вам нужна более сложная обработка маршрута, просто включите дополнительную логику JavaScript в показанный выше тег script . Вы можете настроить несколько вещей: состав href , который вы передаете на страницу index.html ; какие страницы должны оставаться на странице 404 (путем динамического удаления метатега); и любую другую логику, которую вы хотите внедрить, чтобы определять, какой контент отображается на основе входящего маршрута.

512 волшебных байтов

Это, без сомнения, одна из самых странных особенностей, с которыми я когда-либо сталкивался в веб-разработке. Вы должны убедиться, что общий размер вашей страницы 404.html превышает 512 байт, потому что, если это не так, Internet Explorer проигнорирует ее и вместо этого покажет стандартную страницу браузера 404. Когда я, наконец, понял это, мне пришлось открыть пиво, чтобы справиться с количеством времени, которое потребовалось.

Давайте делать историю

Чтобы захватить и восстановить URL-адрес, по которому пользователь перешел изначально, вам нужно добавить следующий тег script в head вашей страницы index.html , прежде чем какой-либо другой JavaScript воздействует на текущее состояние страницы:

 <script> (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } })(); </script>

Этот фрагмент JavaScript извлекает URL-адрес, который мы кэшировали в sessionStorage на странице 404.html , и заменяет им текущую запись в history . Как вы решите обращаться с вещами отсюда, зависит от вас, но я бы использовал popstate и hashchange вашем месте.

Ну, ребята, вот и все. А теперь отпразднуйте, написав несколько одностраничных приложений на GitHub Pages!

Эта статья является частью серии веб-разработок от технических евангелистов и инженеров Microsoft, посвященных практическому изучению JavaScript, проектам с открытым исходным кодом и передовым методам взаимодействия, включая браузер Microsoft Edge.

Мы рекомендуем вам проводить тестирование в разных браузерах и на разных устройствах (включая Microsoft Edge — браузер по умолчанию для Windows 10) с помощью бесплатных инструментов на сайте dev.microsoftedge.com, включая инструменты разработчика F12: семь отдельных, полностью документированных инструментов, которые помогут вам отлаживать, тестировать и ускорить ваши веб-страницы. Кроме того, посетите блог Edge, чтобы получать информацию от разработчиков и экспертов Microsoft.

Дальнейшее чтение на SmashingMag:

• Простой рабочий процесс от разработки до развертывания
• Создание полноценного веб-приложения в Foundation For Apps
• Создайте блог с помощью Jekyll и GitHub Pages