Aplikacje jednostronicowe mogą wyświetlać różne treści bez konieczności wczytywania nowej strony. W tym celu używają modułów obsługi kliknięć w linkach i interfejsu History API. History API umożliwia manipulowanie historią sesji przeglądarki. Dzięki temu możemy aktualizować adres URL, gdy wyświetlamy inną stronę (w aplikacjach jednostronicowych zwykle nazywaną „widokiem”). Dzięki temu przycisk Wstecz w przeglądarce nadal działa zgodnie z oczekiwaniami.
Zapoznaj się z aplikacją jednostronicową w tych ćwiczeniach z programowania. Wyświetla obrazy kotów lub psów i zawiera linki umożliwiające przełączanie się między tymi zwierzętami. Wygląda na to, że działa prawidłowo.
Wykrywanie ukrytych błędów 404
Niestety w aplikacji jest drobny błąd. Przyjrzyjmy się mu.
- Aby wyświetlić podgląd witryny, naciśnij Wyświetl aplikację, a następnie Pełny ekran
. - Kliknij link Doggos. Zwróć uwagę na zmianę adresu URL.
- Ponownie uruchom aplikację.
Wyświetla się strona z komunikatem „Cannot GET /doggos” – ukryty błąd 404. Jest to „podstępne”, ponieważ aplikacja internetowa wydaje się działać prawidłowo, dopóki klikasz tylko linki w niej. Przestaje działać, gdy adresy URL są używane w nowym oknie przeglądarki lub gdy strona jest odświeżana. Problem polega na tym, że serwer nie wie, jak odpowiedzieć na żądanie dotyczące tych adresów URL. Kod JavaScript w naszej aplikacji internetowej używa 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 pod żądanym adresem URL.
Wyszukiwarki nie zindeksują adresów URL w tym przypadku, ponieważ użytkownik kliknąłby wynik wyszukiwania i zobaczył komunikat o błędzie, a nie treść, której szukał, np. zdjęcia psów.
Naprawianie serwera
Ten projekt używa serwera express.js napisanego w języku JavaScript. Naprawmy serwer, aby odpowiadał plikiem index.html, a aplikacja jednostronicowa zajmie się resztą.
- Kliknij Zremiksuj, aby edytować, 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. Konfiguracja trasy w wierszu 15 obsługuje aplikację internetową tylko wtedy, gdy żądania są wysyłane na adres URL /. Serwer powinien też obsługiwać inne utworzone przez nas adresy URL. Zmieńmy to, aby obsługiwać wszystkie adresy URL, dzięki czemu będzie to działać również z dodatkowymi adresami URL w przyszłości.
Aby to zrobić, możemy zmienić kod od wiersza 15 na następujący:
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 witryny, naciśnij Wyświetl aplikację, a następnie Pełny ekran .
Odświeżanie i otwieranie linków w nowym oknie incognito powinno teraz działać zgodnie z oczekiwaniami.