Přeskočit na obsah

Progresivní webové aplikace

Z Wikipedie, otevřené encyklopedie

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í.

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:

  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

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

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ů.

Trivago

Po přidání na domovské obrazovky uživatelů se angažovanost uživatelů zvýšila o 150 %. Navíc offline funkce aplikace umožnily uživatelům přístup k údajům o hotelech, i když nebylo k dispozici internetové připojení. Tím se zlepšil uživatelský zážitek a zvýšilo se udržení uživatelů a počet rezervací.[23]

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

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

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

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

Další PWA:

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

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]

Odborný portál zaměřený na technologie a byznys Czechcrunch o PWA napsal:[29]

„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.

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ě.
  • Foodora – původem Česká rozvozová (food delivery) služba Dámejídlo.cz, která v roce 2023 změnila název.
  • 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.[30]
  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. @COREWAVE. Progressive Web Apps (PWAs) Case Studies [online]. 2023-10-07 [cit. 2024-05-08]. Dostupné online. (anglicky) 
  24. Case study AliExpress. developers.google.com [online]. Dostupné online. 
  25. Case study Starbucks. mspoweruser.com [online]. Dostupné online. 
  26. PWA companies. www.pwastats.com [online]. Dostupné online. 
  27. PWA Stats. www.pwastats.com [online]. 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. 
  29. 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. 
  30. Digitální revoluce v zubní laboratoři: příběh úspěšné transformace JS Lab - Vývoj webových aplikací na zakázku, Softwarové studio, Digitální transformace | SNADNEE. www.snadnee.com [online]. [cit. 2024-05-08]. Dostupné online.