Progresivní webové aplikace
Progresivní webové aplikace (anglicky Progressive Web Apps, PWA) jsou webové aplikace, které vypadají a načítají se jako běžné webové stránky. Navíc ale nabízí funkce běžně dostupné pouze nativním aplikacím, např. práci offline, push notifikace nebo přístup k hardwaru zařízení. PWA tak kombinují flexibilitu webu s možnostmi aplikací.
Historie[editovat | editovat zdroj]
Kolem roku 2005 se vývojové technologie přesunuly ze statických na dynamické webové stránky řízené servery (PHP, ASP.NET) nebo systémy ze strany klienta (AJAX[1]). Došlo také k přechodu na responzivní webový design.[2]
V roce 2007 proběhly první pokusy o vytvoření progresivní webové aplikace[3], avšak nepříliš úspěšně. PWA selhávaly zejména na některých zařízeních (např. iPhone), v porovnání s nativními aplikacemi byly pomalejší a poskytovaly horší uživatelskou zkušenost.
Změna přišla v polovině roku 2010 díky vylepšením v jazycích HTML5, CSS3 a JavaScript, která výrazně zvýšila kompatibilitu webových prohlížečů s výkonnými procesory (např. Apple A10 či Snapdragon 820). PWA se staly životaschopnou alternativou k nativním aplikacím.
S názvem „progresivní webové aplikace“ přišli v roce 2015 designérka Frances Berriman a inženýr Google Chrome Alex Russell.[4] Popsali jím aplikace využívající nové funkce podporované moderními prohlížeči, dále service workers a web app manifests, které uživatelům umožňují inovovat webové na progresivní webové aplikace v jejich nativním operačním systému.
Charakteristika[editovat | editovat zdroj]
Podle vývojářů[5][6][7][8] mají PWA tyto charakteristiky:
- Progresivní – pracují pro každého uživatele bez ohledu na volbu prohlížeče nebo operačního systému.
- Responzivní – přizpůsobí se jakémukoli zařízení, kde se mají objevit, tedy PC, mobilnímu telefonu i tabletu.
- Nezávislé na připojení – Service workers umožňují práci offline nebo v sítích s nízkou kvalitou připojení.
- App-Like – uživatel má při interakci pocit, jako by používal nativní aplikaci.
- Aktuální – díky procesu aktualizace Service workers.
- Bezpečné – obsluha pouze pomocí HTTPS.
- Dohledatelné – jsou identifikovatelné jako "aplikace" díky manifestu W3C[9] a rozsahu registrace poskytovatelů služeb, díky kterým je vyhledávače mohou nalézt.
- Instalovatelné – bez stahování z App Store nebo Google Play.
- Dostupné – snadno se sdílejí prostřednictvím adresy URL. PWA nevyžadují komplexní instalaci.
Progresivní webové aplikace jsou vylepšením stávající webové technologie. PWA pracují v každém prohlížeči, ale některé funkce typu „app-like“ (např. nezávislost na připojení, instalace na domovskou obrazovku a push zprávy) závisí na podpoře prohlížeče. Od dubna 2018 tyto funkce podporují v různém rozsahu Microsoft Edge, Google Chrome, Mozilla Firefox a Safari. Dá se očekávat, že je i další prohlížeče budou postupně následovat.[10][11]
Základní technická kritéria pro to, aby web považoval prohlížeč za progresivní webovou aplikaci, popsal Russell v následujících bodech:[12]
- Mají bezpečný původ. Obsluhují se přes TLS a „zelené ochranné zámky“ (bez aktivního smíšeného obsahu).
- Načítají se offline.
- Obsahují Manifest soubor, který definuje základní informace o aplikaci: jméno, short_name, start_url a zobrazení (s hodnotou standalone nebo fullscreen)
- Mají ikonu ve formátu PNG a velikosti nejméně 144 × 144 px. Např.: "ikony": [{"src": "/images/icon-144.png", "velikosti": "144x144", "typ": "image / png
Technologie[editovat | editovat zdroj]
Běžně používané technologie slouží k vytváření progresivních webových aplikací.[13][14] PWA stojí na těchto pilířích:
Manifest[editovat | editovat zdroj]
Manifest pro webové aplikace se nazývá JSON. Vývojářům poskytuje centralizované místo pro zadávání metadat spojených s webovou aplikací, včetně:
- Jména webové aplikace
- Odkazu na ikonu či obrázek webové aplikace
- Preferované URL sloužící k otevření webové aplikace
- Dat konfigurace webové aplikace
- Prohlášení o výchozí orientaci webové aplikace
- Nastavení režimu zobrazení, např. celá obrazovka
Tato metadata mají zásadní význam pro přidání aplikace na domovskou obrazovku nebo jiné uvedení vedle nativních aplikací.
AppCache (zastaralé)[editovat | editovat zdroj]
AppCache je starší technologie na podporu offline používání webu.[15] Optimálně pracuje jen u jednostránkových aplikací, ale selhává u wiki nebo vícestránkových aplikací.[16] Na začátku roku 2019 přední prohlížeče AppCache podporují, protože je některé stránky dlouhodobě používají. V budoucnu se však očekává jejich nahrazení.
Service Workers[editovat | editovat zdroj]
Nativní mobilní aplikace poskytují bohaté zkušenosti a vysoký výkon na úkor úložného prostoru, nedostatku aktualizací v reálném čase a nízké viditelnosti ve vyhledávání. Nevýhody tradičních webových aplikací tkví v chybějících nativních, kompilovaných a spustitelných souborech v kombinaci se závislostí na nespolehlivém a potenciálně pomalém připojení k webu.
Service workers poskytují skriptovatelnou síťovou proxy ve webovém prohlížeči, která umožňuje programové vyžádání webových/HTTP požadavků. Efektivně tak využívají mechanismy vyrovnávací paměti a umožňují bezchybné fungování v offline módu.
Service workers se u progresivních webových aplikací používají ke zkombinování největších výhod nativních a webových aplikací.[17]
Výhody Service workers:
- Dokáží jednoduše zpracovat push oznámení.
- Synchronizují data na pozadí.
- Jsou schopné reagovat na požadavky zdrojů pocházejících odjinud.
- Získávají centralizované aktualizace.
Web Workers[editovat | editovat zdroj]
Umožňují webové aplikaci spouštět současně více podprocesů JavaScriptového kódu.[18] Díky tomu se dlouhé aktivity odstraňují z podprocesu uživatelského rozhraní a redukují tak blokování UI.
IndexedDB, IDB[editovat | editovat zdroj]
IndexedDB je API rozhraní zabudované do moderních prohlížečů pro ovládání NoSQL databáze.[19] Umožňuje ukládání dat do paměti klientského zařízení, což pro PWA znamená možnost lokálního vyhledávání místo posílání žádostí.
LocalStorage & SessionStorage[editovat | editovat zdroj]
Náhrada za soubory cookie, která umožňuje ukládat víc dat než cookie.[20]
App Shell[editovat | editovat zdroj]
Architektonický přístup Model App Shell používají některé progresivní webové aplikace.[21] Pro rychlé načítání ukládají Service workers základní uživatelské rozhraní nebo shell z responzivní webové aplikace. Tento shell poskytne prohlížeči počáteční statický rámec, rozložení nebo architekturu, do níž může být vlastní obsah načítán postupně a dynamicky. To umožňuje uživatelům pracovat s aplikací plynule navzdory měnící se rychlosti webového připojení. Shell může být uložen v mezipaměti prohlížeče například mobilního zařízení.[22]
Využití a statistiky[editovat | editovat zdroj]
Mnoho nadnárodních firem přechází z nativních aplikací na PWA, což přináší měřitelné změny v chování uživatelů.
Svět[editovat | editovat zdroj]
Díky přechodu na PWA zvýšil Aliexpress konverzi nových uživatelů o 104 %. Také se zvýšil čas, který uživatelé stráví na stránkách napříč všemi prohlížeči o 74 %. Dvojnásobně vzrostlo i množství zobrazených stránek.[23]
Aktivita uživatelů se v PWA Starbucksu zvýšila denně i měsíčně na dvojnásobek. Nákupy přes aplikaci se zvedly v průměru o 20 %.[24]
Po přechodu na progresivní aplikaci se načítání stránek Forbes.com snížilo z 6,5 sekund na 2,5 a imprese na jednu návštěvu stoupla o 10 %.[25]
Tinder
Původní nativní aplikace Tinderu se načítala 11,91 sekund. Nová PWA je o 90 % menší a načte se za 4,69 sekund. [26]
Další PWA pro Windows 10:
- Android Messages
- Google Maps
- Google Photos
- Uber
- Telegram
- Air France
Česko[editovat | editovat zdroj]
V ČR dosud[kdy?] není používání PWA příliš rozšířené a data o změnách v chování uživatelů zatím zcela chybí.
Odborný portál zaměřený na technologie a byznys Czechcrunch o PWA napsal:[27]
„Jejich hlavní výhodou je fakt, že se nemusí stahovat a instalovat z nějakého obchodu, ale „nainstalují“ se přímo samy v rámci webového rozhraní, takže to uživatel na první pohled vůbec nepozná. Oproti klasickému webu nabízí mnohem rychlejší načítání, možnost ukládání jednotlivých stránek do offline režimu, push notifikace nebo přístup k samotnému zařízení, takže se v základu velmi podobají klasické nativní aplikaci.
Od roku 2018 začal počet progresivních aplikací v oběhu rapidně růst a na tento trend proto naskočily i společnosti jako síť kaváren Starbucks, nákupní galerie Aliexpress, seznamka Tinder, přepravní startup Uber, sociální síť Pinterest, ale i česká rozvozová služba DámeJídlo. A většina z nich si po dlouhodobém testování rozhodně nemůže na výsledky stěžovat.“[28]
Mezi známé české PWA patří:
- Kiwi.com – Český internetový vyhledávač letenek umožňuje jejich rezervaci a koupi. Zaměřuje se na propojování letů leteckých společností, které spolu normálně nespolupracují. PWA si vyvinuli interně.
- Damejidlo.cz – rozvozová (food delivery) služba rozšířená po celé ČR.
- MyDentLab – Software na řízení zubních laboratoří zjednodušuje komunikaci mezi laboratoří a lékaři. Mezi hlavní funkce aplikace patří kalkulačka ziskovosti zubních náhrad, automatická fakturace, online správa zakázek a jednoduchá zpětná vazba. PWA vyvinulo brněnské studio SNADNEE.
Reference[editovat | editovat zdroj]
- ↑ GARRETT, Jesse James. Ajax: A New Approach to Web Applications. adaptivepath.org [online]. February 18, 2005 [cit. February 18, 2005]. Dostupné v archivu pořízeném dne 2019-02-13.
- ↑ MARCOTTE, Ethan. Responsive Web Design. alistapart.com [online]. May 25, 2010 [cit. May 25, 2010]. Dostupné online.
- ↑ Insights on Latest Technologies - Simform Blog [online]. 2018-12-17 [cit. 2021-05-24]. Dostupné online. (anglicky)
- ↑ Progressive Web Apps: Escaping Tabs Without Losing Our Soul. infrequently.org [online]. [cit. 2015-06-15]. Dostupné online.
- ↑ RUSSELL, Alex. Progressive Web Apps: Escaping Tabs Without Losing Our Soul [online]. [cit. 2015-06-15]. Dostupné online.
- ↑ The core foundations of a delightful web experience. developers.google.com [online]. [cit. 2016-07-17]. Dostupné online.
- ↑ Progressive web apps. developers.google.com [online]. [cit. June 15, 2015]. Dostupné online.
- ↑ Proč a jak psát progresivní webové aplikace. Ackee Blog [online]. Ackee, 11.1.2017 [cit. 5.3.2020]. Dostupné online.
- ↑ W3C Web App Manifest. www.w3.org [online]. [cit. 12 September 2016]. Dostupné online.
- ↑ Web App Manifest. caniuse.com [online]. [cit. 14 August 2018]. Dostupné online.
- ↑ Is service worker ready?. jakearchibald.github.io [online]. Dostupné online.
- ↑ What, Exactly, Makes Something A Progressive Web App?. infrequently.org [online]. [cit. October 18, 2016]. Dostupné online.
- ↑ Discoverable. developer.mozilla.org [online]. [cit. 2017-04-24]. Dostupné online.
- ↑ Network independent. developer.mozilla.org [online]. [cit. 2017-04-24]. Dostupné online.
- ↑ Using the application cache. developer.mozilla.org [online]. [cit. 14 August 2018]. Dostupné v archivu pořízeném dne 2019-02-15.
- ↑ Application Cache is a Douchebag. alistapart.com [online]. [cit. May 08, 2012]. Dostupné online.
- ↑ www.htmlpanda.com [online]. Dostupné online.
- ↑ Worker. developer.mozilla.org [online]. [cit. 14 August 2018]. Dostupné online.
- ↑ WebAssembly Concepts. developer.mozilla.org [online]. [cit. 4 August 2018]. Dostupné online.
- ↑ Local Storage vs Cookies. stackoverflow.com [online]. Dostupné online.
- ↑ developers.google.com [online]. Dostupné online.
- ↑ indylogix.com [online]. Dostupné online.
- ↑ Case study AliExpress. developers.google.com [online]. Dostupné online.
- ↑ Case study Starbucks. mspoweruser.com [online]. Dostupné online.
- ↑ PWA companies. www.pwastats.com [online]. Dostupné online.
- ↑ PWA Stats. www.pwastats.com [online]. Dostupné online.
- ↑ BEDŘICH, Václav. Nový trend mezi mobilními weby. Progresivní aplikace násobně zrychlí načítání a zvýší konverze i příjmy [online]. Czechcrunch.cz [cit. 2022-03-01]. Dostupné online.
- ↑ BEDŘICH, Václav. Nový trend mezi mobilními weby. Progresivní aplikace násobně zrychlí načítání a zvýší konverze i příjmy. CzechCrunch [online]. [cit. 6.6.2019]. Dostupné v archivu pořízeném z originálu dne 2019-06-07.