Aplikacje z jedną stroną mogą wyświetlać różne treści bez wczytywania nowej strony. Wykorzystują do tego moduły obsługi kliknięć linków oraz interfejs History API. Interfejs History API umożliwia manipulowanie historią sesji przeglądarki. Dzięki temu możemy aktualizować URL przy wyświetlaniu innej strony (zwykle nazywanej „widokiem” w aplikacjach jednostronicowych). Sprawi to, że przycisk Wstecz w przeglądarce nadal działa zgodnie z oczekiwaniami.
Przyjrzyj się aplikacji składającej się z pojedynczej strony w ramach tego ćwiczenia w programowaniu. Widoczne są na niej zdjęcia kota lub psa i linki umożliwiające przełączanie się między nimi. Wydaje się, że działa.
Jak znaleźć podstępny błąd 404
W aplikacji jest niestety niewielki błąd. Przyjrzyjmy się temu.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran
. - Kliknij link Psy. Zwróć uwagę, jak zmienił się adres URL.
- Załaduj ponownie aplikację.
Pojawia się strona z napisem „Cannot GET /doggos”, czyli niejawnym błędem 404. Jest to „niejawne”, ponieważ aplikacja internetowa działa prawidłowo, gdy klikasz tylko linki w niej. Podczas używania adresów URL w nowym oknie przeglądarki lub podczas odświeżania strony ulega on awarii. Problem polega na tym, że serwer nie wie, jak odpowiedzieć na żądanie tych adresów URL. Kod JavaScript w naszej aplikacji internetowej
do poruszania się między nimi używa interfejsu History API, ale serwer nie wie, co z nimi zrobić.
Gdy serwer nie wie, co zrobić z żądanym adresem URL, odpowiada kodem stanu HTTP 404. Po użyciu tego kodu serwer informuje,
że nie znalazł niczego dla żądanego adresu URL.
W tym przypadku wyszukiwarki nie indeksują adresów URL, ponieważ użytkownik może kliknąć wynik wyszukiwania i znaleźć komunikat o błędzie, ale nie treść, którą wyszukiwał, np. zdjęcia psów.
Naprawianie serwera
Ten projekt korzysta z serwera express.js napisanego w JavaScript. Naprawmy teraz serwer, aby odpowiadał za pomocą index.html, a aplikacja jednostronicowa zajmie się resztą.
- Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
- Wybierz plik
server.js.
Ten plik zawiera kod serwera. Jego zadaniem jest skonfigurowanie serwera express.js i wysłanie
treści pliku index.html. Konfiguracja trasy w wierszu 15 obsługuje aplikację internetową tylko wtedy, gdy żądania mają adres URL /. Serwer powinien też wyświetlać adresy
z innych utworzonych przez nas adresów. Zmieńmy to, aby wyświetlać wszystkie adresy URL, więc w przyszłości będzie też działać z dodatkowymi adresami URL.
W tym celu możemy zmienić kod zaczynający się w wierszu 15 na taki:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
Element /* pasuje do dowolnego adresu URL, a serwer odpowiada teraz z użyciem aplikacji internetowej w polu index.html w przypadku dowolnego adresu URL.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran
.
Odświeżanie i otwieranie linków w nowym oknie incognito powinno teraz działać zgodnie z oczekiwaniami.