Progressive web application (PWA) je web stránka, ktorá na dotykovom zariadení vyzerá a správa sa ako mobilná aplikácia. Získavate teda „dva v jednom” a k tomu niekoľko benefitov navyše. Je to vhodné riešenie pre váš projekt?

PWA je súbor moderných technológií, ktorých použitie by ste mali zvažovať, ak máte veľa návštev z mobilných zariadení. Je to stále pomerne nový prístup k tvorbe mobilných aplikácií a webstránok. PWA to je kombinácia toho najlepšieho z mobilných aplikácií a webových technológií. Používateľský zážitok je rovnocenný s natívnymi aplikáciami, alebo ich v niektorých prípadoch prekonáva.

Vo svete ho veľmi úspešne používajú napr. Forbes, Twitter, Alibaba, Lancome, Uber, Starbucks. 

Aké sú teda výhody a nevýhody využitia PWA technológie?

Výhody PWA

Offline mód

• PWA dokáže fungovať aj bez pripojenia na internet na rozdiel od klasickej webstránky (tá sa v prípade straty pripojenia ani len nenačíta).
• Lepší používateľský zážitok s takmer všetkými výhodami aplikácie. PWA ponúka na mobilných zariadeniach lepší zážitok ako webstránka, na nerozoznanie od mobilnej aplikácie. Napríklad ponúka využitie navigačných prvkov typických pre mobilné aplikácie a pod.

• Na rozdiel od mobilnej aplikácie je však možné zdieľať linky na podstránky/články napr. na sociálnych médiách. 
• Zároveň sa PWA, na rozdiel od mobilnej aplikácie, zobrazuje vo výsledkoch vyhľadávania v Google.

Možnosť inštalácie na jeden klik

• Keďže sa web správa ako mobilná aplikácia, je možné nainštalovať si ho na homescreen, kde sa zobrazuje ako ikona aplikácie (teda webstránka je z mobilu dostupná na jeden klik, nie je potrebné napísať do browsera doménu).

Rýchlejšie načítavanie

• Vďaka používaným technológiám sa tieto weby načítavajú omnoho rýchlejšie, čo je extrémne kľúčové, keďže cca 50 % návštev je z mobilných zariadení (na mobiloch je často problém s rýchlosťou pripojenia – nie každý má najnovší telefón a 4G pokrytie).

Push notifikácie a prístup k hardware

• Používateľa tak vieme notifikovať napr. o akciách a zľavách (zobrazuje sa mu to potom ako natívna notifikácia v mobilnom zariadení). Tento typ notifikácií má často vyššiu konverziu ako napr. newsletter. Dostanete sa ešte bližšie k ľuďom.
• Ďalej je možné využívať prvky ako geolokácia a je možné pristupovať k hardvéru (t. j. prístup k mikrofónu, kamere, gyroskopu atď., čo do budúcna ponúka množstvo využitia).
• Príklad využitia: V registrácii je potrebné nahrať fotku ID karty na schválenie. Ak formulár vypĺňa používateľ z dotykového zariadenia, vieme mu ponúknuť možnosť, že si ju cez kameru telefónu rovno odfotí a nahrá bez toho, aby opustil web a musel pridávať súbory zo svojich priečinkov. Toto celkovo zlepšuje používateľský zážitok.

Nie je potrebné vyvíjať a spravovať separátne mobilné aplikácie a napájať ich na existujúcu databázu.

• Väčšina veľkých lojalitných programov (napr. Orange) ponúka aj mobilnú aplikáciu. Ušetríte tak tisíce eur na vývoji separátnej mobilnej aplikácie, kde by bolo okrem iného potrebné riešiť grafický design, programovanie, napojenie sa na databázu webu atď. 
• V prípade zmeny (napr. zmena logiky registrácie) sa nemusí jedna funkcionalita programovať na viackrát, raz pre web a potom pre appku.
• PWA funguje s akýmkoľvek typom vstupu, je rovnako použiteľný s myšou, klávesnicou, stylusom alebo dotykom.

Nie je potrebné sťahovanie cez app store (napr. Google Play)

Jedna za najväčších nevýhod klasických mobilných aplikácií je ich nízka konverzia. V preklade:

1. Potrebujeme používateľa informovať o tom, že appka existuje (platenou reklamou, promovaním na sociálnych sieťach, na webe, v email kampaniach…)
2. Používateľ následne musí ísť do app storu na svojom telefóne.
3. Musí vyhľadat aplikáciu.
4. Nainstalovať si ju.
5. A potom ju musí na svojom telefóne otvoriť a spraviť úvodné nastavenia, prihlásiť sa a pod.

• Toto je pomerne dlhý proces a veľa ľudí ho nedokončí.
• Firmy často “vyhodia” tisíce eur na vývoj mobilnej aplikácie (zvlášť pre Android a zvlášť pre iOS) a následne ešte ďalší obnos financií na reklamnú kampaň, aby dosiahli želaný počet stiahnutí.
• Pri PWA toto úplne odpadá, pretože stačí návšteva webstránky, počas ktorej sa používateľa prostredníctvom notifikácie “spýtame”, či si želá nainštalovať aplikáciu na jeho „homescreen“. 1 klik a hotovo.
• Konverzia používania tejto aplikácie je o 100-200 % vyššia, ako pri bežných mobilných aplikáciách.

Redesign vašej mobilnej aplikácie/onlinu portálu a pod.  je jedinečná šanca, kedy môžete prejsť na technológiu PWA. Rozhodnutie používať PWA je hlavne obísť obmedzenia, ktoré spoločnosti Apple a Google kladú na obsah v ich obchodoch, ako aj zabezpečiť lepšiu používateľskú skúsenosť.

Nevýhody PWA

• Nevýhodou pred pár rokmi bolo, že väčšina popisovanej funkcionality nebola dostupná  pre používateľov iOS zariadení. Apple už však medzitým doplnil podporu v plnej miere.
• Ak chcete byť súčasťou Google Play Store alebo App Store, kvôli možnostiam propagácie a s tým spojenou publicitou, PWA pre vás nebudú výhodou.

Aké sú najpoužívanejšie technológie pre PWA?

Existuje niekoľko technológií na vytvorenie progresívnej webovej aplikácie, založenej hlavne na JavaScripte, s rôznymi charakteristikami. 

Detailnejšie informácie nájdete v článku od spoločnosti Google https://web.dev/progressive-web-apps/

Ako si vybrať medzi PWA alebo natívnym riešením? 

Je lepšie zvoliť si vývoj PWA, keď:

• aplikácia musí byť ľahko distribuovaná do ešte širšej používateľskej základne,
• dostupný rozpočet nie je vysoký,
• na uvedenie do prevádzky je málo času,
• správne indexovanie vo vyhľadávačoch je dôležité,
• vyžaduje sa kompatibilita medzi platformami,
• v krátkom čase je potrebných viac aktualizácií.

Naopak, je lepšie vyvinúť natívnu aplikáciu, keď:

• je potrebné byť viditeľný v Google Play a App Store,
• rýchlosť a citlivosť sú kľúčové body úspechu aplikácie,
• aplikácia vyžaduje dôležité použitie hardvérových funkcií zariadenia,
• obchodný model je založený napríklad na cene za stiahnutie (pri nákupe aplikácie) a/alebo IAP (in-app purchase),
• aplikácia musí byť integrovaná s ostatnými aplikáciami tretích strán.

Rozdiely v procese inštalácie – PWA verzus natívna aplikácia

Všeobecný proces inštalácie natívnych aplikácií sa riadi týmto postupom:

• Prístup k referenčnému obchodu (App Store alebo Google Play).
• Vyhľadanie aplikácie.
• Kliknutie na „Inštalovať“.
• Prijímanie rôznych povolení.
• Otvorenie a spustenie aplikácie.

V porovnaní, inštalácia PWA zahŕňa:

• Návšteva stránky.
• Pridanie na domovskú obrazovku zariadenia (voliteľné).
• Otvorenie aplikácie.
• Použitie aplikácie.

Úspešné použitia Progressive Web Apps

Existuje už veľa príkladov „rozlíšených“ PWA, ktoré používatelia používajú na svojich zariadeniach.

Starbucks

S cieľom poskytnúť prístupné a používateľsky príjemné online objednávanie všetkým svojim zákazníkom spoločnosť Starbucks postavila online objednávkový systém postavený na PWA, ktorý poskytuje podobný zážitok ako ich existujúca natívna aplikácia. 

Inými slovami, vďaka svojej schopnosti fungovať v režime offline umožňuje spoločnosť Starbucks svojim zákazníkom prezeranie ponuky, prispôsobovanie objednávok a pridávanie položiek do svojich nákupných zoznamov a to všetko bez konzistentného prístupu na internet. Keď sú online, môžu si prezerať ceny podľa polohy a zadávať objednávky potravín a nápojov.

Uber

Keď sa spoločnosť rozširuje na nové trhy, jej web Uber bol prestavaný od nuly na PWA, aby ponúkal porovnateľný zážitok z rezervácie v natívnej mobilnej aplikácii. Uber PWA je navrhnutý tak, aby rezervácie vozidiel boli uskutočniteľné na nízkorýchlostných sieťach 2G.

Model PWA, postavený na koncepte zážitku podobného aplikácii, ktorý je prístupný vo všetkých moderných prehliadačoch, je skvelý pre ľudí browsujúcich na zariadeniach nižšej kategórie, ktoré nemusia byť kompatibilné s natívnou aplikáciou Uber.

Ako PWA zafungovalo? Natívny zážitok vo veľmi ľahkej webovej aplikácii Uber umožnil rýchlu požiadavku na jazdu bez ohľadu na umiestnenie, rýchlosť siete a zariadenie. Základ aplikácie s veľkosťou iba 50 kB umožňuje jej načítanie do 3 sekúnd v sieťach 2G.

Pinterest

So zameraním na medzinárodný rast, Pinterest prestaval webstránku s dôrazom na mobilné zobrazenia od základu ako PWA. Sociálna sieť zistila, že pred týmto krokom iba 1 % svojich mobilných používateľov konvertovala na registrácie, prihlásenia alebo inštalácie aplikácií z dôvodu slabého výkonu na mobilných zariadeniach.

Pinterest PWA štatistiky

Keď si uvedomili, že príležitosť na zlepšenie konverzie bola obrovská, obnovili tak mobilný web pomocou technológie PWA, čo viedlo k niekoľkým pozitívnym výsledkom: 

• čas strávený prehliadaním sa v porovnaní s predchádzajúcim mobilným webom zvýšil o 40 %, 
• výnosy generované reklamou sa zvýšili o 44 %, 
• a interakcia používateľov vzrástla o 60 %.

Spotify

Váš obľúbený hudobný prehrávač je teraz postavený nad technológiou PWA. Pre určité nezhody medzi spoločnosťou Spotify a spoločnosťou Apple, pokiaľ ide o províziu, našla spoločnosť Spotify aktuálnu príležitosť začať vyvíjať verziu svojej aplikácie PWA – tak ako mnoho iných veľkých značiek. 

V porovnaní s natívnou Spotify aplikáciou je verzia PWA podstatne rýchlejšia s vlastným jedinečným a prispôsobivým používateľským rozhraním. Podobne ako pri mnohých iných PWA sa používateľom zobrazí výzva na pridanie produktu Spotify PWA na ich domovskú obrazovku, čím sa produkt Spotify PWA stane dostupnejším a porovnateľnejším s ostatnými jeho verziami.

Forbes

Pre Forbes, globálnu mediálnu spoločnosť so zameraním na obchod, technológiu, podnikanie, vodcovstvo a životný štýl, je angažovanosť zákazníkov nevyhnutná.

S rastúcim počtom používateľov mobilných telefónov videl Forbes obrovský potenciál pri uvedení svojho vlastného PWA v roku 2017. Vďaka veľmi rýchlym časom načítania stránky, push-oznámeniam, okamžitým prechodom a ľahkému dizajnu sa Forbes podarilo zvýšiť zapojenie používateľov a zvýšiť počet konverzií.

• Zvýšenie počtu vnorení pri prezeraní podstránok bol trojnásobný,
• počet relácií na používateľa sa zvýšil o 43 %,
• 6 násobný nárast čitateľov, ktorý článok dočítajú do konca,
• 2x zvýšená miera interakcie.

Alibaba

Alibaba.com, najväčšia obchodná (B2B) platforma na svete, ktorá slúži viac ako 200 krajinám a regiónom, sa stretla s ťažkosťou vybudovať pútavý zážitok pre mobilný web. Táto forma webu je ich primárnou platformou na prezeranie ponuky v mobile. Alibaba.com vnímali mobilný web ako platformu na presun používateľov, ktorí aplikáciu nepoužívajú, do aplikácie.

Ale mnohí radšej zostali v prehliadači. Uvedomili si, že vybudovanie efektívnej mobilnej webovej prezentácie bude nevyhnutné. Chceli poskytnúť vynikajúcu používateľskú skúsenosť tak návštevníkom, ktorí prvýkrát navštívili internet (v nádeji, že ich znova zapoja), ako aj opakovaným návštevníkom (ktorí sú lojálnejší k tejto stránke).

Výsledkom je, že Alibaba.com vybudovali PWA, ktoré viedli k rýchlemu, efektívnemu a spoľahlivému používaniu mobilného webu.

• Po inovácii svojich stránok na progresívnu webovú aplikáciu (PWA) zaznamenali 76 % nárast celkového počtu konverzií v prehliadačoch.
• 14 % viac mesačných aktívnych používateľov v systéme iOS; 30 % v systéme Android.
• 4x vyššia miera interakcie pri pridávaní PWA na homescreen.

Spoločnosti ako Alibaba a Flipkart zaznamenali vďaka PWA výrazné zvýšenie miery retencie a konverzie. Pravdepodobne to bude mať ešte väčšie výhody pre ľudí v rozvojových krajinách, ktorí používajú siete 2G a 3G na zariadeniach s malým úložiskom v tom, že im poskytnú rýchlejší a spoľahlivejší prístup k webu.

Je budúcnosť „progresívna“?

Odpoveď je ako vždy – závisí od vašich potrieb. Rozhodnutie o vytvorení PWA vychádza z analýzy a úvah, ktoré sa musia z času na čas urobiť, od projektu k projektu, od používateľa k používateľovi. 

No zjednodušenie vývoja je požiadavkou mnohých projektov, a preto vidíme veľký potenciál vo využití tejto technológie. Podpora veľkých hráčov jasne ukazuje, že nejde o módny výstrelok, ale budúcnosť pre tvorbu mnohých online zážitkov na mobilných zariadeniach.

Tomáš Vatrt

Business Development Manager