ČO JE TO VLASTNE PWA?

Progressive web application (PWA) je webová 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 webových stránok. PWA je kombinácia toho najlepšieho z mobilných aplikácií a webových technológií. Užívateľský zážitok je porovnateľný s natívnymi aplikáciami alebo ich v niektorých prípadoch dokonca prekonáva. Vo svete ho veľmi úspešne používajú napr. Forbes, Twitter, Alibaba, Lancome, Uber, Starbucks a mnohí ďalší.

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

VÝHODY PWA

Offline mód

• PWA dokáže fungovať aj bez pripojenia na internet. Na rozdiel od klasického webového sídla (ktoré sa v prípade straty pripojenia ani nepripojí).
• Lepší užívateľský zážitok s takmer všetkými výhodami aplikácie. PWA ponúka na mobilných zariadeniach lepší zážitok než webová stránka a je k nerozoznaniu od mobilnej aplikácie. Ponúka napríklad využitie navigačných prvkov typických pre mobilné aplikácie atď.
• Na rozdiel od mobilnej aplikácie je však možné zdieľať odkazy na podstránky/články napr. na sociálnych sieťach.
• Zároveň sa PWA, na rozdiel od mobilnej aplikácie, zobrazuje vo výsledkoch vyhľadávania Google.

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

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

Rýchlejšie načítanie

Vďaka využívaným technológiám sa tieto weby načítajú oveľa rýchlejšie, čo je extrémne kľúčové, keďže približne 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 hardvéru

• Používateľov vieme upozorniť napr. o akciách a zľavách (zobrazuje sa im to ako natívna notifikácia v mobilnom zariadení). Tento typ notifikácií má často vyššiu konverziu než napr. newsletter. Dostanete sa ešte bližšie k ľuďom.
• Ďalej je možné využívať prvky ako je geolokácia a je možné pristupovať k hardvéru (t.j. mikrofón, kamera, gyroskop, atď.)
• Príklad využitia: Pri registrácii je nutné nahrať fotku pasového formátu na schválenie. Ak užívateľ formulár vyplňuje z dotykového zariadenia, vieme mu ponúknuť možnosť, že ju cez fotoaparát rovno vyfotí bez toho, aby opustil web a musel pridávať súbory zo svojich priečinkov. Toto celkovo zlepšuje užívateľský zážitok.

Nie je potrebné vyvíjať a spravovať samostatnú mobilnú aplikáciu a pripájať ju k existujúcej databáze

• Väčšina veľkých vernostných programov (napr. Orange, Vodafone) ponúka aj mobilnú aplikáciu. Ušetríte tak desaťtisíce korún za vývoj samostatnej mobilnej aplikácie, kde by bolo potrebné riešiť dizajn, programovanie, pripojenie k databáze webu atď.
• V prípade zmeny (napr. zmena logiky registrácie) sa nemusí jedna funkcionalita programovať viackrát, raz pre web a raz pre aplikáciu.
• PWA funguje s akýmkoľvek typom vstupu – je rovnako použiteľný s myšou, klávesnicou, štýlom alebo dotykom.

Nie je potrebné sťahovať z app storu (Google Play, Apple Store)

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

1. Potrebujeme používateľov informovať o tom, že aplikácia existuje (platená reklama, promo na soc. sieťach, na webe, emailové kampane,…)
2. Používateľ následne musí ísť do app storu na svojom telefóne
3. Musí vyhľadať aplikáciu
4. Nainštalovať si ju
5. A potom ju musí na svojom telefóne otvoriť a urobiť úvodné nastavenie, prihlásiť sa atď.

• Toto je pomerne dlhý proces a veľké množstvo ľudí ho nedokončí.
• Firmy často „vyhadzujú” desaťtisíce korún na vývoj mobilnej aplikácie (štandardne pre Android a iOS) a následne ešte ďalšiu sumu peňazí na reklamnú kampaň, aby dosiahli požadovaný počet stiahnutí.
• S PWA táto starosť úplne odpadá, pretože stačí návšteva webovej stránky, pri ktorej sa používateľa prostredníctvom notifikácie „spýtame”, či si želá nainštalovať aplikáciu na jeho „homescreen”. 1 klik a je hotovo.
• Konverzia používania tejto aplikácie je tak o 100-200 % vyššia, než u bežných mobilných aplikácií.

Redesign vašej mobilnej aplikácie/online portálu atď. je jedinečná šanca, kedy môžete prejsť na technológiu PWA. Rozhodnutie používať PWA znamená hlavne obísť obmedzenia, ktoré spoločnosti Apple a Google kladú na obsah v ich obchodoch, ale aj zabezpečenie lepšej užívateľskej skúsenosti.

NEVÝHODY PWA

• Pred pár rokmi bolo nevýhodou, že väčšina popisovanej funkcionality nebola dostupná pre užívateľov iOS zariadení. Apple už však doplnil podporu v plnej miere.
• Pokiaľ chcete byť súčasťou Google Play Store alebo App Store, kvôli možnostiam propagácie a s tým spojenej publicite, 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žené 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ÍVNÝM RIEŠENÍM?

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

• aplikácia musí byť ľahko distribuovateľná do ešte širšej užívateľskej základne
• nízky dostupný rozpočet
• na uvedenie do prevádzky je málo času
• správne indexovanie vo vyhľadávači je dôležité
• je vyžadovaná kompatibilita naprieč platformami
• v krátkom čase je potrebné viac aktualizácií

Naopak, natívnu aplikáciu je lepšie vyvinúť 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/nebo 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 VS. 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, 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števu stránky
• Pridanie na domovskú obrazovku zariadenia (voliteľné)
• Otvorenie aplikácie
• Použitie aplikácie

ÚSPEŠNÉ VYUŽITIE PROGRESSIVE WEB APPS

V súčasnosti už existuje mnoho príkladov „rozdielnych” PWA, ktoré používatelia využívajú na svojich zariadeniach.

Starbucks

S cieľom poskytnúť prístupné a užívateľsky príjemné online objednávanie všetkým svojim zákazníkom, spoločnosť Starbucks postavila online objednávkový systém 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. V momente, keď sú online, môžu si prezerať ceny podľa polohy a zadávať objednávky nápojov a jedál.

Uber

Keď sa spoločnosť rozšírila (a stále sa rozširuje) na nové trhy, jej web Uber bol prebudovaný od nuly na PWA tak, 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í využívajúcich zariadenia nižšej kategórie, ktoré nemusia byť kompatibilné s natívnou aplikáciou Uber.

Ako PWA zafungovalo? Natívny zážitok v nenáročnej 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 len 50 kB umožňuje jej načítanie do 3 sekúnd v sieťach 2G.

Pinterest

Sústrediac sa na medzinárodný rast, Pinterest prebudoval webovú stránku s dôrazom na mobilné zariadenia od základu ako PWA. Sociálna sieť zistila, že pred týmto krokom len 1 % ich mobilných používateľov konvertovalo na registrácie, prihlásenie alebo inštaláciu aplikácie z dôvodu slabého výkonu na mobilných zariadeniach.

Pinterest PWA štatistiky.

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

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

Spotify

Váš obľúbený hudobný prehrávač je momentálne postavený na technológii PWA. Pre určité nezhody medzi Spotify a Apple, v otázkach provízie, využila spoločnosť aktuálnu príležitosť začať vyvíjať PWA verziu svojej aplikácie – tak ako mnoho iných veľkých značiek.

V porovnaní s natívnou aplikáciou Spotify je verzia PWA podstatne rýchlejšia s vlastným jedinečným a prispôsobivým užívateľským rozhraním. Podobne ako u 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ógie, podnikanie, vedenie 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 notifikáciám, okamžitému prechodu a ľahkému designu sa Forbesu podarilo zvýšiť zapojenie používateľov a počet konverzií.

• Zvýšenie počtu vnorení pri prezeraní podstránok bolo 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 štátom a regiónom, sa stretla s problémom vybudovať zaujímavý zážitok pre mobilný web. Táto forma webu je ich primárnou platformou na prezeranie ponuky v mobile. Alibaba.com vnímala mobilný web ako platformu na presun používateľov, ktorí aplikáciu nepoužívajú, do aplikácie.

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

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

• Po inovácii svojich stránok na PWA zaznamenali 76% nárast celkového počtu konverzií v prehliadačoch.
• o 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 štátoch, 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 BUDOUCNOSŤ „PROGRESÍVNA“?

Odpoveď je rovnaká ako vždy – záleží na vašich potrebách. Rozhodnutie o vytvorení PWA vychádza z analýz a úvah, ktoré si musíte raz za čas urobiť, od projektu k projektu, od používateľa k používateľovi.

Zjednodušenie vývoja je však 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.