background design element dropbackground design element dropbackground design element drop

Progresivní web aplikace (PWA): výhody, příklady, propagace


Barbora Koďousková
Aktualizováno:14.08.2020· 12 min. čtení
Počet zobrazení:15293
Facebook iconTwitter iconLinkedIn icon
Obsah článku
Facebook iconTwitter iconLinkedIn icon

Prgressive Web Apps (PWA), česky progresivní webové aplikace, jsou jedním z nejnovějších trendů v oblasti vývoje internetových stránek. Prostřednictvím push notifikací, přístupu k hardwaru zařízení a možnosti práce offline do jisté míry smývají hranice mezi webovou a nativní aplikací. Kombinují tak v sobě to nejlepší z obou světů, což je důvodem, proč k tomuto řešení přechází stále více poskytovatelů služeb.

co je pwa

Vývoj prostředků informačních a komunikačních technologií významně ovlivnil dnešní podobu zprostředkování a čerpání informací. Smartphony a tablety se postupem času staly běžnou součástí lidských životů, kdy v kombinaci s mobilními aplikacemi usnadňují každodenní pracovní i osobní činnosti. Aplikace dnes existují v podstatě na všechno. Jsou snadno ovladatelné, takže si s nimi poradí i starší generace nebo děti, rychlé a v mnohých případech fungují i bez připojení k internetu.

Staly se proto určitým udavačem trendů, kterým se musel přizpůsobit také webový svět. Původní statické weby propojené odkazy, se postupem času proměnily na dynamický obsah utvořený na míru tak, aby odpovídal požadavkům uživatelů nejen z hlediska rychlosti načítání, ale i prohlížení z mobilních zařízení. Zjednodušeně řečeno se tak internetové stránky začínají stále více podobat mobilním aplikacím. 

Co je progresivní webová aplikace (PWA) a proč bychom ji měli chtít

Důsledkem této snahy o „app-like“ uživatelskou zkušenost je tak mimo jiné vznik progresivních webových aplikací (označovaných jako PWA). Ve své podstatě se jedná o web, který se chová a vypadá takřka jako mobilní aplikace. S uživatelem komunikuje prostřednictvím push notifikací (upozornění) a má díky API přístup k hardwaru zařízení, což znamená, že může využívat například fotoaparát nebo čtečku otisku prstu. Oproti nativním aplikacím ovšem nejsou tolik náročné na vývoj, mají proto nejblíže k takzvaným hybridním aplikacím.

vývoj pwa progresivní webové aplikace

Stejně jako běžné aplikace je možné PWA umístit na domovskou obrazovku telefonu nebo tabletu, což vede k lepšímu uživatelskému zážitku a větší návratnosti návštěvníků. Častou formou progresivní webové aplikace je pak takzvaná SPA (single-page application), kdy je všechen obsah umístěn na jedné stránce. Není to ovšem podmínkou. Obě řešení však spojuje to, že po uživatelském příkazu dochází k aktualizaci pouze potřebných dat, což zrychluje odezvu. Pokud tak například uživatel přidá komentář, tak se aktualizuje pouze sekce s komentáři, zbytek obsahu zůstává v původní podobě.

Mimo push notifikace, přístup k hardwaru a přístupnost z domovské stránky progresivní webové aplikace nabídnou také možnost práce offline, čímž se opět přibližují klasickým mobilním aplikacím. Povinností vývojářů PWA je pak zajištění přenosu informací přes zabezpečený protokol HTTPS. Tím je stanoven určitý standard bezpečnosti například při přenosu hesel a dalších citlivých údajů.

Nativní aplikace versus PWA aneb výhody a nevýhody

Výhody progresivních webových aplikací úzce souvisejí s jejich charakteristikou uvedenou v předchozích odstavcích. V kostce je lze shrnout následovně:

  • rychlost – PWA by měly být optimalizovány tak, aby uživatelům nabízely stabilní rychlost nejen při načítání aplikace, ale i v průběhu celého využívání,
  • progresivnost (multiplatformnost) – díky tomu, že jsou progresivní webové aplikace šířeny typicky online, nabízejí neomezený přístup nezávisle na operačním systému či prohlížeči,
  • responzivita – design PWA je přizpůsobený všem zařízením, nezáleží tedy na tom, zda je aplikace načtena na počítači s Windows, nebo na telefonu či tabletu s Androidem. Rozložení prvků i ovládání zůstává pořád stejné, jen je přizpůsobené velikosti displeje,
  • nezávislost na připojení k internetu – Service workers umožňuje bezproblémovou práci offline,
  • app-like vzhled – prostředí PWA odpovídá standardům nastaveným mobilními aplikacemi, snižuje se tak rozdíl mezi používáním webové a nativní aplikace,
  • bezpečnost – nutnost zajištění připojení přes HTTPS protokol,
  • dohledatelnost – PWA je ve své podstatě stále webová aplikace, vztahují se proto na ni standardní SEO techniky, což umožňuje umístění na vysokých pozicích ve vyhledávačích,
  • podpora periférií – progresivní aplikace by měly podporovat připojené periferie, lze je tedy ovládat prostřednictvím myši a klávesnice,
  • aktuálnost – veškerý obsah PWA je vždy aktuální.

Progresivní webové aplikace mají ovšem také nějaké nevýhody. Mezi ty hlavní patří určitá nekompatibilita s iOS, respektive s iPady a iPhony, kde Safari poněkud komplikuje „instalaci“ aplikace. Další nevýhodou PWA je vyšší spotřeba baterie a také fakt, že i přes přístup k hardwaru a offline režim nedokáží plnohodnotně nahradit nativní aplikace.

Kde se s PWA můžeme setkat?

Pravděpodobně všichni jsme se již v praxi s PWA setkali. Tato forma aplikace je využívána například servery typu AliExpress, Starbucks nebo Forbes. Rozhodly se pro ni ovšem také streamovací služba Spotify a Google se svou galerií Fotky Google. Na základě výzkumu amerického giganta pak společnosti, které svou progresivní webovou aplikaci spustily, zaznamenaly obrovský nárůst aktivních uživatelů a snížení míry okamžitého opuštění stránky.

progresivní webová aplikace využití

Ku příkladu sociální síť Twitter po přechodu na PWA zaznamenala o 75 % více tweetů a 20% snížení okamžitého opuštění stránky. Streamovací portál Hulu po náhradě nativního prostředí progresivní webovou aplikací zaznamenal 27% nárůst opětovných návštěv.

PWA versus SPA

Určitá shoda ve výhodách jednostránkové webové aplikace a progresivní webové aplikace, spolu s častým prolínáním těchto dvou forem v mnoha případech vede k zaměňování obou pojmů. Je proto vhodné objasnit, v čem se obě řešení rozcházejí. SPA (Single-page application) je dynamicky aktualizovaná stránka, která veškerý obsah schraňuje na jednom místě. Veškerý kód se načítá pouze jednou, přičemž se v reakci na uživatelovy pokyny požadované části dynamicky aktualizují. Přináší tedy lepší uživatelský zážitek v podobě svižných odpovědí. Jako příklady pak lze uvést Google Maps, Gmail nebo Facebook.

PWA je oproti tomu spíše soubor pokynů, který z běžné aplikace dělá progresivní aplikaci přinášející app-like vzhled, offline dostupnost a push notifikace. Stejně jako SPA přináší efektivnější a rychlejší načítání, jsou ovšem o něco spolehlivější, přičemž původní oblasti řešené JavaScriptem nahrazují Service workers. Obecně jsou také díky HTTPS bezpečnější s dostupnější možností instalace. Usnadňují také optimalizaci pro vyhledávače, se kterou mohou mít SPA do jisté míry problémy. Na druhou stranu jsou ovšem progresivní webové aplikace finančně i časově náročnější na vývoj. Oba přístupy je možné kombinovat, není to ovšem podmínkou.

Progresivní webové aplikace prakticky

K čemu slouží JSON manifest a Service workers

Vývoj progresivní webové aplikace je neoddělitelně spojen se dvěma základními pojmy, a to s JSON manifestem a skriptem Service workers. JSON manifest je prostředek k tomu, aby se PWA chovaly jako nativní aplikace. Ve své podstatě se jedná o metadata, která specifikují vzhled ikon, barev a další konfiguraci, jako je například režim zobrazení. Umožňuje například offline práci a může tak posloužit třeba při odpojení zařízení od WiFi během čtení článku, kdy manifest načte soubory z cache a zprostředkuje pohodlné dočtení textu.

JSON manifest PWA
Ukázka manifestu, zdroj: https://web.dev/add-manifest/

Service workers slouží pro samotné propojení PWA s prohlížečem. Jedná se o skript, který má za úkol synchronizaci dat na pozadí. Mimo to se ovšem stará také o aktualizaci dat, nebo o přístupnost push notifikací. Reaguje proto na požadavky uživatele, které předává dál. V množství případů tak nahrazuje původní funkce JavaScriptu.

Diagnostika PWA s Lighthouse

Tvorba webového obsahu je dnes, stejně jako vývoj aplikací a stránek, úzce spjat s nekonečnou optimalizací. Vývojáři a copywriteři musí v rámci technického SEO, či snahy o co možná největší uživatelskou přívětivost, neustále sledovat aktuální trendy spojené s optimalizací pro vyhledávače. Jinak tomu není ani v případě PWA.

Google k účelu diagnostiky progresivní webové aplikace vyvinul nástroj do prohlížeče Chrome, nazvaný Lighthouse. Lighthouse je navržen k automatizovanému testování webu a webových aplikací, je ho tedy možné využít nejen pro PWA, ale i další online obsah. Pro účely diagnostiky progresivních webových aplikací zde najdete checklist, jehož body by měly aplikace splňovat. Kontroluje se například:

  • efektivita použití technologie Service Worker,
  • efektivita umístění výzev k instalaci PWA,
  • konfigurace úvodní obrazovky,
  • zabezpečení HTTPS,
  • rychlost načítání.

service workers pwa

Nabízí se otázka, proč diagnostikovat. Google má, stejně jako by ho měli mít i tvůrci a majitelé aplikací, zájem o dosažení co možná nejlepšího uživatelského zážitku. Dobrá zkušenost obyčejně vede k tomu, že se klienti vrací a opětovně využívají nabízených služeb. V případě PWA tak pravděpodobně dojde k nainstalování aplikace do zařízení. Vzniká tedy určitá důvěra mezi poskytovatelem a klientem. Tato důvěra je ovšem typicky podmíněna kvalitou služeb, tedy rychlostí načítání a spolehlivostí. Úspěšná diagnostika tak může znamenat potenciál zaujetí zákazníka a také vyšší šance na dobré umístění ve vyhledávačích.

Propagace instalace PWA

Možnost instalace PWA je jednou z největších výhod této formy aplikací. Typicky přináší prostor pro lepší interakci s uživatelem a také jejich větší návratnost. Stejně tak instalace pozitivně ovlivňuje dobu, po kterou klienti nástroj využívají. To vše ve výsledku vede k lepším konverzním poměrům. Výzvy k instalaci jsou proto nedílnou součástí apps. Měly by ovšem být rozmístěny tak, aby uživatele neobtěžovaly a nesnižovaly jeho dojem z práce.

propagace instalace pwa
Doporučené rozmístění výzvy k instalaci PWA - zdroj: https://web.dev/promote-install/

Měly by se proto dodržovat určité standardy. Google například doporučuje, aby se odmítnutá výzva znovu zobrazila až po pozitivní zkušenosti s nástrojem, tedy například po dokončení nákupu, nebo po dočtení článku. Upozornění na instalaci je možné samozřejmě nasadit i na více stránkách, je ovšem nutné opět přemýšlet nad tím, zda se tímto krokem nesnižuje praktičnost aplikace. Nejčastější umístění výzev pak můžete sledovat na nákresech výše.

Pokud i vy uvažujete o vývoji progresivní webové aplikace, zkuste využít naší bezplatné konzultace, kde se můžeme domluvit na řešení stavěné na míru vašim potřebám. Současně můžeme pomoci také s již stávající PWA a doladit případné nedostatky.


Potřebujete poradit?