Czym jest HTML5? Na pewno nie jest tym, z czym można go było kiedyś identyfikować - językiem znaczników. W dzisiejszych czasach pod pojęciem HTML5 kryje się cała masa API, czyli interfejsów pomocnych w tworzeniu interaktywnych i multimedialnych webowych aplikacji, którym z pomocą przychodzi Javascript, a dopełnia CSS3. Dziś na ruszt pójdzie jedno z wielu ciekawych działów nowego HTML5, mianowicie History API.

Historia przeszłości

html5 history api History API, jak sama nazwa wskazuje, odpowiada za historię Twojej przeglądarki. Najprościej rzecz ujmując sprowadza się to do dwóch przycisków "poprzednia strona" i "następna strona", sterujących historią w przeglądarce i umożliwiających poruszanie się po niej. Z punktu widzenia Javascriptu do dyspozycji mieliśmy window.history.go(), za pomocją którego można było poruszać się do przodu (window.history.go(1)) i do tyłu (window.history.go(-1)) w historii stron przeglądanych przez użytkownika. Dedykowane metody do poruszania się po historii o jedną stronę do przodu i tyłu to odpowiednio: window.history.forward() oraz window.history.back(). Oczywiście można też było wywołać stronę z historii, jeśli wiedzieliśmy gdzie dokładnie się znajduje, za pomocą konkretnej liczby: window.history.go(liczba). Ilość elementów w historii można było sprawdzić za pomocą window.history.length.

Historia przyszłości

Teraz do dyspozycji mamy trochę więcej - oprócz samego poruszania się po historii, HTML5 pozwala nam także na jej modyfikację. Do tego przydadzą nam się dwie metody: history.pushState() oraz history.replaceState(). Pierwsza pozwala na dodanie do historii elementu tak, jakby użytkownik wpisał adres w pasku przeglądarki, dzięki drugiej możliwa jest modyfikacja wybranej strony z historii. Metody te powiązane są z eventem window.onpopstate, który uruchamiany jest w momencie modyfikacji historii.

history.pushState() i history.replaceState()

Metoda pushState przyjmuje trzy parametry: obiekt stanu, tytuł oraz URL. Ten pierwszy jest obiektem Javascript powiązanym z nowym elementem historii stworzonym przez metodę pushState. Drugi element, czyli tytuł, w tym momencie jest nieobsługiwany. Trzeci element, czyli adres URL, to link do nowej strony. Metoda replaceState jest bardzo podobna do poprzedniej, z tą różnicą, iż replaceState zamiast tworzyć nowy element historii, modyfikuje już istniejący.

window.onpopstate i history.state

Event popstate uruchamiany jest za każdym razem, gdy zmieniana jest historia przeglądarki - wtedy własność state zawiera kopię obiektu stanu.

Przykład

Załóżmy, że znajdujemy się na stronie http://end3r.com/adres1.html, która wykona poniższy kod Javascript:
var obiektStanu = { adres: "drugi"; };

history.pushState(obiektStanu, "Strona 2", "adres2.html");
To spowoduje wyświetlenie adresu http://end3r.com/adres2.html w pasku przeglądarki, ale nie spowoduje przeładowania strony, ani nawet sprawdzenia czy taka strona w ogóle istnieje.

Wsparcie przeglądarek

Wsparcie jest całkiem niezłe: history.state działa w Firefox 4+ i Opera 11.5+, a pushState i replaceState w obu wymienionych, a także w Chrome 5+ oraz Safari 5+. Internet Explorera przemilczę...

Polyfill: History.js

Jeśli jednak zależy Ci na wsparciu przeglądarkowych wykopalisk archeologicznych (na przykład IE6), a jednocześnie chciałbyś korzystać z dobroci History API, to warto zainteresować się tą pomocną biblioteką. Dzięki niej nie będziesz musiał z niczego rezygnować, a skrypt sam zadba o odpowiednie wsparcie starszych przeglądarek. Ciekawe artykuły znajdują się w repozytorium serwisu GitHub: Inteligentna obsługa stanów oraz Aktualny status HTML5 History API.

AskMDN #2

Mozilla Developer Network zorganizowało sesję pytań i odpowiedzi na Twitterze, druga sesja związana była z History API (pierwsza dotyczyła HTML5 gaming and creative Javascript). Drugie podejście było mniej chaotyczne od pierwszego, jedynym ekspertem był Syd Lawrence, a każde pytanie i odpowiedź były odpowiednio ze sobą powiązane, by bez problemów śledzić dyskusję. Ja oczywiście nie mogłem powstrzymać się przed zadaniem pytania o możliwości wykorzystania History API w tworzeniu gier, co samo w sobie wydawało się niewykonalne. Wywiązała się krótka dyskusja, w której udział wziął Syd i Rob Hawkes. Okazało się, że jednak można coś w tym temacie podziałać, a interesującym przykładem jest URL Hunter. Dosyć nietypowa "gra", ale jednak, mimo wszystko, udało się ją zrobić w oparciu o HTML5 History API. Da się? Jasne, że się da!

MDN Webinar - sesja o History API

Syd Lawrence poza byciem ekspertem podczas sesji AskMDN, opowiadał także o History API podczas spotkania 18 sierpnia. Niestety pojawiły się pewne problemy techniczne, przez co sesja nie została nagrana tak jak planowano. Na szczęście do dyspozycji dostaliśmy slajdy, a także link do nagrania wideo podobnego wystąpienia Syda podczas innej konferencji.

Mozilla Dev Derby

Wszystkie te informacje można wykorzystać, ponieważ w sierpniu motywem przewodnim konkursu Dev Derby jest właśnie History API - przez cały miesiąc można zgłaszać swoje webowe aplikacje do konkursu Mozilli. Ja spróbuję podjąć nierówną walkę po stronie gier, zobaczymy co z tego wyjdzie. Wszystkich chętnych z ciekawymi pomysłami na aplikacje zapraszam do zabawy. Oprócz wiecznej chwały wygrać można całkiem ciekawe nagrody.

Przydatne materiały

Na szczęście w sieci znaleźć można całkiem sporo informacji. Są to na przykład: artykuł Mozilli, artykuł Opery, wpis Roberta Nymana, rozdział na DiveIntoHTML5.org czy demo na HTML5Demos.com.

Podsumowanie

Jak widać sierpień jest miesiącem History API - materiałów na ten temat pojawiło się całe mnóstwo, a dla przećwiczenia własnych umiejętności warto wziąć udział w zawodach Dev Derby. Wiadomo, że nawet największa ilość teorii ma się nijak do własnoręcznie skomponowanego kawałka kodu, który działa.