Čo sú Web API?
Web API sú API natívne podporované prehliadačmi, s ktorými sa väčšinou komunikuje prostredníctvom javascriptu. Ich implementácia je naprieč prehliadačmi štandardizovaná, podpora je ale pri každom z nich rôzna.
Okrem známych ako napríklad Console API (funkcionalita console.log) alebo History API (simulácia stlačenia tlačidla back v prehliadači) existuje ale množstvo iných. Skúsme si ukázať aspoň 6 najzaujímavejších:
Fullscreen API
API pre prepnutie elementu do režímu fullscreen. Užitočné napríklad pre webstránky bez responzívneho dizajnu, ktoré chcú dať používateľovi možnosť čítať článok bez rušivých elementov. Nanešťastie, pre iOS podpora len pre tablety. Pre osobitné štýlovanie elementu vo fullscreen móde poskytuje css pseudo triedu :fullscreen.
<html>
<head>
<script type="text/javascript">
const article = document.getElementById("article");
// zistime ci sa element nasiel a ci je mozne zapnut fullscreen
if (article && document.fullscreenEnabled) {
article.requestFullscreen();
}
</script>
<style>
.article:fullscreen {
background-color: "#fff";
overflow: scroll;
}
</style>
</head>
</html>
Web Storage API
API pre ukladanie dát vo formáte kľúč-hodnota využitím buď sessionStorage (platnosť dát vyprší zatvorením karty, prípadne prehliadača) alebo localStorage objektu (perzistentné dáta ukladané v prehliadači). Na rozdiel od cookies ide o prehľadnejší spôsob ukladania dát s možnosťou odchytiť zmeny nad localStorage.
<html>
<head>
<script type="text/javascript">
const setPageLocal = () => {
// implementacia zmeny jazykovej verzie
};
// ak sa zmeni jazykova verzia stranky, dame vediet ostatnym kartam aby zmenili jazykovu verziu
window.addEventListener("storage", ({ key, newValue }) => {
if (key === "lang") {
// custom funkcia
setPageLocal(newValue);
}
});
// pre kazdy prepinac jazyka vytvorime handler na zmenu jazyka
const langButtons = document.getElementsByClassName("langButton");
Array.from(langButtons).forEach(langButton => {
langButton.addEventListener("click", () => {
// zapiseme zmenu do localStorage, ostatne karty zmenu zaregistruju
localStorage.setItem("lang", langButton.id);
// aktivna karta zmenu nazaregistruje, spustime priamo
setPageLocal(langButton.id);
});
});
</script>
</head>
<body>
<button id="sk-SK" class="langButton">SK</button>
<button id="en-GB" class="langButton">EN</button>
</body>
</html>
Intersection Observer API
API pre sledovanie elementov v DOM za účelom získania informácie o tom, či sa objavili, prípadne stratili z viditeľnej oblasti obrazovky. Jednoduchým spôsobom tak vieme napríklad pridať animáciu elementu, na ktorý sa práve používateľ prescrolloval.
<html>
<head>
<script type="text/javascript">
// najdeme vsetky obrazky v DOM
const images = document.getElementsByTagName("img");
const observer = new IntersectionObserver(items =>
items.forEach(item => {
// vzdy ked sa sledovany element dostane do viditelnej oblasti, pridame mu css triedu
if (item.intersectionRatio > 0) {
item.target.classList.add("animate");
}
})
);
// budeme sledovat intersection vsetkych najdenych obrazkov
Array.from(images).forEach(image => observer.observe(image));
</script>
</head>
</html>
Resize Observer API
API podobné Intersection Observer API. Sledujeme ale element za účelom získavania informácie o tom, či a ako sa zmenila veľkosť elementu. Používa sa hlavne v prípadoch, kedy sa mení layout stránky nie na základe zmeny vonkajšieho kontajnera/viewportu, ale na základe zmeny veľkosti iného elementu.
<html>
<head>
<script type="text/javascript">
// najdeme vsetky elementy, ktore chceme sledovat
const containers = document.getElementsByClassName("container");
const observer = new ResizeObserver(items =>
items.forEach(item => {
// vzdy ked sa zmeni vselkost elementu, pridame alebo odoberiem css triedu
if (item.contentRect.width <= 500) {
item.target.classList.add("full-width");
} else {
item.target.classList.remove("full-width");
}
})
);
// budeme sledovat zmenu velkosti vsetkych elementov, ktore sa nasli
Array.from(containers).forEach(container => observer.observe(container));
</script>
</head>
</html>
Page Visibility API
API, ktorým zisťujeme zmenu prítomnosti používateľa na stránke. Zmena nastáva napríklad v prípade, že sa používateľ preklikne na iný tab alebo minimalizuje okno. Tímto spôsobom vieme napríklad pauznuť video na stránke.
<html>
<head>
<script type="text/javascript">
const video = document.getElementById("video");
document.addEventListener("visibilitychange", () => {
if (video && document.hidden) {
video.pause();
}
});
</script>
</head>
</html>
Vibration API
API, ktoré komunikuje s vibračným hardwarom mobilného zariadenia a vibráciou môže užívateľa upozorňovať napríklad na notifikáciu alebo chybu pri odoslaní formulára. Bohužiaľ bez podpory pre iOS zariadenia. V prípade desktopových zariadení sa zavolaním funkcie neudeje nič.
const validateForm = values => {
// custom implementacia validacie hodnot
};
// budeme pocuvat na pripadne odoslanie formulara
const formElement = document.getElementById("form");
formElement.addEventListener("submit", e => {
e.preventDefault();
// spracujeme si data pre ucel validacie
const data = new FormData(formElement);
const values = {};
for (const [key, value] of data.entries()) {
values[key] = value;
}
// zistime ci je nejaky field nevalidny
const invalidFields = validateForm(values);
if (invalidFields.length > 0 && window.navigator.vibrate) {
window.navigator.vibrate(500);
return false;
} else {
// ak validacia zbehla, posleme XML HTTP request alebo inym sposobom spracujeme data
}
});
