Aplikacje jednostronicowe mogą wyświetlać różne treści bez wczytywania nowej strony. W tym celu używają przełączników kliknięć w linkach i interfejsu History API. History API umożliwia manipulowanie historią sesji przeglądarki. Dzięki temu możemy zaktualizować adres URL podczas wyświetlania innej strony (zwykle nazywanej „widokiem” w przypadku aplikacji jednostronicowych). Sprawdza też, czy przycisk Wstecz w przeglądarce nadal działa zgodnie z oczekiwaniami.
Zapoznaj się z aplikacją jednostronicową w tym CodeLab. Pokazuje on obrazy przedstawiające kota lub psa oraz zawiera linki, które umożliwiają przełączanie się między tymi zwierzętami. Wygląda na to, że wszystko działa dobrze.
Odkrywanie podstępnych błędów 404
Niestety w aplikacji jest drobny błąd. Przyjrzyjmy się temu.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran
. - Kliknij link Doggos. Zwróć uwagę, jak zmienił się adres URL.
- Przeładuj aplikację.
Otrzymasz stronę z wartością „Cannot GET /doggos” – to podstępny błąd 404. Jest to „podstępne”, ponieważ aplikacja internetowa działa prawidłowo, dopóki klikasz tylko linki w jej obrębie. Nie działa, gdy używasz adresów URL w nowym oknie przeglądarki lub odświeżasz stronę. Problem polega na tym, że serwer nie wie, jak odpowiedzieć na żądanie dotyczące tych adresów URL. Kod JavaScript w naszej aplikacji internetowej korzysta z interfejsu History API do poruszania się między nimi, ale serwer nie wie, co z nimi zrobić.
Gdy serwer nie wie, co zrobić z żądanym adresem URL, odpowiada kodem stanu HTTP 404. Ten kod oznacza, że serwer nie znalazł niczego dla żądanego adresu URL.
W tym przypadku wyszukiwarki nie będą indeksować adresów URL, ponieważ użytkownik kliknie wynik wyszukiwania i zobaczy komunikat o błędzie, a nie treści, których szukał, np. zdjęcia psa.
Naprawianie serwera
Ten projekt korzysta z serwera express.js napisanego w JavaScript. Naprawmy serwer, aby odpowiadał na żądania stroną index.html, a aplikacja jednostronicowa zajmie się resztą.
- Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
- Wybierz plik
server.js.
Ten plik zawiera kod serwera. Konfiguruje serwer express.js i wysyła zawartość pliku index.html. Trasa skonfigurowana w wierszu 15 obsługuje aplikację internetową tylko wtedy, gdy żądania są wysyłane pod adres URL /. Serwer powinien też obsługiwać inne utworzone przez nas adresy URL. Zmieńmy to, aby wyświetlać wszystkie adresy URL, aby w przyszłości działało to też z dodatkowymi adresami URL.
W tym celu możemy zmienić kod zaczynający się na linii 15 na taki:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* pasuje do dowolnego adresu URL, a serwer odpowiada teraz aplikacją internetową w index.html dla dowolnego adresu URL.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran
.
Odświeżanie i otwieranie linków w nowym oknie incognito powinno teraz działać zgodnie z oczekiwaniami.