Co jsou progresivní webové aplikace (PWA) a jaké mají výhody

Progresivní webové aplikace (PWA) představují moderní, inovativní přístup k vývoji webových aplikací. Tyto aplikace kombinují výhody webových stránek s možnostmi mobilních aplikací, což snižuje náklady na jejich tvorbu a zároveň zlepšuje uživatelský zážitek. V našem článku vám podrobně vysvětlíme, co jsou PWA a jaké konkrétní výhody mohou přinést do vašeho podnikání.

Co jsou progresivní webové aplikace (PWA)?

PWA (Progressive Web Apps) jsou webové aplikace, které uživatelům nabízejí podobné možnosti jako nativní mobilní aplikace. Podporují zasílání push notifikací, mají přístup k hardwaru zařízení a umožňují pracovat offline, stále je ovšem zprostředkovává webový prohlížeč.

Jaký je rozdíl mezi webovou aplikací a PWA?

Progresivní webové aplikace jsou typické svým "app-like" vzhledem, jehož prostřednictvím reagují na masový nárůst popularity dotykových zařízení a nativních mobilních aplikací.

Z vlastností klasických webových aplikací převzaly responzivitu, tedy schopnost adaptovat obsah na jakoukoli úhlopříčku – díky tomu je můžete pohodlně používat na zařízeních nejrůznějších velikostí.

Druhým bodem, který mají webové aplikace i progresivní aplikace společné, je multiplatformnost. V rámci tvorby progresivní webové aplikace tedy vyvíjíte pouze jedno řešení, avšak pro všechny typy zařízení – počítače, notebooky, smartphony, tablety.

Jádro, kterým se PWA od webových aplikací liší, tvoří dvě technologie:

• Service Workers – skripty, které umožňují pracovat s mezipamětí zařízení,
• JSON manifest – soubor, který webovým aplikacím přidává nativní funkcionalitu.

Jaké výhody přináší vývoj progresivní webové aplikace (PWA)?

Právě Service Workers a JSON manifest pak utvářejí hlavní výhody, díky kterým tvorba progresivních webových aplikací nabírá na stále větší popularitě:

• rychlost načítání a doba odezvy – PWA jsou mnohem rychlejší než webové aplikace a svižností odezvy se přibližují nativním mobilním aplikacím,
• práce offline – cachování, které zajišťuje rychlejší načítání stránek, přináší také výhodu v podobě možnosti s aplikací pracovat bez připojení k internetu,
• push notifikace – PWA stejně jako nativní mobilní aplikace podporují zasílání push notifikací, což využijete zejména v marketingových aplikacích,
• instalace aplikace do zařízení – ikonu progresivní webové aplikace si můžete přidat na plochu zařízení, nemusíte k ní tedy přistupovat pouze přes webový prohlížeč, což navyšuje uživatelskou zkušenost a vede k častějšímu používání apky,
• přístup k hardwaru zařízení – PWA mají částečný přístup k hardwaru smartphonu či tabletu, v aplikaci tak můžete využívat např. GPS nebo fotoaparát,
• 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.

Nativní mobilní aplikace vs. progresivní webové aplikace

Vzhledem k tomu, že progresivní webové aplikace stojí na pomezí nativních mobilních aplikací a webových aplikací, je vhodné přidat také srovnání PWA právě s mobilními aplikacemi. Vývoj progresivních webových aplikací s sebou oproti nativnímu vývoji přináší následující výhody:

• nižší náklady na vývoj – PWA jsou multiplatformní, platíte tedy pouze za jeden vývoj aplikace pro všechny operační systémy,
• rychlost vývoje – vývoj webových aplikací je obecně méně náročný než vývoj mobilní apky, díky PWA tak budete moct aplikaci dříve nasadit mezi uživatele,
• nižší náklady na údržbu – díky tomu, že jsou progresivní aplikace multiplatformní, udržujete pouze jednu aplikaci,
• dohledatelnost ve vyhledávačích – pro PWA platí stejné SEO techniky jako pro jiné online projekty, můžete se tedy umístit na předních pozicích vyhledávačů a propagovat váš produkt.

Nativní mobilní aplikace si však samozřejmě svůj monopol nedrží bezdůvodně. V rámci srovnání je důležité zmínit také body, kde tato forma aplikací stále vyčnívá nad konkurencí:

• plnohodnotný přístup k hardwaru – ačkoli PWA mají přístup k hardwaru zařízení, doposud nelze jejich prostřednictvím realizovat veškerou funkcionalitu, která využívání hardwaru nutně potřebuje pro svou funkci,
• nativní vzhled – nativní mobilní aplikace (zejména v případě iOS) svým vzhledem plnohodnotně zapadají do designu operačního systému, čímž zvyšují uživatelský zážitek,
• částečná nekompatibilita se Safari – v případě iPhonů a iPadů nastává problém s instalací aplikace na domovskou plochu zařízení,
• spotřeba baterie – progresivní webové aplikace nelze optimalizovat stejnou měrou jako nativní mobilní aplikace, proto typicky více spotřebovávají baterii.

Proč zvolit vývoj PWA v podnikání?

Výhody, nevýhody i samotná charakteristika progresivních webových aplikací, uvedla mnoho důvodů, proč je dobré zvolit právě vývoj progresivních webových aplikací. Neexistuje ovšem lepší argument, než statistiky firem, které již PWA nasadily.

Patří mezi ně například Twitter, který formou PWA vydal svou verzi aplikace Twitter Lite. Po změně technologie Twitter zaznamenal o 75 % více tweetů a do značné míry snížil míru okamžitého opuštění stránky – konkrétně o 20 %.

Společnost AliExpress přechodem na progresivní webovou aplikaci dosáhla zvýšení konverzního poměru o 104 % a 74% nárůstu nových uživatelů. Zvýšení konverzního poměru pak dosáhla též společnost Trivago, a sice o 97 %.

Forbes přešel na PWA a zaznamenal v aplikaci zvýšení počtu zobrazení stránky o 43 %.

Obecně lze přínosy nasazení PWA nebo přechod na tuto formu webových aplikací shnout následovně:

• vyšší zapojení uživatelů – díky rychlosti načítání a dobré uživatelské zkušenosti dochází k vyšší míře zapojení uživatelů, tedy prodloužení doby strávené na stránce a snížení míry okamžitého opuštění stránky,
• lepší konverzní poměr – rychlá odezva v kombinaci s přívětivým uživatelským rozhraním vede k častějšímu dokončení nákupního procesu nebo dosažení jiného cíle,
• větší dosah – PWA je možné optimalizovat podle běžných zásad SEO, díky tomu se zvyšuje počet aktivních uživatelů.

PWA vs. SPA

Single-page aplikace jsou další z forem webových aplikací, která podobně jako PWA nabízí svižnou reakci na uživatelské pokyny a pyšní se rychlým načítáním stránek – respektive stránky.

Jedná se totiž o aplikaci, která veškerý obsah shraňuje na jednom místě – proto jednostránková aplikace. Svižnost těchto webových aplikací výchází z dynamické aktualizace, která zajišťuje, že se vždy změní jen část stránky, se kterou je uživatel v interakci.

Díky tomu s nimi můžete manipulovat i bez připojení k internetu. Na rozdíl od PWA jsou ovšem single-page aplikace svou funkcionalitou stále limitovány prohlížečem. Nemají tedy přístup k hardwaru zařízení, neumožňují zasílat push notifikace apod.

Single-page aplikace je také složitější optimalizovat v návaznosti na SEO techniky. V praxi se tak oba přístupy k vývoji webových aplikací kombinují tak, aby se využily výhody obou řešení.

Obecně lze říci, že jsou SPA vhodné pro digitální produkty, kde je třeba zajistit plynulou interakci s komentáři a příspěvky (například sociální sítě) nebo rychlé načítání stránek (např. blogy a zpravodajské weby). PWA jsou vhodnější pro komplexnější aplikace vyžadující podporu push notifikací nebo offline přístup (např. finanční aplikace, aplikace pro objednávání jidel apod.).

Konkrétní volba vhodné formy webové aplikace ovšem vždy záleží na specifikách a robustnosti daného webového projektu.

Vývoj progresivních webových aplikací prakticky

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

Service Workers se využívají k propojení PWA s prohlížečem. Jedná se o skript, který má za úkol synchronizovat data 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 spjata 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. 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 Workers,
• efektivita umístění výzev k instalaci PWA,
• konfigurace úvodní obrazovky,
• zabezpečení HTTPS,
• rychlost načítání.

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.

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í progresivních aplikací. Měly by ovšem být rozmístěny tak, aby uživatele neobtěžovaly a nesnižovaly jeho dojem z práce.

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ém 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.