Warsztat: manipulacja Lokalizacją URL oraz Historią przeglądarki

Zadania realizowanego zagadnienia

Dokument zamiast zapełniacza treści posiada edukacyjną treść warsztatową - warto więc się z nią zapoznać.

Wymagania do zadań:

• znajomość struktury i zasad działania adresu URL (standard RFC 3986)
• umiejętność obsługi przeglądarki i konsoli w narzędziach deweloperskich
• otwarte okno/panel podglądu bieżącej Historii przeglądania stron oraz otwarty panel narzędzi deweloperskich z widoczną kartą Konsola podczas realizacji części warsztatowej

Zadania warsztatowe:

1. Przetestuj działanie odnośników adresacji wewnętrznej dokumentu znajdujących się w menu nawigacyjnym. Podczas nawigowania porównaj zmiany adresu URL w Pasku adresowym, pojawiające się wpisy w Historii oraz działanie przycisków Wstecz oraz Dalej
2. Sprawdź jakie informacje można uzyskać podcza zdarzenia load załadowania dokumentu oraz zdarzenia popstate zmiany adresu URL z obiektu location.
3. Podczas klikania w odnośnik odczytaj z niego informacje: adres z atrybutu href oraz wyświetlaną etykietę tekstową z treści znacznika A.
4. Mając komplet informacji o klikniętym odnosniku zapisz je do zmiennej tablicowej jako obiekt (na razie) z dwiema wartościami: adres URL oraz nazwa etykiety
5. Zablokuj rezultat domyślnego zdarzenia kliknięcia (w odnośnik), by zaobserwować działanie opracowywanych w następnych krokach mechanizmów (sprawdź, czy adresacja wewnętrzna przestała działać).
6. Zaimplementuj metodę pushState dodającą wpisu do Historii przeglądarki po kliknięciu w odnośnik.
7. Popraw dodawanie wpisu o zmianę tytułu dokumentu html przed dokonaniem wpisu.
8. Sprawdź, czy i jak działają wszystkie opracowane mechanizmy.

Zadania ćwiczeniowe:

1. Kontrolka SELECT została przygotowana do przechowywania Historii przeglądanej zawartości na tej stronie. Należy ją uzupełniać przy każdym kliknięciu hiperłącza.
2. Wybór treści z kontrolki SELECT ma skutkować przeniesieniem czytelnika do fragmentu odpowiadniej treści.
3. Odwiedzenie strony z wpisanym fragmentem (#fragment) powinno przenosić automatycznie do wybranego fragmentu treści.
4. Pole tekstowe powinno umożliwiać szybki wybór wprowadzonego/podpowiedzianego fragmentu treści z dostępnych w kontrolce DATALIST

Podstawowy mechanizm

Każde wykonanie żądania zmiany dokumentu poprzez wywołanie akcji na znaczniku hiperłącza jest realizowane jako wysłanie do serwera Web żądania nowego zasobu oraz zmiany adresu URL lokalizującego zasób.

Na podobnej zasadzie działa mechanizm przenoszenia (widoku dokumentu) w obrębie dokumentu przy użyciu adresacji wewnętrznej. Używamy do tego celu pary znaczników A: jeden z atrybutem HREF i adresem lokalnym poprzedzonym znakiem #, a drugi z kotwicą (punktem docelowym) zawierającym atrybut ID oraz nazwę/etykietę kotwicy odpowiadającej adresowi lokalnemu z atrybutu HREF (jednak bez znaku #).

Efektem nawigacji po adresach wewnątrz dokumentu będzie przeniesienie widoku do innnego fragmentu treści bez wykonywania żądania do serwera Web, a co za tym idzie bez zmiany wyświetlanego dokumentu, jednak ze zmianą adresu URL zapamiętywanego w historii przeglądania.

Strony i aplikacje AJAX

Wraz z rozwojem technologii Webowych pojawiła się możliwość zmiany/ładowania treści i zasobów zdalnych z serwera Web bez konieczności przeładowywania całego dokumentu. Wystarczyło wskazać adres zasobu lub skrypt pobierajacy treść oraz wskazać kontener w dokumencie, do którego należy załadować pobrany asynchronicznie zasób.

Świat wirtualny zrobił kilka kroków do przodu, i nagle jeden w tył. Problemem stało się lokalizowanie i identyfikowanie takiej dynamicznie ładowanej treści. Szczególnie w kontekście robotów indeksujących zasoby sieci Internet dla wyszukiwarek treści. Szybko pojawiło się kilka możliwości: część była zgodna z opracowanymi standardami dla Sieci komputerowych, czy Technologii Web, część niestety jawnie łamała przyjęte standardy wśród okrzyków radości i zadowolenia (często osób pseudo-technicznych).

Rozwiązania URL dla dynamicznych zasobów

Przede wszystki skorzystano z istniejących możliwości adresacji wewnętrznej, a więc użycie znaku # do identyfikowania dynamicznie ładowanej treści. Dotychczas adres URL był taki samo jak bazowego statycznego dokumentu, a nagle pozwalał na lokalizowanie dynamicznej treści zgodnie ze standardem URL. Dodatkowo wprowadzono w przeglądarkach mechanizm integracji z historią przeglądanych adresów URL w przeglądarce: History API.

Od tego momentu pojawiła się techniczna możliwość (nie zawsze implementowana), by do każdego działania AJAX, czyli dynamicznego ładowania treści (rozumianego jako zmiany strony/dokumentu) dołączyć akcję modyfikacji adresu URL rozpoznawaną przez historię przeglądarki jako przeładowanie strony - załadowanie innego dokumentu.

Efektem takiego wpięcia się w mechanizmy historii jest nawigowanie pod dokumencie z dynamiczną treścią jak po różnych dokumentach za pomocą przycisków nawigacyjnych WSTECZ oraz DALEJ, możliwość zapamiętania takiego dynamicznie ładowanego artykułu jako zakładki, czy uchronienie odwiedzającego przed opuszczeniem witryny (bazowy adres URL) pomimo przeklikania przez wiele (dynamicznie ładowanych) dokumentów.

Pseudo dokumentacja

W pseudo-dokumentacji znajduje się wycinek najważniejszych elementów do zapoznania się. Po więc, bardziej szegółowych informacji należy odwiedzić witrynę z oficjalną dokumentacją.

History API - MDN Web Docs

• history.length - sprawdza długość histori, czyli ile pozycji ona posiada w obecnej domenie
• history.forward() - przewija do przodu
• history.back() - przwija do tyłu
• history.go(n) - idzie do pozycji +/- n
• history.pushState(state,title,url)
• history.replaceState()

Location object - MDN Web Docs

• location.hash - #fragment (element znajdujacy się po nazwie pliku)
• location.href - Location URL Input (pełny wpis zgodny ze standardem URL)
• location.protocol - użyty protokół (http, https, file)
• location.pathname - ścieżka do wyświetlanego pliku/dokumentu (wraz z protokołem oraz nazwą pliku)
• location.port - numer portu
• location.reload() - odświeża dokument (jak F5)
• location.assign() - przenosi na wskazany dokument (z ingerencją w Historię)
• location.replace() - podmienia dokument na wskazany (brak ingerencji w Historię)

Zdarzenia

window.onpopstate - ilekroć wywoływana jest zmiana "dokumentu" (adresu URL) wywołaj jakiś obiekt