Přepište historii webových stránek

zelenaci-web-perex

Samozřejmě máme na mysli tu historii, co je uložena v prohlížeči a ke které se dostane uživatel tlačítkem „zpět“. Vysvětlíme si, proč je v adresách některých webových služeb použita na pohled podivná konstrukce „/#!“, k čemu slouží a jaká jsou její úskalí.

Konstrukce #! se nazývá hashbang (též shebang) a je známá uživatelům UNIXu, ovšem jaký je její význam v URL? Co přesně znamená na Twitteru adresa http://twitter.com/#!/zdrojak a proč je takto podivně zapsaná?

URL fragment

URL fragment je volitelná část adresy, uvedená za znakem hash (#).

http://www.example.com/foo/bar/page.html#fragment
qrcode

K článku není ukázka

K článku není k dispozici zdrojový kód

Při otevření takového odkazu se stránka posune tak, aby byl viditelný prvek s identifikátorem fragment (např. <div id="fragment">), popř. kotva s tímto jménem (<a name="fragment">).

Tato část URL má oproti zbytku adresy dvě zvláštnosti:

  1. nepřenáší se v HTTP požadavku na server; pro stránky /foo/bar/page.html#fragment nebo /foo/bar/page.html#naprosto-cokoli bude požadavek stejný jako pro stránku /foo/bar/page.html
  2. při změně této části URL se neprovádí reload načtené stránky, ale objeví se v historii

Tyto zvláštnosti nabízejí zajímavé možnosti pro moderní stránky, postavené na dynamickém načítání obsahu, např. AJAXem.

V dobách, kdy bylo běžné každý požadavek (klik na odkaz, odeslání formuláře apod.) odesílat na server (a mnohé knihovny a frameworky tak dosud fungují), se mohlo zdát, že fragment ztrácí na významu. U aplikací, které ale dynamicky načítají obsah ze serveru bez reloadu, se právě tato část adresy nabízí k tomu, aby si skript na straně klienta ukládal potřebné stavové informace, a přitom se nenačítala stránka znovu.

Radikální pohled na webové aplikace dokonce hovoří o tom, že aplikace by se měla skládat z pouhé jedné stránky – viz Single Page Interface Manifesto. Argumenty, které nabízí, znějí rozumně – například: když se obsah stránky mění neustále pomocí AJAXu, a URL přitom zůstává stále stejné, co se stane, když si ho někdo uloží do oblíbených? (Přesto je pro mnohé takový pohled na webové aplikace natolik neobvyklý, že je potřeba vydávat manifesty – nabízí se paralela s Dogma W4 – pozn.aut.)

Google Hashbang

Potřeba indexovat různé stavy AJAXových webových aplikací vedla Google k návrhu Making AJAX Application Crawable. V této specifikaci navrhuje serverům dohodu: Servery budou pro určité stavy aplikace používat rozlišení pomocí URL fragmentů, ale zároveň tyto stavy nabídnou vyhledávačům v podobě „HTML snapshotů“.

Příklad: AJAXová aplikace nabízí, řekněme, kalendář pro určité dny. Aktuálně otevřený den si poznačí v URL fragmentu, např. takto: kalendar.html#den=20110211. Pro vyhledávač je taková adresa „černou dírou“ – bez další pomoci tam uvidí jen prázdnou kostru HTML stránky s JavaScriptem.

To, že stránka dodržuje tuto „dohodu“, dá na vědomí právě tím, že místo klasického hashe (#) použije hashbang (#!). Tedy kalendar.html#!den=20110211. Tím dá najevo Googlu, že může požádat o HTML snapshot takové adresy. Ten tak učiní tím, že pošle vyhledávacího robota na adresu kalendar.html?_escaped_fragment_=den=20110211. Váš server by se měl postarat o to, aby na tento dotaz vrátil zhruba totéž, co uvidí uživatel na výše uvedené adrese s fragmentem.

Bližší informace o této technice naleznete v dokumentu Googlu. Ve stručnosti lze říct, že u adres s hashbangem prochází Google i „ošklivý“ tvar URL, kde část za hashbangem předává jako parametr _escaped_fragment_.

Pokud stránka sama nemá „hashbangovou“ adresu, ale přesto ji chcete v této podobě Googlu nabídnout, vložte do hlavičky META tag fragment.

<meta name="fragment" content="!">

Takovou stránku Google zaindexuje i s _escaped_fragment_ podobou.

Kde hashbang potkáme?

Tento tvar začínáme potkávat na stále větším počtu serverů – od Facebooku přes Twitter (http://twitter.com/#!/zdrojak)až po, nejnověji, LifeHacker.

Výhodou takto napsané aplikace je, že statický obsah (např. obrázky, styly apod.) se po změně URL fragmentu nenačítá znovu. Např. Twitter tak může pozadí, prvky UI a další věci načítat pomocí statických adres, a konkrétní obsah, donačítaný AJAXem, rozlišuje pomocí části za hashbangem. Můžete si ostatně zkusit přepsat to uživatelské jméno na jiné – uvidíte, že se stránka nenačítá znovu celá, pouze se pomocí XHR dočítá obsah. Další výhodou pak je to, že tyto změny jsou ukládány do historie prohlížeče; uživatel tak může procházet historií, aniž by se stránka načítala ze serveru znovu.

Hezké vysvětlení principu hashbangu naleznete např. na StackOverflow.

Technologie z rodiny HTML5 nabízejí obsluhu změny URL fragmentu – viz např. onhashchange či specifikace history events.

Úskalí

Velmi pěkně popsal problémy, spojené s „hashbangováním“ adres, Mike Davies ve svém článku Breaking the Web with hash-bangs. Svá tvrzení ukazoval na příkladu již zmíněného webu Lifehacker. V článku argumentuje proti využívání takových URL.

Adresa http://lifehacker.com/1234/nova-stranka se změnila na http://lifehacker.com/#!1234/nova-stranka. Mike Davies tuto změnu kritizuje – namísto dodržování principu „každá stránka má vlastní adresu“ je náhle vše jen na titulní stránce, a – duplicitně – na „zkomolené“ adrese. Dalším problémem je to, že takový obsah nedokážou agenti (mimo prohlížečů), splňující HTTP/1.1, procházet – s výjimkou Googlebotu. Namísto obsahu vidí jen prázdnou stránku, resp. stránku se statickým obsahem.

Nefunguje správně ani cachování obsahu, protože obsah nemá kanonickou reprezentaci. Navíc je takový web závislý na fungujícím JavaScriptu. Chyba ve skriptech znamená, že váš web uživatelům nebude fungovat – zapomenutý console.log nebo zapomenutá čárka na konci prvků pole znamená, že pro velkou část vašich návštěvníků bude web nefunkční a uvidí jen prázdnou stránku. Pokud máte na webu reklamu, upozorňuje Davies, jste vydáni všanc JavaScriptovým kódům, které vám reklamní síť posílá, a je dobře známé, že tento kód bývá technicky ten nejhorší odpad, co se na webu vůbec vyskytuje.

Závěr

Hashbang ano nebo ne? Jako ve spoustě jiných případů, i zde platí: záleží na okolnostech. Jsou situace, kdy je jeho použití rozumné a na místě, a jsou situace, kdy jeho bezdůvodné použití přinese převahu negativních efektů. Neexistuje univerzální pravidlo ani univerzálně použitelná pravda, a záleží na zkušenostech každého vývojáře.

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 20

Přehled komentářů

Honza K cemu je to dobre?
karf Re: K cemu je to dobre?
Michal Re: K cemu je to dobre?
fos4 Re: K cemu je to dobre?
karf Lifehacker
Anonymous Coward Re: Lifehacker
Anonymous Coward Re: Lifehacker
Je to možné Re: Lifehacker
robot0001 Jquery History Plugin
Murdej Řešení několika nevýhod
Wlada Re: Řešení několika nevýhod
František Kučera Smysl?
limit_false Re: Smysl?
František Kučera Re: Smysl?
limit_false Re: Smysl?
vkalina Asi jsem zpátečník anebo konzerva
OldFrog Re: Asi jsem zpátečník anebo konzerva
washeck Re: Asi jsem zpátečník anebo konzerva
Jakub Vrána Mnohem lepší řešení
imploder Re: Mnohem lepší řešení
Zdroj: https://www.zdrojak.cz/?p=3430