Blog

Progressive web application (PWA) je web stránka, která na dotykovém zařízení vypadá a chová se jako mobilní aplikace. Získávate tedy “dva v jednom” a k tomu několik benefitů navíc. Je to vhodné řešení pro váš projekt?

PWA je soubor moderních technologií, jejichž použití byste měli zvažovat, pokud máte mnoho návštěv z mobilních zařízení. Je to stále poměrně nový přístup k tvorbě mobilních aplikací a webových stránek. PWA je kombinace toho nejlepšího z mobilních aplikací a webových technologií. Uživatelský zážitek je srovnatelný s nativními aplikace či je v některých případech dokonce překonává. Ve světě ho velmi úspěšně používají např. Forbes, Twitter, Alibaba, Lancome, Uber, Starbucks a mnozí další.

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

Výhody PWA

Offline mód

• PWA dokáže fungovat i bez připojení na internet. Narozdíl od klasické webové stránky (ta se v případě ztráty připojení ani nenačte).
• 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ž webovka a je k nerozeznání od mobilní aplikace. Nabízí například využití navigačních prvků typických pro mobilní aplikace apod.
• Narozdíl od mobilní aplikace je však možné sdílet linky na podstránky/články např. na sociálních sítích.
• Zároveň se PWA, narozdíl od mobilní aplikace, zobrazuje ve výsledcích vyhledávání Google.

 

Možnost instalace na jeden klik

• Jelikož se web chová jako mobilní aplikace, je možné si ho nainstalovat na homescreen, kde se zobrazuje jako ikona appky (tedy webstránka je z mobilu dostupná na jeden klik, není třeba psát do vyhledávače doménu). 

 

Rychlejší načítání

• Díky využívaným technologiím se tyto weby načítají mnohem rychleji, což je extrémně klíčové, jelikož cca 50 % návštěv je z mobilních zařízení (na mobilech je často problém s rychlostí připojení – ne každý má nejnovější telefon a 4G pokrytí).

 

Push notifikace a přístup k hardwaru

• Uživatele umíme upozornit např. o akcích a slevách (zobrazuje se mu to jako nativní notifikace v mobilním zařízení). Tento typ notifikací má často vyšší konverzi než např. newsletter. Dostanete se ještě blíž k lidem.
• Dále je možné využívat prvky jako je geolokace a je možné přistupovat k hardwaru (t.j. mikrofon, kamera, gyroskop, atd.)
• Příklad využití: V registraci je nutné nahrát fotku pasového formátu na schválení. Pokud uživatel formulář vyplňuje z dotykového zařízení, umíme mu nabídnout možnost, že ji skrze fotoaparát rovnou vyfotí bez toho, aby opustil web a musel přidávat soubory ze svých složek. Toto celkově zlepšuje uživatelský zážitek.

 

Není třeba vyvíjet spravovat separátní mobilní aplikace a propojovat je s existující databází

• Většina velkých věrnostních programů (např. Orange, Vodafone) nabízí i mobilní aplikaci. Ušetříte tak desetitisíce korun za vývoj separátní mobilní aplikace, kde by bylo mimo jiné třeba řešit design, programování, spojení s databází webu atd.
• V případě změny (např. změna logiky registrace) se nemusí jedna funkcionalita programovat víckrát, jednou pro web a jednou pro appku.
• PWA funguje s jakýmkoliv typem vstupu – je stejně použitelný s myší, klávesnicí, stylusem nebo dotykem.

 

Není třeba stahovat z app storu (Google Play, Apple Store)

Jedna z největších nevýhod klasických mobilních aplikací je nízká konverze. V překladu:

1. Potřebujeme uživatele informovat o tom, že app existuje (placená reklama, promo na soc. sítích, na webu, email kampaně,…)
2. Uživatel následně musí jít do app storu na svém telefonu
3. Musí vyhledat aplikaci
4. Nainstalovat si ji
5. A potom ji musí na svém telefonu otevřít a udělat úvodní nastavení, přihlásit se apod.

• Toto je poměrně dlouhý proces a velké množství lidí ho nedokončí.
• Firmy často „vyhodí” desetitisíce korun na vývoj mobilní aplikace (zvlášť pro Android a zvlášť pro iOS) a následně ještě další obnos financí na reklamní kampaň, aby dosáhli požadovaného počtu stažení.
• S PWA tato starost zcela odpadá, protože stačí návštěva webstránky, při níž se uživatele prostřednictvím notifikace „zeptáme”, zda si přeje nainstalovat aplikaci na jeho „homescreen”. 1 klik a je hotovo.
• Konverze používání této aplikace je tak o 100-200 % vyšší, než u běžných mobilních aplikací.

Redesign vaší mobilní aplikace/online portálu apod. je jedinečná šance, kdy můžete přejít na technologii PWA. Rozhodnutí používat PWA znamená hlavně obejít omezení, která společnosti Apple a Google kladou na obsah v jejich obchodech, ale také zabezpečení lepší uživatelské zkušenosti.

 

Nevýhody PWA

• Před pár roky bylo nevýhodou, že většina popisované funkcionality nebyla dostupná pro uživatele iOS zařízení. Apple už však doplnil podporu v plné míře.
• Pokud chcete být součástí Google Play Store nebo App Store, kvůli možnostem propagace a s tím spojené publicitě, PWA pro vás nebudou výhodou.

 

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

Existuje několik technologií na vytvoření progresivní webové aplikace, založené hlavně na JavaScriptu, s různými charakteristikami. 

Detailnější informace najdete v článku od společnosti Google

https://web.dev/progressive-web-apps/

 

 

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

Je lepší zvolit si vývoj PWA, pokud:

• aplikace musí být lehko distribuovatelná do ještě širší uživatelské základny
• nízký dostupný rozpočet
• na uvedení do provozu je málo času
• správné indexování ve vyhledávači je důležité
• je vyžadována kompatibilita napříč platformami
• v krátkém čase je potřeba víc aktualizací

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

• je potřeba být viditelný v Google Play a App Store
• rychlost a citlivost jsou klíčové body úspěchu aplikace
• aplikace vyžaduje důležité použití hardwarových funkcí zařízení
• obchodní model je založený například na ceně za stáhnutí (při nákupu aplikace) a/nebo IAP (in-app purchase)
• aplikace musí být integrovaná s ostatními aplikacemi třetích stran

 

Rozdíly v procesu instalace – PWA vs. nativní aplikace

Všeobecný proces instalace nativních aplikací se řídí tímto postupem:

• Přístup k referenčnímu obchodu (App Store, Google Play)
• Vyhledání aplikace
• Kliknutí na „instalovat”
• Přijímání různých povolení
• Otevření a spuštění aplikace

V porovnání, instalace PWA zahrnuje:

• Návštěvu stránky
• Přidání na domovskou obrazovku zařízení (volitelné)
• Otevření aplikace
• Použití aplikace

 

Úspěšné použití Progressive Web Apps

V současnosti již existuje mnoho příkladů „rozlišených” PWA, které uživatelé používají na svých zařízeních.

 

Starbucks

S cílem poskytnout přístupné a uživatelsky příjemné online objednávání všem svým zákazníkům, společnost Starbucks postavila online objednávkový systém na PWA, který poskytuje podobný zážitek jako jejich existující nativní aplikace.

Jinými slovy, díky své schopnosti fungovat v režimu offline umožňuje společnost Starbucks svým zákazníkům prohlížení nabídky, přizpůsobování objednávek a přidávání položek do svých nákupních seznamů, a to všechno bez konzistentního přístupu na internet. Ve chvíli, kdy jsou online, mohou si prohlížet ceny podle polohy a zadávat objednávky nápojů a potravin.

 

Uber

Když se společnost rozšířila (a stále rozšiřuje) na nové trhy, její web Uber byl přestavěn od nuly na PWA tak, aby nabízel srovnatelný zážitek z rezervace v nativní mobilní aplikaci. Uber PWA je navržený tak, aby rezervace vozidel byly uskutečnitelné na nízkorychlostních sítích 2G.

Model PWA, postavený na konceptu zážitku podobného aplikaci, který je přístupný ve všech moderních prohlížečích, je skvělý pro lidi využívajících zařízení nižší kategorie, které nemusí být kompatibilní s nativní aplikací Uber.

Jak PWA zafungovalo? Nativní zážitek v nenáročné webové aplikaci Uber umožnil rychlý požadavek na jízdu bez ohledu na umístění, rychlost sítě a zařízení. Základ aplikace s velikostí pouze 50 kB umožňuje její načtení do 3 sekund v sítích 2G.

 

Pinterest

Se zaměřením na mezinárodní růst, Pinterest přestavěl webstránku s důrazem na mobilní zařízení od základu jako PWA. Sociální síť zjistila, že před tímto krokem pouze 1 % jejich mobilních uživatelů konvertovala na registrace, přihlášení nebo instalaci aplikace z důvodu slabého výkonu na mobilních zařízeních.

Pinterest PWA statistiky.

Když si uvědomili, že příležitost pro zlepšení konverze byla obrovská, obnovili tak mobilní web za pomoci technologie PWA, což vedlo k několika pozitivním výsledkům:

• čas strávený prohlížením se v porovnání s předcházejícím mobilním webem zvýšil o 40 %
• výnosy generované reklamou se zvýšily o 44 % 
• interakce uživatelů narostly o 60 %

 

Spotify

Vás oblíbený hudební přehrávač je momentálně postavený na technologii PWA. Pro určité neshody mezi Spotify a Apple, v otázkách provize, využila společnost aktuální příležitost začít vyvíjet PWA verzi své aplikace  – tak jako mnoho jiných velkých značek.

V porovnání s nativní aplikací Spotify je verze PWA podstatě rychlejší s vlastním jedinečným a přizpůsobivým uživatelským rozhraním. Podobně jako u mnoha jiných PWA se uživatelům zobrazí výzva na přidání produktu Spotify PWA na jejich domovskou obrazovku, čímž se produkt Spotify PWA stane dostupnějším a porovnatelnějším s ostatními jeho verzemi.

 

Forbes

Pro Forbes, globální mediální společnost se zaměřením na obchod, technologii, podnikání, vůdcovství a životní styl, je angažovanost zákazníků nevyhnutelná.

S rostoucím počtem uživatelů mobilních telefonů viděl Forbes obrovský potenciál při uvedení svého vlastního PWA v roce 2017. Díky velmi rychlým časům načítání stránky, push-notifikacím, okamžitým přechodem a lehkému designu se Forbesu podařilo zvýšit zapojení uživatelů a počet konverzí.

• Zvýšení počtu vnoření při prohlížení podstránek byl trojnásobný
• počet relací na uživatele se zvýšil o 43 %
• 6 násobný nárůst čitatelů, kteří článek dočtou do konce
• 2x zvýšená míra interakce

 

Alibaba

Alibaba.com, největší obchodní (B2B) platforma na světě, která slouží více než 200 státům a regionům, se střetla s problémem vybudovat poutavý zážitek pro mobilní web. Tato forma webu je jejich primární platformou na prohlížení nabídky v mobilu. Alibaba.com vnímala mobilní web jako platformu na přesun uživatelů, kteří aplikaci nepoužívají, do aplikace.

Mnozí však radši zůstali v prohlížeči. Uvědomili si, že vybudování efektivní mobilní webové prezentace bude nevyhnutelné. Chtěli poskytnout vynikající uživatelskou zkušenost návštěvníkům, kteří navštívili internet poprvé (v naději, že jich znovu zapojí), jako i k opakovaným uživatelům (kteří jsou loajálnější k této stránce).

Výsledkem je, že Alibaba.com vybudovala PWA, které vedlo k rychlému, efektivnímu a spolehlivému užívání mobilního webu.

• Po inovaci svých stránek na PWA zaznamenali 76% nárůst celkového počtu konverzí v prohlížečích.
• o 14 % víc měsíčních aktivních uživatelů v systému iOS, 30 % v systému Android
• 4x vyšší míra interakce při přidávání PWA na homescreen.

Společnosti jako Alibaba a Flipkart zaznamenali díky PWA výrazné zvýšení míry retence a konverze. Pravděpodobně to bude mít ještě větší výhody pro lidi v rozvojových státech, které používají sítě 2G a 3G na zařízeních s malým úložištěm v tom, že jim poskytnou rychlejší a spolehlivější přístup k webu.

 

Je budoucnost “progresivní”?

Odpověď je stejná jako vždy – záleží na vašich potřebách. Rozhodnutí o vytvoření PWA vychází z analýz a úvah, které si musíte jednou za čas udělat, 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 velký potenciál ve využití této technologie. Podpora velkých hráčů jasně ukazuje, že nejde o módní výstřelek, ale budoucnost pro tvorbu mnoha online zážitků na mobilních zařízeních.