Cache/síť závod (Web.dev, 2020) - Hlavní práce75889

1.4.5 Výkon

Jednou z hlavních podmínek při tvorbě webových aplikací je svižné počáteční i opětovné načítání aplikace. Tato podkapitola pojednává pouze o klientské části a možnostech optimalizace.

Zdroje špatně navrhnuté aplikace mohou dosahovat obrovských velikostí. Při nekvalitním internetovém připojení by se zdroje ze serverové části stahovali velmi dlouho a uživatel by tak musel čekat na první načítání a vykreslování aplikace.

Na výkonnost aplikace má nejčastěji vliv neoptimalizovaná multimédia a Javascript (Mozilla, 2021).

Optimalizace multimédií

Média, hlavně videa a obrázky, tvoří průměrně více než 70 % při stahování zdrojů ze serveru.

Proto by neměla být zanedbána. Technik optimalizace je několik, mezi ty nejpoužívanější patří (Mozilla, 2021):

- Lazy loading – načítání multimédií pouze v případě potřeby. Příkladem může být galerie fotek, kde se fotky nenačtou hned při spuštění, ale až poté, co uživatel posune stránkou.

- Výběr optimálního formátu – Optimální formát souboru obvykle závisí na charakteru obrázku. Formát SVG je vhodnější pro obrázky, které mají málo barev a nejsou fotorealistické. PNG formát je vhodný pro ilustrační grafiku, loga, mapy apod. Pokud to situace dovoluje, je doporučeno používat moderní formáty WebP nebo AVIF, které jsou vhodné pro obrázky i animované obrázky.

- Používání optimální velikosti – Pro menší obrazovky budou obrázky v menším rozlišení, a naopak pro větší obrazovky budou obrázky ve větším rozlišení.

Optimalizace javascriptového kódu

Přestože multimédia tvoří většinu stažených zdrojů. Javascript může mít na výkonnost aplikace větší negativní dopad. Podobně jako u multimédií, nejlepší způsob, jak zvýšit výkonnost, je vynechat to, co není opravdu nutné.

Mezi hlavní praktiky optimalizace Javascriptu patří (Mozilla, 2021):

- Snížení množství potřebného kódu – použití knihoven a jejich funkci může zlepšit vývojářskou zkušenost. Prohlížeč si knihovnu stáhne celou i přesto, že se použije pouze jedna funkce, a tím se zvýší množství stažených dat. Proto je nutné zvážit, zda je knihovna zapotřebí či nikoliv.

- Odstranění nepoužitého kódu

- Rozdělení kódu do menších souborů – Technice dělení kódu do menších souborů se nazývá code-splitting. Kód se dělí do kritických a nekritických částí. Pro rozdělení je možné použít nástroje pro zpracování souborů, jako je např. Webpack.

- Optimalizace menších souborů

o Minifikace – Minifikace je proces odstranění nepotřebných nebo nadbytečných dat, aniž by to ovlivnilo způsob, jakým prohlížeč soubory zpracovává. Může zahrnovat odstranění komentářů, prázdných míst a nepoužitého kódu, zkrácení názvů funkcí a proměnných.

o Komprese souborů – Ke kompresi souborů se většinou používá Gzipping či Brotli. Komprese dokáže snížit velikost souboru až o 95 % a je doporučeno používat kompresi v každém případě.

1.4.6 History API

Přístup k historii relací prohlížeče je poskytován prostřednictvím objektu history. Objekt umožňuje procházení vpřed a zpět v historií uživatele a manipulovat s obsahem history stacku⁵. History API také umožňuje to, aby každá webová stránka měla unikátní URL adresu (Mozilla, 2021).

History API také dovoluje webovým aplikacím explicitně nastavit výchozí chování scrollování při přechodu na předešlou stránku. Tohoto chování je docíleno pomocí scrollRestoration (Mozilla, 2021).

window.onpopstate = function(event) {

alert(`location: ${document.location}, state:${JSON.stringify(event.state)}`) }

history.pushState({page: 1}, "title 1", "?page=1") history.pushState({page: 2}, "title 2", "?page=2") history.replaceState({page: 3}, "title 3", "?page=3") history.back()

history.back() history.go(2)

Výpis zdrojového kódu 6: History API (Mozilla, 2021)

1.4.7 Indexace ve webových vyhledávačích

Indexace javascriptových aplikací funguje v každém vyhledávači odlišně. Proces indexace bude popsán pouze pro nejvyužívanější vyhledávač od společnosti Google.

K indexaci používá tzv. Googlebot. Googlebot zpracovává javascriptové aplikace ve třech fázích (Google, 2021):

1) Crawling (prohledávání) 2) Rendering (vykreslování) 3) Indexace

Proces procházení začíná se seznamem webových adres z minulých vyhledávání a mapami webů, které byli poskytnuty jejich vlastníky. Prohledávač (crawler) zkontroluje soubor robots.txt, kde si ověří oprávnění k prohledávání. Dále Googlebot načte všechny povolené stránky k vykreslování a dochází k vyhodnocení důležitých parametrů – od klíčových slov až po stáří webové stránky. Vše se následně zaznamená do indexu vyhledávání.

Procházení webových stránek vytvořených v javascriptu je problematické, jelikož počáteční HTML soubor neobsahuje v HTTP hlavičce skutečný obsah stránek. Tento problém se dá

5 Stack, nebo také zásobník, je obecná datová struktura, která se používá jako uložiště pro dočasná data (Wikipedia, 2021)

vyřešit pomocí tzv. server side rendering (dále jen SSR), což je technika, ve které se stránky vykreslují na serverové části. Server dále vykreslenou stránku pošle ve formě odpovědi klientovi (Google, 2021).

Framework React obsahuje balíček react-dom, který umožňuje na serveru vygenerovat textovou podobu toho, co se má vykreslit na klientské části (Facebook, 2021).

Metadata Schema.org

Schema.org je slovník, který slouží k popisu strukturovaných dat. Strukturovaná data jsou standardizovaný formát pro poskytování informací o stránce a pro třídění obsahu stránky.

Vyhledávání Google také strukturovaná data používá k aktivaci zvláštních funkcí a vylepšení výsledků vyhledávání. Popis dat by měl být ve formátu JSON-LD (Google, 2021).

<h1 itemprop="name">Avatar</h1>

Director: <span itemprop="name">James Cameron</span>

(born <span itemprop="birthDate">August 16, 1954</span>) </div>

<span itemprop="genre">Science fiction</span>

<a href="../movies/avatar-theatrical-trailer.html"

itemprop="trailer">Trailer</a>

</div>

Výpis zdrojového kódu 7: Metadata Schema.org (Google, 2021) Kanonické URL

Kanonická adresa URL je adresa URL nejlepší reprezentativní stránky ze skupiny duplicitních stránek podle vyhledávače. Jestliže existují např. dvě adresy URL pro jednu stránku (priklad.cz?priklad=1234 a priklad.cz/priklady/1234), vyhledávač jednu vybere jako kanonickou. Podobně platí, že pokud existuje více stránek, které jsou téměř totožné, může je vyhledávač seskupit. Jedná se např. o stránky, které se liší pouze řazením nebo filtrováním obsahu, třeba podle ceny nebo barvy položky (Google, 2021).

Vyhledávačům je možné explicitně sdělit, která URL je kanonická. Zapisuje se do hlavičky stránky do tagu <link> s atributem rel=”canonical”.

1.4.8 Metadata sociálních sítí

Metadata sociálních sítí

Informace, které se při sdílení odkazu na nějaký web objeví na sociálních sítích nejsou načítány náhodně. Obrázek, název článku i doplňkový text lze ovlivnit pomocí protokolu Open Graph. Jedná se o speciální meta značky v HTML souboru stránky. Je možné upravit URL, titulek, popisek, typ obsahu a obrázek (OGP, 2021).

<head>

</head>

Výpis zdrojového kódu 8: Příklad umístění značek Open Graph v hlavičce HTML (zdroj: autor)

1.4.9 Responzivní web design

Aplikace s responzivním web designem se automaticky přizpůsobuje různým rozlišením a správně se zobrazuje, jak na mobilních zařízeních (tablet, mobil), tak i desktopových zařízeních. Responzivity lze dosáhnout pomocí Viewport a Media Queries.

Viewport

V kontextu webového designu je Viewport označení pro výřez stránky viditelný v okně prohlížeče. Na zařízeních, kde je možné měnit velikost okna (typicky se jedná o desktopové zařízení), tedy viewport představuje šířku a výšku okna bez rozhraní prohlížeče.

Manipulace s tímto výřezem probíhá pomocí meta tagu v hlavičce HTML souboru (Mozilla, 2021).

Výpis zdrojového kódu 9: Viewport – meta tag (zdroj: autor)

Width udává šířku layoutového viewportu v pixelech. Nejčastěji využívaná hodnota device-width sjednotí šířku layoutového viewportu se šířkou ideálního viewportu.

Uživatel si nebude muset webovou stránku přibližovat.

Initial-scale prakticky dělá totéž, co width=device-width. Uvádí se kvůli kompatibilitě se staršími prohlížeči (Mozilla, 2021).

Media Queries

Media Queries jsou podmínky, které umožňují aplikovat různá CSS pravidla v různých technických kontextech.

@media screen and (max-width: 800px) { /* CSS pravidla */

}

Výpis zdrojového kódu 10: Media Queries (zdroj: autor)

Media Query se skládá z typu média (@media screen) a podmínky, která obsahuje vlastnosti média s hodnotou (max-width: 800px).

1.4.10 UX

Z optimálních kritérií týkajících se uživatelské přívětivosti zbývá vyřešit nehybnost pozice obsahu stránky při načítání a překrývání textového pole klávesnicí.

Nehybnost pozice obsahu stránky při načítání

Při počátečním vykreslování obsahu je možné, že pozice obsahu bude na obrazovce přeskakovat. Jedná se např. o načítání obrázků. Řešení, jak tento problém vyřešit, existuje více. Avšak nejběžnějším řešením je nastavení fixní velikosti elementu pomocí min-height, který pro obrázek vytvoří prázdné místo se správnou velikostí. Po vykreslení obrázek nezpůsobí skákání obsahu.

V situaci, kdy není možné nastavit fixní velikost elementu, lze použít transition (přechod).

Použitím plynulých přechodů může neočekávaná změna obsahu působit méně rušivě (CSS-TRICKS, 2016).

Překrývání textového pole klávesnicí

Při aktivaci textového pole na mobilním zařízení se uživateli zobrazí klávesnice. Klávesnice může textové pole skrýt a uživatel bude muset obrazovku posunout tak, aby viděl co do pole zadává. Použitím javascriptové metody scrollIntoViewIfNeeded() a scrollIntoView() lze tento problém eliminovat. Obě metody posouvají element, na který je metoda volána, tak aby na něj uživatel viděl. Obecně není doporučeno používat metodu scrollIntoViewIfNeeded(), jelikož je poměrně nová a není podporována na všech hlavních prohlížečích (Mozilla, 2021).

1.4.11 Push notifikace

Notifikace je oznámení nebo upozornění. Obvykle se jedná o krátkou textovou zprávu, která oznamuje nějakou aktualitu. Notifikace má například podobu upozornění na nově příchozí poštu, oznámení o změně stavu platby nebo připomenutí nadcházející události.

Push notifikaci je možné poslat jak z klientské částí aplikace, tak i ze serverové. Klientská část využívá Web Notification API (Mozilla, 2021) a pokud je klientská část neaktivní (změna okna v prohlížeči, minimalizace prohližeče apod.), tak se notifikace posílají přes serverovou část, která využívá Push API (Mozilla, 2021).

Web Notifications API

Nejprve musí udělit uživatel oprávnění k zobrazování systémových notifikací, což se obvykle provádí při první inicializaci aplikace pomocí metody Notification.requestPermission(). V případě, že uživatel oprávnění odmítne, by se neměla žádost při další návštěvě zobrazit. V žádosti by měl být také uveden důvod a informace o tom, jaké notifikace bude uživatel dostávat. Notifikace se vytváří pomocí konstruktoru Notification() (Mozilla, 2021).

Push API

Každý prohlížeč spravuje push notifikace prostřednictvím svého vlastního systému, který se nazývá push service (česky push služba). V případě udělení oprávnění k zasílání notifikací je možné aplikaci přihlásit k push službě prohlížeče. Tímto se vytvoří speciální objekt obsahující endpoint URL (URL koncového bodu), který je unikátní, a veřejný klíč. Na tuto URL adresu se zasílá zašifrovaná push zpráva a push služba zasílá notifikaci správnému klientovi.

Shrnutí celého procesu odesílání a přijímání push zprávy a následného zobrazení notifikace se dá shrnout následnovně (Mozilla, 2021):

Na straně klienta:

- Přihlášení k push službě

- Odeslání vytvořeného objektu na server Na straně serveru:

- Generování dat, které budou uživateli odeslány - Šifrování vygenerovaných dat pomocí veřejného klíče

- Odeslání zašifrovaných dat na URL koncového bodu push služby

Zpráva probudí prohlížeč, který najde příslušného service workera a vyvolá push událost.

Dále na straně klienta probíhá:

- Zachycení push události - Přijmutí a zpracování dat - Zobrazení notifikace uživateli

self.addEventListener('push', function(event) {

if (!(self.Notification && self.Notification.permission === 'granted')) { return;

var title = data.title || "Something Has Happened";

var message = data.message || "Here's something you might want to check out.";

var icon = "images/new-notification.png";

var notification = new self.Notification(title, { body: message,

tag: 'simple-push-demo-notification', icon: icon

});

notification.addEventListener('click', function() { if (clients.openWindow) {

clients.openWindow('https://example.blog.com/2015/03/04/something-new.html');

} });

});

Výpis zdrojového kódu 11: Zpracování push události (zdroj: autor)

1.4.12 Podpora prohlížečů

Jeden z hlavních požadavků PWA je podpora všech hlavních prohlížečů – Google Chrome, Mozilla FireFox, Safari, Edge a Opera. Hlavní zdroj informací pro kontrolu podpory využívaných API byl webový portál MDN Web Docs (Mozilla, 2021). Jedná se o portál, který obsahuje nejen dokumentaci k API, ale také popis webových standardů a technologií.

Všechny potřebné API jsou na hlavních prohlížečích podporované. Výjimkou je prohlížeč Safari, který nepodporuje Push API a jen částečně podporuje Web Notification API.

Safari

Safari, webový prohlížeč společnosti Apple, na zařízeních s operačním systémem iOS a iPadOS je podpora Web Notification API velmi omezená. Na těchto zařízeních není možné zobrazit notifikace odděleně. Notifikace je možné zobrazit v rámci webové aplikace, avšak po přepnutí či minimalizaci aplikace není možné uživateli poslat notifikaci.

Jak již bylo zmíněno, Push API není podporováno v žádné verzi Safari. Pro Safari na desktopových zařízeních společnost Apple vyvinula vlastní implementaci push API, které

využívá tzv. Apple’s push notification service (dále jen APNs) (Apple, 2021). Vedle standardní implementace Push API je nutné implementovat také APNs. Pro Safari na mobilních zařízeních není v době psaní téhle práce žádné řešení.

1.5 PWA vs Nativní mobilní aplikace

Některé funkcionality PWA jsou omezeny podporou prohlížečů nebo mobilních zařízeních na, kterých se aplikace spouští. Tato podkapitola srovnává PWA pouze s nativními mobilními aplikacemi, jelikož jsou PWA zaměřené primárně na mobilní zařízení.

Srovnání je členěno do následujících oblastí:

- Publikace a dostupnost - Výkon

- Přístup k hardwaru a k funkcionalitám specifickým pro mobilní zařízení - Implementace

1.5.1 Publikace a dostupnost

Nativní mobilní aplikace jsou publikovány v příslušném digitálním obchodě s aplikacemi.

Zařízení s operačním systém Android mohou stahovat aplikace z Google Play Store.

Ekvivalentem pro zařízení s operačním systémem iOS, iPadOS a macOS je App Store.

Aplikace se po stažení uloží do interní paměti zařízení a dají se spouštět bez internetového připojení.

PWA se načítají z webového prohlížeče a pomocí service workeru je možné aplikaci nainstalovat. Aplikace se uloží do cache a je taktéž spustitelná bez internetového připojení.

V následujících tabulkách jsou popsané výhody a nevýhody jednotlivých platforem týkajících se jejich publikace a dostupnosti.

Tabulka 3: Výhody a nevýhody publikace a dostupnosti nativních aplikací (zdroj: autor) Nativní mobilní aplikace

Výhody

Distribuční služba s aplikacemi má jistá pravidla a požadavky, které se musí splnit při publikaci aplikací. Ne všechny aplikace se tak dostanou do katalogu, a tím se celkově zvýší bezpečnost a kvalita aplikací.

Obchod poskytuje procházení nabídky softwaru, vyhledání, prohlížení kategorií, žebříčků a recenzí, což značně zjednoduší výběr správné aplikace.

Nevýhody

Pro používání aplikace je nutná instalace

Komplexní proces publikace aplikace

Tabulka 4: Výhody a nevýhody publikace a dostupnosti PWA (zdroj: autor) PWA

Výhody

PWA je dostupná z prohlížeče a není tedy nutná instalace.

PWA lze nechat vyhledávači indexovat. Na webových vyhledávačích je tak jednodušeji dohledatelná.

Nevýhody

Absence katalogu nebo obchodu s dostupnými PWA, které by bylo spravováno vyšší autoritou⁶.

1.5.2 Výkon

Nativní mobilní aplikace, jak už z názvu vypovídá, běží na zařízeních nativně. Má možnost přistupovat k hardwaru a softwaru zařízení a tyto systémové prostředky dokáže lépe optimalizovat.

Díky ukládání zdrojů aplikace do cache se progresivní webové aplikace načítají rychleji.

Hlavním důvodem, proč PWA nebudou nikdy výkonnější než nativní aplikace, je že se PWA spouští z prohlížeče. Při špatné konektivitě může docházet k latenci. Také mají vyšší spotřebu baterie (Relevant, 2021).

1.5.3 Přístup k hardwaru a funkcionalitám mobilního zařízení

Nativní aplikace běžně přistupují k hardwaru a funckionalitám specifickým pro mobilní zařízení. Tyto funkcionality se běžně ve webových aplikacích nevyužívají. Tato podkapitola je věnována podpoře těchto funkcionalit v PWA. Jelikož je PWA spouštěna v prohlížeči, nemusí některé funkcionality vůbec podporovat. Hlavním zdrojem pro kontrolu podpory funkcionalit a přístupu k hardwaru je webový portál What Web Can Do (Bar, 2021), který obsahuje databázi dostupných API a jejich podporu v prohlížečích a zařízeních.

6 Tato nevýhoda se vztahuje pouze na obchod s aplikacemi společnosti Apple (Koombea, 2021).

Společnost nedovoluje publikaci PWA. Publikace PWA do Google Play Store je povolena (Medium, 2019).

Geolokace

Poloha zařízení se získává pomocí Geolocation API, které umožňuje autorizovaným webovým aplikacím přistupovat k údajům o poloze poskytnuté zařízením. Poloha se získává pomocí GPS nebo ze sítě (Bar, 2021).

Fotoaparát a mikrofon

Focení, natáčení videa či nahrávání zvuku jsou dostupné v PWA pomocí Media Capture API.

Media Capture API umožňuje používat data dostupná z fotoaparátu a mikrofonu zařízení, případně i záznamy pořizovat. Pořizování fotografií pomocí tohoto API je velmi omezené (Bar, 2021). K použití pokročilejších nastavení fotoaparátu, jako je např. přibližování, vyváženost barev, ISO nebo zaostřovací body, je Image Capture API (Bar, 2021).

Úložiště

Aplikace může k souborům zařízení přistupovat pomocí File API. Aplikace bude mít pouze read-only oprávnění. Native File Systém API, které je momentálně ve fázi návrhu, by mělo v budoucnu umožnit soubory i editovat (Bar, 2021).

Co se offline uložiště týče existují tři standardizované a plně dostupné technologie: Web Storage, IndexedDB API a Cache API. Každý slouží k něčemu jinému. Web storage dovoluje ukládat pouze textová data ve formátu JSON a byl navržen pro menší objem dat. IndexedDB slouží jako uložiště pro větší objem strukturovaných dat. Cache API slouží k ukládání statického obsahu webové aplikace (Bar, 2021).

Notifikace

Posílání notifikací z klientské i serverové části je popsáno v předchozí kapitole (viz. 1.4 Struktura PWA).

Orientace a pozice zařízení

Screen Orientation API umožňuje webovým aplikacím získat informace o aktuální orientaci stránky (na výšku nebo na šířku) a také uzamknout orientaci obrazovky v požadovaném stavu (Bar, 2021).

Device Orientation API umožňuje webovým aplikacím přistupovat k datům gyroskopu a kompasu, aby bylo možné určit statickou orientaci zařízení ve všech třech dimenzích (Bar, 2021).

Funkcionality zařízení

Stav připojení a chování PWA při nedostupném připojení je popsáno výše (viz. 1.4 Struktura PWA).

Informace jako typ připojení a maximální rychlost stahování lze zjistit pomocí Network Information API. Toto API je podporováno pouze v prohlížečích Google Chrome na zařízeních Android (Bar, 2021).

Stav baterie lze zjistit pomocí Battery Status API. Kromě stavu baterie lze zjistit informace o zdroji napájení, úroveň nabití, předpokládané době plného nabití či vybití (Bar, 2021).

Vibration API umožňuje aplikaci spouštět v případě potřeby vibrace. API není v Safari podporováno (Bar, 2021).

Bezdrátová komunikace

Web Bluetooth API umožňuje párování s blízkými periferními zařízeními podporující technologii Bluetooth Low Energy a přístup k jejich službám (Bar, 2021).

Schopnost číst a zapisovat do zařízení NFC (Near-Field Communication) umožňuje Web NFC API. Toto API je v experimentální fázi a je částečně podporovaná pouze v prohlížeči Chrome pro Android (Bar, 2021).

Volání, SMS a MMS

Volání, přístup ke kontaktům zařízení, zasílání a přijímání SMS či MMS není povoleno v žádném prohlížeči.

1.5.4 Implementace

Nativní mobilní aplikace je nutné vyvíjet pro každou platformu zvlášť. Aplikace pro zařízení s operačním systémem Android se vyvíjí v jazyce Java, Kotlin nebo C#. Aplikace pro iOS, iPadOS, macOS jsou vyvíjeny v jazyce Switch či Objective-C. Což většinou znamená, že je nutné mít specializované týmy pro každý programovací jazyk. Taková implementace je z hlediska finančního, technologického i časového hlediska velmi náročná.

PWA je možné napsat v jednom jazyce – Javascript nebo C#. Výsledná aplikace bude spustitelná nejen na mobilních zařízeních a prohlížečích, ale i na desktopových zařízeních.

2 Analýza požadavků

Tato kapitola se zabývá zjištěním požadavků, které jsou nutné pro návrh a vývoj ukázkové aplikace.

2.1 Rezervační systém

Tématem pro vývoj PWA je v této práci rezervační systém. Jedním z cílů práce je tvorba ukázkové aplikace, proto je tato problematika brána jako téma sloužící k demonstraci funkcí a možností, které PWA nabízí.

Zákazníci využívající různé služby mají v dnešní době mnoho možností rezervace. Od

In document Hlavní práce75889_trat04.pdf, 1.6 MB Stáhnout (Stránka 28-42)