Aplikacje jednostronicowe mogą wyświetlać różne treści bez wczytywania nowej strony. W tym celu używają obsługi 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 działa prawidłowo.
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ę.
Widzisz stronę z etykietą „Cannot GET /doggos” – 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, w odpowiedzi przesyła kod stanu HTTP 404. Ten kod oznacza, że serwer nie znalazł niczego dla żądanego adresu URL.
W tym przypadku wyszukiwarki nie zindeksują adresów URL, ponieważ użytkownik po kliknięciu wyniku wyszukiwania znajdzie komunikat o błędzie, ale nie znajdzie szukanej treści, np. zdjęć 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 Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.
- Wybierz plik
server.js.
Ten plik zawiera kod serwera. Tworzy serwer express.js i wysyła
treść 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 w przypadku dowolnego adresu URL odpowiada teraz aplikacji internetowej w polu index.html.
- 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ć prawidłowo.