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 interfejsie 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.
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.
- Ponownie zał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ć edytowanie 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 również w przypadku dodatkowych adresów 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.