Méně známé HTML5 API, 1. část: Fullscreen, Page Visibility, Performance
Méně známé HTML5 API, 2. část: Vibration, Clipboard, Beacon
Méně známé HTML5 API, 3. část: Feature Queries, Device Orientation/Motion
S růstem webu jakožto platformy přibývá oblastí, kam může web zasáhnout. Pro množství HTML5 specifikací, které jsou postupně implementovány moderními prohlížeči, je tu stejné množství menších API, které bývají mezi vývojáři málo rozšířené. Přitom jsou často velmi užitečné. Gyroskop, kopírování do schránky, detektory světla a blízkosti nebo třeba informace o připojení uživatele jsou příklady dostupných nebo chystaných API. Výčet velké části z nich naleznete na stránkách dokumentace WebAPI a některé si ukážeme v tomto seriálu.
Fullscreen
Pokud jste někdy vyvíjeli webové hry, pracovali s video přehrávačem nebo lightboxem, určitě jste v jednu chvíli museli nějakým způsobem řešit fullscreen režim. Na pomoc přichází Fullscreen API.
Pomocí tohoto rozhraní je možné do fullscreen režimu uvést jakýkoliv standardní HTML element, včetně <iframe>. Po spuštění jsou skryty veškeré prvky uživatelského rozhraní a daný element je zobrazen přes celou obrazovku. Pokud element nemůže svými rozměry obrazovku vyplnit, je jeho pozadí vyplněno tmavou barvou.
// Kontrola podpory prohlížeče
if (document.fullscreenEnabled) {
// Fullscreen režim je možné spustit jen uživatelským vstupem
myButton.addEventListener('click', () => {
// Zobraz element obrázku přes celou obrazovku
myImage.requestFullscreen()
})
// Ukončí fullscreen při kliknutí kdekoliv ve stránce
window.addEventListener('click', () => {
// Metoda ukončení je dostupná pouze na objektu document
document.exitFullscreen()
})
}
Součástí specifikace jsou i nové CSS pseudo-třídy pro stylování elementů v aktivním celoobrazovkovém režimu.
/* Aplikuje se na element s ID my-image ve fullscreen režimu */
#my-image:fullscreen {
width: 100%;
height: auto;
}
/* Aplikuje se na element <html> */
:fullscreen {
background-color: #d3d3d3;
}
Podobný příklad si můžete vyzkoušet v ukázce.
Fullscreen API je podporováno všemi prohlížeči od Internet Explorer 11, kromě iOS Safari. Zatím je použitelné pouze s prefixem v názvech metod (viz ukázka nebo dokumentace). Proto, pokud se rozhodnete Fullscreen API vyzkoušet a nechcete řešit specifika různých prohlížečů, doporučuji např. miniaturní knihovnu screenfull.js.
Page Visibility
Už vás někdy napadlo, že by bylo fajn mít nějakou možnost zjistit, zda má uživatel váš web zrovna zobrazený nebo ne? Ta možnost tady je a to ve formě Page Visibility API.
Specifikace vystavuje nový atribut document.hidden, který může mít pouze hodnoty true nebo false. Další nový atribut je document.visibilityState. Ten může nabýt hodnot visible (stránka je viditelná v aktivní záložce), hidden (stránka je v neaktivní záložce, nebo je okno minimalizované) a nebo prerender (obsah stránky ještě nebyl vykreslen). Změnu těchto stavů je možné zachytávat v eventu"visibilitychange".
document.addEventListener('visibilitychange', () => {
// Změní titulek stránky podle její viditelnosti
document.title = document.hidden ? 'Nejsem vidět!' : 'Jsem vidět'
})
Podobný příklad si můžete vyzkoušet v ukázce.
Page Visibility API má zelenou ve všech prohlížečích od Internet Exploreru 10 výše. Jeho využití může být např. zmíněné pozastavení přehrávání, když je stránka skrytá. Nebo pokud posíláte pravidelné požadavky na server, můžete posílání přerušit po dobu, kdy je stránka skrytá.
Performance
Performance API je souhrn více různých tříd a rozhraní pro měření výkonu, vykreslování a věcí souvisejících.
Úplně základní metodou, kterou můžeme pro měření doby běhu použít je performance.now. Dobu běhu je možné měřit i pomocí Date.now, které vrací čas v milisekundách. Jednoduše si uložíme čas na začátku a na konci měření a spočítáme jejich rozdíl.
Použití performance.now je úplně stejné jako s Date.now. Od této metody se však liší třemi zásadními rozdíly. Za prvé, dokáže měřit čas velmi přesně až v řádech mikrosekund, oproti tomu Date.now měří v celých milisekundách. Za druhé, vrací uběhlý čas od začátku otevření stránky a ne od Unixové epochy. A za třetí je stále rostoucí a to nezávisle na systémovém čase, výsledek měření je tedy spolehlivější.
// Počáteční čas
const startA = Date.now()
const startB = performance.now()
// Měřený úsek
necoUdelej()
// Konečný čas
const endA = Date.now()
const endB = performance.now()
console.log('Doba běhu v ms: ', (startA - endA)) // 1
console.log('Doba běhu v ms: ', (startB - endB)) // 0.6300001
Příklad si můžete vyzkoušet v ukázce.
Podpora prohlížečů je od Internet Exploreru 10 velmi dobrá. Trochu pokulhává opět pouze iOS Safari, kde je stále lepší použít Date.now.
Máte zkušenosti se zmíněnými API nebo se chcete dozvědět více? Sdílejte své názory v komentářích.
K tomuto článku již není možné přidávat další komentáře