V dnešnom článku si predstavíme 3 Web API, ktoré pri správnom použití vedia uľahčiť prácu nejednému web developerovi.
URL API
Ako už názov napovedá, URL API slúži na prácu s URL adresou. URL adresa sa skladá z viacerých častí: protokol, hostname, port, path a query parametrov.
Pomocou tohto API vieme jednotlivé časti nielen zistiť, ale vieme ich aj jednoducho modifikovať.
Na začiatku si vytvoríme nový objekt typu URL, kde ako vstupný parameter dáme URL adresu, s ktorou chceme pracovať.
Napríklad:
var url = new URL("https://www.nejaka-stranka.test/blog/clanky?datum=2021-06-22&stranka=3");
Keď chceme získať napríklad hodnotu GET parametra datum, spravíme to jednoducho cez:
console.log(url.searchParams.get("datum"));
Všetky GET parametre si vieme vypísať iteráciou hodnoty searchParams:
for (let p of url.searchParams) { console.log(p); }
Pre modifikáciu parametra použijeme metódu set. Okrem úpravy existujúceho parametra vieme rovnakú metódu použiť aj pre pridanie nového parametra.
url.searchParams.set("datum", "2020-09-28"); url.searchParams.set("novyParameter", "35");
Keď následne chceme získať naspäť celú URL adresu ako textový reťazec, zavoláme metódu toString():
console.log(url.toString());
History API
Pomocou History API vieme manipulovať s históriou prehliadača. Vieme napríklad nahradiť tlačítka Späť a Ďalej. Pre vrátenie sa o 1 stránku dozadu použijeme metódu back()
history.back();
Podobne, keď chceme ísť v histórii o jednu stránku dopredu, použijeme metódu forward():
history.forward();
Keď sa chceme v histórii posunúť o viacero stránok, použijeme metódu go(). Táto metóda má ako vstupný parameter číslo, kde v históríí sa chceme posunúť. Napríklad číslo -3 znamená, že sa chceme posunúť o 3 stránky dozadu. Keď ako parameter použijeme 0, prípadne parameter vynecháme, dôjde k refreshu aktuálnej stránky.
history.go(-3);
HTML5 prinieslo do History API 2 nové metódy: pushState() a replaceState(). Tieto metódy modifikujú históriu bez refreshu stránky. Sú veľmi užitočné pre single-page aplikácie, ktoré sa skladajú z rôznych podstránok. Vieme sa medzi podstránkami presúvať bez toho, aby došlo k refreshu stránky. History API je využívané aj vo frameworkoch ako napríklad Nuxt.js alebo v React Router.
História v single-page aplikáciách sa správa ako zásobník. Metóda pushState() vloží na vrch zásobníka nový záznam. Metóda replaceState() upraví záznam, na ktorom sa aktuálne nachádzame. Keď sa v histórii vrátime o zopár stránok dozadu a následne zavoláme pushState(), celá história nasledujúcich stránok sa nahradí jedným novým záznamom.
Obe metódy majú 3 vstupné parametre:
- Prvý parameter sú dáta, ktoré si chceme k podstránke (záznamu) uložiť. Dáta môžu byť napríklad textový reťazec alebo objekt. Tieto dáta následne vieme získať pri onpopstate evente cez event.state
- Druhý parameter je titulok stránky. Tento parameter je momentálne na všetkých browseroch okrem Safari ignorovaný. Do budúcna sa to ale môže zmeniť.
- Tretí parameter je URL adresa. Tá môže byť relatívna alebo absolútna. Absolútna adresa však musí obsahovať hostname, na ktorom sa reálne nachádzame. Prehliadač nám z bezpečnostných dôvodov nedovolí zmeniť URL adresu na úplne cudziu stránku.
Keď sa chceme napríklad presunúť na novú podstránku, zavoláme:
history.pushState("nejake dáta", "titulok", "/relativna-adresa/novej/podstranky");
Kedy však využijeme metódu replaceState? Typický príklad použitia je vtedy, kedy by sme sa metódou pushState dostali k zacykleniu v histórii. Určite sa vám už stalo, že ste sa chceli z nejakej stránky vrátiť na predchádzajúcu stránku, ale tlačidlom späť to nebolo možné, lebo sa história stále opakovala.
Napríklad keď sa chceme presunúť na podstránku /admin, ktorá však vyžaduje príhlásenie a teda podstránka nás presmeruje na /login. V prípade, že presmerovanie spravíme cez pushState, kliknutím na tlačidlo späť by sme sa znovu dostali na podstránku /admin a tá by nás znovu presunula na /login a tak stále dookola. Keď však presmerovanie z /admin na /login spravíme cez metódu replaceState(), po kliknutí na button späť sa nevrátime na /admin, ale na podstránku, z ktorej sme prišli.
Samotné metódy by neboli veľmi použiteľné, keby sme nevedeli zistiť, že došlo k zmene podstránky. A tak okrem týchto metód pribudol aj nový event: onpopstate. Tento event sa zavolá vždy, keď sa v histórii posunieme dopredu alebo dozadu.
window.onpopstate = function(event) { console.log("podstranka: " + document.location.href); }
Geolocation API
Geolocation API slúži na získanie GPS súradníc, na ktorých sa aktuálne nachádzate. Toto API využívame napríklad na projekte drmax pre nájdenie lekární v okolí zákazníka na podstránke https://www.drmax.sk/lekarne
Z bezpečnostných dôvodov je prístup ku geolocation API možný až po udelení prístupu. Pred získaním súradníc sa nás teda browser spýta, či chceme stránke udeliť práva pre prístup ku geolocation API. Až po odsúhlasení vieme pristupovať k spomínanému API.
Na získanie súradníc slúži metóda getCurrentPosition(). Táto metóda má ako vstupný parameter callback na funkciu, ktorá ako vstupný parameter dostane GeolocationPosition objekt. Vypísať súradnice si vieme zavolaním:
function showPosition(position) { console.log(position.coords); } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); }
V aplikácii však môže nastať situácia, keď nám nebude stačiť jednorazové získanie súradníc, ale budeme chcieť sledovať každú zmenu polohy (napríklad aplikácia pre taxislužbu). Na tento účel vieme použiť metódu watchPosition().
var watchID = navigator.geolocation.watchPosition((position) => { console.log(position.coords.latitude, position.coords.longitude); });
Metóda watchPosition() vracia ID pre watcher. Keď už ďalej nepotrebujeme sledovať polohu užívateľa, vieme pomocou vráteného ID a metódy clearWatch() zrušiť sledovanie:
navigator.geolocation.clearWatch(watchID);
Záver
To by bolo pre dnešný článok všetko. Nabudúce si predstavíme ďalšie užitočné Web API.
