Одностраничные приложения могут показывать разный контент без загрузки новой страницы. Для этого используются обработчики кликов по ссылкам и History API. History API позволяет управлять историей сеансов браузера. Это позволяет обновлять URL при показе другой страницы (в одностраничных приложениях она обычно называется "представлением"). Это также гарантирует, что кнопка "Назад" в браузере будет работать правильно.
Посмотрите на одностраничное приложение в этой практической работе. Оно показывает изображения кошек или собак и предоставляет ссылки для переключения между двумя животными. Кажется, всё работает!
Как обнаружить ложную ошибку 404
К сожалению, в приложении есть небольшая ошибка. Давайте посмотрим.
- Чтобы посмотреть сайт, нажмите View App (Посмотреть приложение), а затем – Fullscreen (Полноэкранный режим)
. - Нажмите на ссылку Doggos. Обратите внимание, как изменился URL.
- Перезапустите приложение.
Вы видите страницу с надписью "Cannot GET /doggos" – это ложная страница 404. Это "хитрая" ошибка, потому что веб-приложение, кажется, работает нормально, пока вы нажимаете только на ссылки внутри него. Если открыть URL в новом окне браузера или обновить страницу, он перестанет работать. Проблема в том, что сервер не знает, как отвечать на запросы по этим URL. Код JavaScript в нашем веб-приложении использует History API для навигации между ними, но сервер не знает, что с ними делать.
Если сервер не знает, что делать с запрошенным URL, он возвращает код статуса HTTP 404. Этот код означает, что сервер не нашел ничего по запрошенному URL.
Поисковые системы не будут индексировать URL в этом случае, потому что пользователь нажмет на результат поиска и увидит сообщение об ошибке, а не контент, который он искал, например фотографии собак.
Устранение неполадок на сервере
В этом проекте используется сервер express.js, написанный на JavaScript. Давайте настроим сервер так, чтобы он возвращал index.html, а одностраничное приложение позаботится обо всем остальном.
- Нажмите Создать ремикс, чтобы сделать проект редактируемым.
- Выберите файл
server.js.
Этот файл содержит код сервера. Он настраивает сервер express.js и отправляет контент index.html. Маршрут, заданный в строке 15, обслуживает веб-приложение, только когда запросы поступают на URL /. Сервер также должен обслуживать другие URL, которые мы создали. Давайте изменим это, чтобы обслуживать все URL-адреса, чтобы это также работало с дополнительными URL-адресами в будущем.
Для этого мы можем изменить код, начиная со строки 15, следующим образом:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* соответствует любому URL, и сервер теперь отвечает веб-приложением в index.html для любого заданного URL.
- Чтобы посмотреть сайт, нажмите View App (Посмотреть приложение), а затем – Fullscreen (Полноэкранный режим) .
Теперь обновление и открытие ссылок в новом окне инкогнито должно работать правильно.