Progresivní webové aplikace

Z Wikipedie, otevřené encyklopedie
Skočit na navigaci Skočit na vyhledávání

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, 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). Hybridní aplikace se staly životaschopnou alternativou k nativním aplikacím.

S názvem “progresivní webové aplikace” přišli v roce 2015 designér Frances Berriman a inženýr Google Chrome Alex Russell.[3] 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ářů Google[4][5][6] mají PWA tyto charakteristiky:

  1. Progresivní - pracují pro každého uživatele bez ohledu na volbu prohlížeče nebo operačního systému.
  2. Responzivní - přizpůsobí se jakémukoli zařízení, kde se mají objevit, tedy PC, mobilnímu telefonu i tabletu.
  3. Nezávislé na připojení - Service workers umožňují práci offline nebo v sítích s nízkou kvalitou připojení.
  4. Aktuální - díky procesu aktualizace Service workers.
  5. Bezpečné - služba HTTPS zabraňuje snoopingu a zajišťuje, aby obsah nebyl poškozen.
  6. Dohledatelné - jsou identifikovatelné jako "aplikace" díky manifestu W3C[7] a rozsahu registrace poskytovatelů služeb, díky kterým je vyhledávače mohou nalézt.
  7. Instalovatelné - bez stahování z App Store nebo Google Play.
  8. 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.[8][9]

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:[10]

  • 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í.[11][12] 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.[13] Optimálně pracuje jen u jednostránkových aplikací, ale selhává u wiki nebo vícestránkových aplikací.[14] 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í.[15]

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.[16] 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, IDB je NoSQL databáze zabudovaná do moderních prohlížečů.[17] 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.[18]

App Shell[editovat | editovat zdroj]

Architektonický přístup Model App Shell používají některé progresivní webové aplikace.[19] Pro rychlé načítání ukládají Service workers základní uživatelské rozhraní nebo shell z responzivní webové aplikace. Tento shell poskytuje počáteční statický rámec, rozložení nebo architekturu, do níž může být obsah načten postupně a dynamicky, což umožňuje uživatelům pracovat s aplikací navzdory různé rychlosti webového připojení. Shell může být uložen v mezipaměti prohlížeče mobilního zařízení.[20]

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]

AliExpress

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.[21]

Starbucks

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 %.[22]

Forbes

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 %.[23]

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. [24]

Další PWA pro Windows 10:

  • Twitter
  • Android Messages
  • Google Maps
  • Google Photos
  • Uber
  • Flipboard
  • Telegram
  • Air France
  • Pinterest

Č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:

"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áme Jídlo. A většina z nich si po dlouhodobém testování rozhodně nemůže na výsledky stěžovat."[25]

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 – 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.[26]

Firmy vyvíjející/podporující PWA[editovat | editovat zdroj]

Česko WEB Specializace
SNADNEE www.snadnee.com Vývoj PWA a digitalizace firem
Pixelfield pixelfield.cz/webove-aplikace/ Vývoj PWA a mobilních aplikací
Svět WEB Specializace
Google https://developers.google.com/web/progressive-web-apps/ Novinky v oblasti PWA, pro vývojáře
Vaadin https://vaadin.com/pwa Vývoj PWA
Monterail https://www.monterail.com/services/pwa-development Vývoj PWA
Ionic https://ionicframework.com/pwa Vývoj PWA
XongoLab https://www.xongolab.com/progressive-web-app-development/ Vývoj PWA
GoodWorkLabs https://www.goodworklabs.com/progressive-web-app-pwa-development/ Vývoj PWA
PWA.rocks https://pwa.rocks/ seznam PWA
Cloud4 https://cloudfour.com vývoj PWA
SmashingMagazine https://www.smashingmagazine.com/category/pwa články nejen k PWA
Awwwards (+ Google) https://www.awwwards.com/PWA-ebook/ e-book k PWA

Reference[editovat | editovat zdroj]

  1. 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. 
  2. MARCOTTE, Ethan. Responsive Web Design. alistapart.com [online]. May 25, 2010 [cit. May 25, 2010]. Dostupné online. 
  3. Progressive Web Apps: Escaping Tabs Without Losing Our Soul. infrequently.org [online]. [cit. 2015-06-15]. Dostupné online. 
  4. RUSSELL, Alex. Progressive Web Apps: Escaping Tabs Without Losing Our Soul [online]. [cit. 2015-06-15]. Dostupné online. 
  5. The core foundations of a delightful web experience. developers.google.com [online]. [cit. 2016-07-17]. Dostupné online. 
  6. Progressive web apps. developers.google.com [online]. [cit. June 15, 2015]. Dostupné online. 
  7. W3C Web App Manifest. www.w3.org [online]. [cit. 12 September 2016]. Dostupné online. 
  8. Web App Manifest. caniuse.com [online]. [cit. 14 August 2018]. Dostupné online. 
  9. Is service worker ready?. jakearchibald.github.io [online]. Dostupné online. 
  10. What, Exactly, Makes Something A Progressive Web App?. infrequently.org [online]. [cit. October 18, 2016]. Dostupné online. 
  11. Discoverable. developer.mozilla.org [online]. [cit. 2017-04-24]. Dostupné online. 
  12. Network independent. developer.mozilla.org [online]. [cit. 2017-04-24]. Dostupné online. 
  13. Using the application cache. developer.mozilla.org [online]. [cit. 14 August 2018]. Dostupné online. 
  14. Application Cache is a Douchebag. alistapart.com [online]. [cit. May 08, 2012]. Dostupné online. 
  15. www.htmlpanda.com [online]. Dostupné online. 
  16. Worker. developer.mozilla.org [online]. [cit. 14 August 2018]. Dostupné online. 
  17. WebAssembly Concepts. developer.mozilla.org [online]. [cit. 4 August 2018]. Dostupné online. 
  18. Local Storage vs Cookies. stackoverflow.com [online]. Dostupné online. 
  19. developers.google.com [online]. Dostupné online. 
  20. indylogix.com [online]. Dostupné online. 
  21. Case study AliExpress. developers.google.com [online]. Dostupné online. 
  22. Case study Starbucks. mspoweruser.com [online]. Dostupné online. 
  23. PWA companies. www.pwastats.com [online]. Dostupné online. 
  24. PWA Stats. www.pwastats.com [online]. Dostupné online. 
  25. 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. 
  26. Case study - progresivní aplikace. www.snadnee.com [online]. [cit. 2019-07-25]. Dostupné online. (česky)