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

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

Podle vývojářů[5][6][7][8] 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. App-Like – uživatel má při interakci pocit, jako by používal nativní aplikaci.
  5. Aktuální – díky procesu aktualizace Service workers.
  6. Bezpečné – obsluha pouze pomocí HTTPS.
  7. 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.
  8. Instalovatelné – bez stahování z App Store nebo Google Play.
  9. 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

Běžně používané technologie slouží k vytváření progresivních webových aplikací.[13][14] PWA stojí na těchto pilířích:

Manifest

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é)

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

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

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

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

Náhrada za soubory cookie, která umožňuje ukládat víc dat než cookie.[20]

App Shell

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

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

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

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

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 %.[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:

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

Česko

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

  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. ↑ Insights on Latest Technologies - Simform Blog [online]. 2018-12-17 [cit. 2021-05-24]. Dostupné online. (anglicky) 
  4. ↑ Progressive Web Apps: Escaping Tabs Without Losing Our Soul. infrequently.org [online]. [cit. 2015-06-15]. Dostupné online. 
  5. ↑ RUSSELL, Alex. Progressive Web Apps: Escaping Tabs Without Losing Our Soul [online]. [cit. 2015-06-15]. Dostupné online. 
  6. ↑ The core foundations of a delightful web experience. developers.google.com [online]. [cit. 2016-07-17]. Dostupné online. 
  7. ↑ Progressive web apps. developers.google.com [online]. [cit. June 15, 2015]. Dostupné online. 
  8. ↑ Proč a jak psát progresivní webové aplikace. Ackee Blog [online]. Ackee, 11.1.2017 [cit. 5.3.2020]. Dostupné online. 
  9. ↑ W3C Web App Manifest. www.w3.org [online]. [cit. 12 September 2016]. Dostupné online. 
  10. ↑ Web App Manifest. caniuse.com [online]. [cit. 14 August 2018]. Dostupné online. 
  11. ↑ Is service worker ready?. jakearchibald.github.io [online]. Dostupné online. 
  12. ↑ What, Exactly, Makes Something A Progressive Web App?. infrequently.org [online]. [cit. October 18, 2016]. Dostupné online. 
  13. ↑ Discoverable. developer.mozilla.org [online]. [cit. 2017-04-24]. Dostupné online. 
  14. ↑ Network independent. developer.mozilla.org [online]. [cit. 2017-04-24]. Dostupné online. 
  15. ↑ Using the application cache. developer.mozilla.org [online]. [cit. 14 August 2018]. Dostupné v archivu pořízeném dne 2019-02-15. 
  16. ↑ Application Cache is a Douchebag. alistapart.com [online]. [cit. May 08, 2012]. Dostupné online. 
  17. ↑ www.htmlpanda.com [online]. Dostupné online. 
  18. ↑ Worker. developer.mozilla.org [online]. [cit. 14 August 2018]. Dostupné online. 
  19. ↑ WebAssembly Concepts. developer.mozilla.org [online]. [cit. 4 August 2018]. Dostupné online. 
  20. ↑ Local Storage vs Cookies. stackoverflow.com [online]. Dostupné online. 
  21. ↑ developers.google.com [online]. Dostupné online. 
  22. ↑ indylogix.com [online]. Dostupné online. 
  23. ↑ Case study AliExpress. developers.google.com [online]. Dostupné online. 
  24. ↑ Case study Starbucks. mspoweruser.com [online]. Dostupné online. 
  25. ↑ PWA companies. www.pwastats.com [online]. Dostupné online. 
  26. ↑ PWA Stats. www.pwastats.com [online]. Dostupné online. 
  27. ↑ 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. 
  28. ↑ 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.