Progressive Web Application (PWA) je webová stránka, která na dotykovém zařízení vypadá a chová se jako mobilní aplikace. Získáte tak dva v jednom a několik dalších výhod. Je to správné řešení pro váš projekt?

PWA je soubor moderních technologií, jejichž použití byste měli zvážit, pokud máte velký provoz z mobilních zařízení. Je to stále relativně nový přístup k vytváření mobilních aplikací a webových stránek. PWA kombinují to nejlepší z mobilních aplikací a webových technologií. Uživatelský zážitek se vyrovná nativním aplikacím, nebo je v některých případech předčí.

Po celém světě jej velmi úspěšně používají např. společnosti Forbes, Twitter, Alibaba, Lancome, Uber nebo Starbucks.

Jaké jsou tedy výhody a nevýhody používání technologie PWA?

Výhody PWA

Offline režim

• PWA může fungovat i bez připojení k internetu, na rozdíl od klasických webových stránek (které se při výpadku připojení nenačtou).
• Lepší uživatelský zážitek s téměř všemi výhodami aplikace. PWA nabízí na mobilních zařízeních lepší zážitek než webová stránka, k nerozeznání od mobilní aplikace. Nabízí například použití navigačních prvků typických pro mobilní aplikace atd.
• Na rozdíl od mobilní aplikace je však možné sdílet odkazy na podstránky/články např. na sociálních sítích.
• Zároveň se PWA na rozdíl od mobilní aplikace zobrazuje ve výsledcích vyhledávání Google.

Instalace jedním kliknutím

• Protože se webová stránka chová jako mobilní aplikace, je možné ji nainstalovat na domovskou obrazovku, kde se zobrazí jako ikona aplikace (tj. webová stránka je z mobilu přístupná jedním kliknutím, není třeba zadávat doménu do prohlížeče).

Rychlejší načítání

• Díky použitým technologiím se tyto stránky načítají mnohem rychleji, což je nesmírně klíčové, protože přibližně 50 % návštěv pochází z mobilních zařízení (u mobilů je často problémem rychlost připojení – ne každý má nejnovější telefon a pokrytí 4G).

Push notifikace a přístup k hardwaru

• Můžeme uživatele upozorňovat např. na akce a slevy (to se pak zobrazí jako nativní oznámení na mobilním zařízení). Tento typ oznámení má často vyšší konverzní poměr než např. newsletter. Dostanete se tak ještě blíže k lidem.
• Dále lze využít funkce, jako je geolokace, a přístup k hardwaru (tj. přístup k mikrofonu, fotoaparátu, gyroskopu atd. nabízí do budoucna mnoho využití).
• Příklad použití: Při registraci je třeba nahrát fotografii průkazu totožnosti ke schválení. Pokud uživatel vyplňuje formulář z dotykového zařízení, můžeme mu nabídnout možnost pořídit fotografii a nahrát ji přímo prostřednictvím fotoaparátu telefonu, aniž by musel opustit web a přidávat soubory ze svých složek. Tím se zlepší celkový uživatelský zážitek.

Není třeba vyvíjet a spravovat samostatné mobilní aplikace a propojovat je se stávající databází.

• Většina velkých věrnostních programů (např. Orange) nabízí také mobilní aplikaci. Ušetříte tak tisíce eur za vývoj samostatné mobilní aplikace, kde byste museli řešit mimo jiné grafický návrh, programování, propojení s databází webu atd.
• V případě změny (např. změny logiky registrace) není nutné jednu funkcionalitu programovat vícekrát, jednou pro web a pak pro aplikaci.
• PWA funguje s jakýmkoli typem vstupu, je stejně dobře použitelný s myší, klávesnicí, stylusem nebo dotykem.

Není nutné stahovat z obchodu s aplikacemi (např. Google Play).

Jednou z největších nevýhod tradičních mobilních aplikací je jejich nízká míra konverze. V překladu:

1. Je třeba uživatele informovat, že aplikace existuje (prostřednictvím placené reklamy, propagace na sociálních sítích, na webu, v e-mailových kampaních…).
2. Uživatel pak musí přejít do obchodu s aplikacemi ve svém telefonu.
3. Musí aplikaci vyhledat.
4. Nainstalovat ji.
5. A pak ji musí na svém telefonu otevřít a provést počáteční nastavení, přihlásit se atd.

• To je poměrně dlouhý proces a spousta lidí ho nedokončí.
• Firmy často „vyhodí“ tisíce eur za vývoj mobilní aplikace (zejména pro Android a zejména pro iOS) a pak utratí ještě více peněz za reklamní kampaň, aby dosáhly požadovaného počtu stažení.
• U PWA toto zcela odpadá, protože stačí návštěva webové stránky, během níž je uživatel „dotázán“ prostřednictvím oznámení, zda si přeje aplikaci nainstalovat na svou „domovskou obrazovku“. 1 kliknutí a je to.
• Konverzní poměr při použití této aplikace je o 100-200 % vyšší než u běžných mobilních aplikací.

Redesign vaší mobilní aplikace/online portálu atd. je jedinečnou příležitostí, kdy můžete přejít na technologii PWA. Rozhodnutí použít PWA je hlavně proto, abyste obešli omezení, která společnosti Apple a Google kladou na obsah ve svých obchodech, a také proto, abyste poskytli lepší uživatelský zážitek.

Nevýhody PWA

• Nevýhodou před několika lety bylo, že většina popsaných funkcí nebyla dostupná uživatelům zařízení se systémem iOS. Společnost Apple však od té doby přidala plnou podporu.
• Pokud chcete být součástí obchodu Google Play nebo App Store, kvůli možnostem propagace a s tím spojené publicitě pro vás PWA nebudou výhodou.

Jaké jsou nejpoužívanější technologie pro PWA?

Pro vytvoření progresivní webové aplikace existuje několik technologií, založených především na JavaScriptu, s různými vlastnostmi.

Podrobnější informace naleznete v tomto článku od společnosti Google.

Jak si vybrat mezi PWA a nativním řešením?

Vývoj PWA je lepší zvolit, když:

• je třeba aplikaci snadno distribuovat ještě širší uživatelské základně,
• dostupný rozpočet není vysoký,
• je málo času na uvedení do provozu,
• je důležitá správná indexace ve vyhledávačích,
• je vyžadována kompatibilita napříč platformami,
• v krátkém čase je třeba provést více aktualizací.

Naopak nativní aplikaci je lepší vyvinout, když:

• je třeba, aby byla viditelná v Google Play a App Store,
• rychlost a odezva jsou klíčové pro úspěch aplikace,
• aplikace vyžaduje důležité využití hardwarových funkcí zařízení,
• obchodní model je založen například na ceně za stažení (za nákup aplikace) a/nebo IAP (nákup v aplikaci),
• aplikace musí být integrována s jinými aplikacemi třetích stran.

Rozdíly v procesu instalace – PWA versus nativní aplikace

Obecný proces instalace nativních aplikací se řídí tímto postupem:

• Přístup k referenčnímu obchodu (App Store nebo Google Play).
• Vyhledejte aplikaci.
• Klikněte na tlačítko „Instalovat“.
• Získání různých oprávnění.
• Otevření a spuštění aplikace.

Oproti tomu instalace PWA zahrnuje:

• Navštívení webu.
• Přidání na domovskou obrazovku zařízení (volitelné).
• Otevření aplikace.
• Použití aplikace.

Úspěšné využití progresivních webových aplikací

Existuje již mnoho příkladů „odlišných“ PWA, které uživatelé používají na svých zařízeních.

Starbucks

Aby společnost Starbucks poskytla všem svým zákazníkům přístupný a uživatelsky přívětivý zážitek z online objednávek, vytvořila online objednávkový systém postavený na PWA, který poskytuje podobný zážitek jako jejich stávající nativní aplikace.

Jinými slovy, díky schopnosti fungovat offline umožňuje společnost Starbucks svým zákazníkům procházet menu, přizpůsobovat objednávky a přidávat položky do nákupních seznamů, a to vše bez stálého přístupu k internetu. Jakmile jsou online, mohou si prohlédnout ceny podle místa a objednávat jídlo a nápoje.

Uber

Vzhledem k tomu, že společnost expanduje na nové trhy, byly její webové stránky Uberu od základu přebudovány na PWA, aby nabízely srovnatelný zážitek z rezervací v nativní mobilní aplikaci. Aplikace Uber PWA je navržena tak, aby bylo možné provádět rezervace vozidel i na nízkorychlostních sítích 2G.

Model PWA je postaven na konceptu zážitku podobného aplikaci, který je přístupný ve všech moderních prohlížečích, a je tak skvělý pro lidi, kteří si prohlížejí stránky na zařízeních nižší třídy, jež nemusí být kompatibilní s nativní aplikací Uber.

Jak PWA funguje? Nativní prostředí ve velmi odlehčené webové aplikaci Uberu umožňovalo rychlé vyžádání jízdy bez ohledu na polohu, rychlost sítě a zařízení. Základní velikost aplikace pouhých 50 kB umožňuje její načtení za méně než 3 sekundy v sítích 2G.

Pinterest

Se zaměřením na mezinárodní růst společnost Pinterest od základu přebudovala webové stránky s důrazem na mobilní zobrazení jako PWA. Před tímto krokem sociální síť zjistila, že pouze 1 % jejích mobilních uživatelů konvertuje k registraci, přihlášení nebo instalaci aplikace kvůli špatnému výkonu na mobilních zařízeních.

Statistiky Pinterest PWA

Když si uvědomili, že příležitost ke zlepšení konverze je obrovská, znovu spustili mobilní web pomocí technologie PWA, což vedlo k několika pozitivním výsledkům:

• Čas strávený prohlížením se oproti předchozímu mobilnímu webu zvýšil o 40 %,
• příjmy z reklamy se zvýšily o 44 %,
• a interakce uživatelů se zvýšila o 60 %.

Spotify

Váš oblíbený hudební přehrávač je nyní postaven na technologii PWA. Vzhledem k některým neshodám mezi společnostmi Spotify a Apple ohledně provizí našla společnost Spotify včas příležitost začít vyvíjet verzi své aplikace PWA – stejně jako mnoho dalších významných značek.

Oproti nativní aplikaci Spotify je verze PWA výrazně rychlejší a má vlastní jedinečné a přizpůsobitelné uživatelské rozhraní. Stejně jako u mnoha jiných verzí PWA budou uživatelé vyzváni, aby si produkt Spotify PWA přidali na domovskou obrazovku, čímž se produkt Spotify PWA stane přístupnějším a srovnatelným s ostatními verzemi.

Forbes

Pro Forbes, globální mediální společnost zaměřenou na obchod, technologie, podnikání, vedení a životní styl, je zapojení zákazníků zásadní.

S rostoucím počtem uživatelů mobilních telefonů viděl Forbes obrovský potenciál ve spuštění vlastního PWA v roce 2017. Díky velmi rychlému načítání stránek, push notifikacím, okamžitým přechodům a odlehčenému designu dokázal Forbes zvýšit zapojení uživatelů a zvýšit konverze.

• Nárůst počtu vložení při prohlížení podstránek byl trojnásobný,
• počet relací na uživatele se zvýšil o 43 %,
• šestinásobný nárůst počtu čtenářů, kteří dokončili článek,
• 2x se zvýšila míra interakce.

Alibaba

Alibaba.com, největší světová platforma B2B (business-to-business), která obsluhuje více než 200 zemí a regionů, se potýkala s problémy při vytváření poutavého prostředí pro mobilní web. Tato forma webu je jejich primární platformou pro prohlížení nabídek na mobilu. Alibaba.com vnímala mobilní web jako platformu pro přesun uživatelů, kteří nepoužívají aplikaci, do aplikace.

Mnozí však raději zůstávali v prohlížeči. Uvědomili si, že vybudování efektivní mobilní webové prezentace bude nezbytné. Chtěli poskytnout vynikající uživatelský zážitek jak pro návštěvníky, kteří web navštíví poprvé (doufali, že je znovu zaujmou), tak pro opakované návštěvníky (kteří jsou webu věrnější).

Výsledkem bylo, že Alibaba.com vytvořila PWA, které vedlo k rychlému, efektivnímu a spolehlivému používání mobilního webu.

• Po upgradu svých stránek na progresivní webové aplikace (PWA) zaznamenali 76% nárůst celkového počtu konverzí napříč prohlížeči.
• O 14 % více měsíčně aktivních uživatelů na iOS; o 30 % na Androidu.
• Čtyřnásobně vyšší míru interakce po přidání PWA na domovskou obrazovku.

Společnosti jako Alibaba a Flipkart zaznamenaly díky PWA výrazné zvýšení míry retence a konverzí. Je pravděpodobné, že pro lidi v rozvojových zemích, kteří používají sítě 2G a 3G na zařízeních s malým úložištěm, to bude mít ještě větší přínos, protože jim to umožní rychlejší a spolehlivější přístup k webu.

Je budoucnost „progresivní“?

Odpověď je jako vždy – záleží na vašich potřebách. Rozhodnutí o vytvoření PWA je založeno na analýze a úvahách, které je třeba provádět čas od času, od projektu k projektu, od uživatele k uživateli.

Zjednodušení vývoje je však požadavkem mnoha projektů, a proto vidíme ve využití této technologie velký potenciál. Podpora velkých hráčů jasně ukazuje, že se nejedná o módní výstřelek, ale o budoucnost pro vytváření mnoha online zážitků na mobilních zařízeních.

Tomáš Vatrt

Business Development Manager

Kontaktujte nás