Rozhovor s naším specialistou na téma PWA

David Vršek je naším Frond-End techleaderem a specialistou na headless architekturu. Dnes jsme ho zpovídali na v dnešní době velmi populární téma – Progressive Web Applications (PWA).

David Vršek

Nakupování skrze mobilní telefony je v posledních letech jedním z nejpodstatnějších trendů v rámci eCommerce. PWA se mobilních telefonů týká, dokážeš mi prosím představit pojem PWA?

 

Na začátek je třeba uvést, že je rozdíl mezi Progressive Web Appliactions (PWA) a Single Page Application (SPA). Často se tyto dva pojmy v business sféře zaměňují a je důležité zmínit, že PWA jsou v podstatě rozšířené SPA. 

Webové stránky dříve fungovaly tak, že každý požadavek uživatele se nejprve vykresloval na serveru.

Když se procházíte po internetu, servery musí pokaždé načíst webové stránky úplně celé, což je opravdu pomalá metoda, nešetrná pro uživatele a samozřejmě i pro mobilní telefony. 

Postupně začaly vznikat SPA, které fungují tím způsobem, že pokud přijdete na jakoukoliv stránku, stáhne se jádro aplikace – tím se myslí všechny hlavní JavaScripty a šablony, které uživatel potřebuje. Pokud následně přecházíte mezi stránkami, stahují se další, dodatečné části, které jsou zapotřebí k vykreslení kompletní stránky. 




 

Dříve jste přišli na stránku a hlavička, obsah, patička, vlastně všechno, co se vám zobrazilo se pokaždé stahovalo znovu a znovu. Šli jste na 5 stránek = 5x se vám vše stahovalo od znovu. 

To znamená, že název Single Web Application opravdu vychází z toho, že se fyzicky nacházíte na jedné stránce, která dle vašeho brouzdání po internetu postupně dokresluje ostatní části stránek a nestahuje se celá stránka znovu. Díky tomu, že prohlížeč nemusí analyzovat celé HTML nebo kaskádové styly znovu, jsou tyto stránky podstatně svižnější a obsah se vykreslí dříve.  Takže to ve výsledku pro uživatele znamená, že jsou tyto stránky především na mobilních telefonech mnohem rychlejší, menší a spolu s tím šetří mobilní data. 

Dalo by se říci, že PWA rozšiřují SPA, i když ne v pravém slova smyslu. PWA totiž používají stejný základ jako SPA, čímž je standard, který definoval Google. Zásadní rozdíl pro business je, že oproti SPA mají PWA fungovat a tvářit se jako nativní aplikace

Pro příklad, PWA webovou stránku si můžete jednoduše uložit do telefonu jako záložku, kterou když otevřete, pohodlně se vám zobrazí plnohodnotný web, který je k nerozeznání od klasické mobilní aplikace, kterou byste jinak museli stahovat. 

PWA jsou v porovnání s mobilními aplikacemi opravdu obdobně responzivní. To znamená rychlé na spuštění, procházení, dokáží fungovat dokonce v offline režimu. Offline režimem se myslí to, že například u eShopu – stránky, produkty, které jste již navštívili můžete jednoduše procházet znovu. Dokonce některé PWA umožňují i offline nakupování. Takže můžete být offline, nakupovat a ve chvíli, kdy se znovu připojíte k síti se vše synchronizuje s back endem a objednávka se odešle.

 

Je tedy PWA modul do e-shopu nebo jak by to měl náš potencionální zákazník chápat?

Kdepak. Jedná se o způsob, jakým se píše Front-End celé konkrétní stránky. V podstatě, pokud se podíváte na velké společnosti, tak velmi často fungují na webových stránkách a zároveň vlastní aplikaci skrze kterou jejich zákazníci nakupují. PWA jsou mimo jiné snahou, aby internetové stránky do budoucna nahradily nativní mobilní aplikace. Hlavní výhodou je právě to, že PWA stránka dokáže fungovat v offline režimu, to znamená, že stačí její obsah jednou načíst a nadále funguje samostatně jako plnohodnotná aplikace pro mobilní zařízení. Navíc je rychlá, menší a levnější na údržbu. Ve výsledku se jedná o to, že provozovatel PWA šetří ohromné náklady na vývoji mobilních aplikací, ale i na chodu dvou, ve výsledku zbytečných platformách. 


Jakým způsobem si myslíš, že PWA změní procesy nakupování uživatelů do budoucna?

Je zcela zřejmé, že absolutním trendem poslední doby je nakupování zboží přes mobilní zařízení. Ať se jedná o smartphony nebo tablety, obojí válcuje klasické desktopy. Lidé jednoduše rádi nakupují odkudkoliv je jim to pohodlné, nechtějí být ničím limitováni a časy, kdy jste si museli k online nakupování sednout k počítači jsou dávno pryč. Díky tomu, že se PWA chovají jako nativní aplikace (které jednoduše musíte skrze AppStore či Google Play stahovat) a nahrazují dojem používání nativních aplikací, očekávám, že se do budoucna všichni velcí hráči, ale samozřejmě i menší firmy budou o PWA intenzivně zajímat a budou je hojně implementovat do svých business plánů. PWA jsou ve své vlastní podstatě o tom, že by uživatel ve výsledku neměl rozeznat rozdíl mezi moderní aplikací a moderní webovou stránkou. 

 

Nemyslíš si tedy, že PWA uškodí vývojářům aplikací? 

To si nemyslím, protože nativní platforma toho umí v dnešní době stále velmi hodně. Některé věci se na PWA jednoduše udělat nedají nebo se nedají udělat natolik efektivně. Například v PWA se dá dokonce vyvíjet i počítačová nebo mobilní hra, ale nebude to ono, protože PWA jsou vytvářeny především pro business aplikace. Jakékoliv věci, které potřebují silnou HW akceleraci, tzn. něco velkého počítat nebo pracovat s foťákem apod. je zatím lepší vyvíjet v nativní platformě. PWA jsou opravdu nejlépe využitelné pro webové služby, jako jsou právě online obchody. 

Nativní aplikace jsou stále sofistikovanější, protože umí pracovat s kompletním hardware daného zařízení. Tím myslím například GPS, fotoaparát a další. Zkuste si představit jak často aplikace ve vašem telefonu využívají jeho hardware, skoro pořád. I PWA dokáží využívat hardware zařízení, ale v rámci webového rozhraní je to stále podstatně limitovanější. Takže odpověď na tvoji otázku … Myslím si, že mobilní aplikace jako takové z trhu nezmizí nadobro, ale ve své podstatě by PWA s mobilními aplikacemi v odvětví e-commerce mohly zatřást opravdu slušně. 

 

PWA mají podobné funkce jako nativní aplikace, například práci offline nebo push notifikace. Jak se tyhle funkcionality dají pro běžného uživatele využít a v čem jsou zajímavé? Co si mám představit pod pojmem push notifikace, napadá tě něco?

Dobrá otázka. Na internetu je popsaná spousta výhod PWA, ale nikde není konkrétně vysvětlený příklad. Pod pojmem push notifikace si můžeš představit klasické upozornění, které ti přijde z aplikace nebo programu, který máš na libovolném zařízení nainstalovaný. Například upozornění, jaké počasí bude následující den a nebo notifikaci, že ti přišla nová zpráva. Dokážeš si představit, že by ti webová stránka posílala nějaké upozornění? Nebylo to běžné, nebylo to možné, ale to je jedna z mála vymožeností, které PWA přinášejí. Stačí navštívit daný web, který funguje na PWA, odsouhlasit  oprávnění k zasílání notifikací a v momentě, kdy například obchodník naskladní notebook na který jste dlouho čekali, PWA vám automaticky zašlou upozornění

Právě z tohoto důvodu se PWA jmenují Web Applications, protože se opravdu chovají jako aplikace, které mají sofistikovanější logiku oproti klasickému webu. Tohle vše je možné díky HMTL 5 a novým API (Application Programming Interface), které umí nové prohlížeče přesně na výše zmíněné funkcionality, jako je zapojování fotoaparátu, GPS, notifikace a další. 

 

Je v tuhle chvíli na domácí scéně v České republice PWA velkým trendem?

Ta technologie není nová, ale business jí objevil poměrně nedávno. V zásadě se také jedná o to, že si musíme uvědomit, že ačkoliv ta technologie ve své vlastní podobě není nejnovější, tak až v nynější době jsou mobilní zařízení rychlejší, větší a mnohem lépe se používají k nakupování po internetu, což dříve nebylo tak snadné. Přes dnešní telefony si vyřídíte e-mail, podíváte se při cestě tramvají na YouTube a stejně tak pohodlně nakoupíte to, co se vám líbí nebo právě potřebujete. V dnešní době je telefon za 5,000 Kč dostatečně rychlý na to, aby takovou aplikaci zvládl rozumně vykreslit a ovládal všechny technologie jako jsou právě práce s fotoaparátem, GPS a další. V rámci té technologie bych ještě rád uvedl, že se často stává, že je něco ve zpožděném stavu a je pro to racionální vysvětlení. Vždy se něco navrhne a business se na to jednoduše neumí ihned adaptovat, protože to například není stabilní nebo na to nejsou dostatečně silné stroje. To je to stejné co v herním průmyslu, tam jsou dnes algoritmy, které spočítá grafická karta za 20,000 Kč, před 10 lety to byl počítač za miliony. 

 

Jaké výhody a zároveň nevýhody bys k PWA přiřadil?

Hlavní rozdíl je ten, že už to nejsou ty staré HTML stránky, které se ti znovu překreslují a znovu stahují knihovny. Asi největší a nespornou výhodou je především to, že jsou PWA extrémně rychlé oproti čemukoliv jinému. Je to v podstatě to stejné, jako když si otevřete složitou mobilní aplikaci na nejmodernějším smartphonu. Vše je okamžité, na nic se nemusí čekat, a právě díky této největší výhodě se zákazník setkává s opravdu úžasným UX a customer experience obecně. Je známo, že PWA využívají obchodní giganti jako je Uber, Tinder, Pinterest nebo české Dáme Jídlo – zkuste hádat proč? Každá uživatelova vteřina znamená potenciální zisk a velcí hráči to moc dobře vědí a proto PWA využívají. Jsou to už opravdu chytré aplikace, které šetří čas, protože se stránka vykreslí rychleji, stáhne míň dat a umí být více interaktivní. Dá se například udělat i to, že když uživatel povolí sledování dle GPS a pokud PWA zjistí, že se nachází u tvého obchodu, pošle mu notifikaci se slevou 10 % a poznámkou, aby obchod navštívil. Možná se budu opakovat, ale tady je patrné, že jsou PWA cílené právě pro prohlížení internetových stránek přes mobilní zařízení, právě protože PWA dokáží využít potenciál HW těchto zařízení. Dále pak je možné skrze mobilní zařízení naskenovat QR kód, díky kterému se v telefonu následně zobrazí spousta informací o daném produktu nebo se ukáže 3D model, video, cokoliv. Jednoduše je zde vidět, jak se propojuje virtuální svět s tím reálným a to mi přijde fantastické. 

 

Vidíš z osobního pohledu v PWA velkou budoucnost?

Jo určitě. Co se týká PWA, tak je to cesta, kterou se teď budou všichni chtít vydávat a ne jenom, protože by chtěli, ale především kvůli uživatelům, kteří víc nakupují na telefonech. Také je fun fact, že vás Google může sesadit z vyšší pozice ve vyhledávání, pokud vaše stránky nebudou mít PWA implementované. Takže to není dle mého trend, jako spíše logická budoucnost. 

 

Jakou roli hraje v případě PWA platforma Magento?

Magento začalo vytvářet své vlastní PWA studio, což je vlastně jejich framework pro vývoj PWA aplikací nad Magentem. To je něco, co teď rozvíjí, jsou tam vychytávky jako například ty push notifikace, které jsem zmiňoval, offline nakupování a podobně. Dle mého názoru si Magento uvědomuje, že web jako takový míří především na mobilní zařízení. Google například sleduje jak kdo PWA standardy dodržuje. Jak jsem zmiňoval před chvílí, Google vyhodnocuje jak rychlé stránky máte, jestli stahují hodně obsahu, čím lepší je performance, čím rychleji se stránka vykreslí, tím lepší pozici od Googlu web ve výsledcích vyhledávání daný web získá. Právě proto je PWA úžasné a zároveň proto se na něj Magento zaměřuje. 

Zpět na články
Sdílet článek:
Do you want an e-shop
that will have such features?
Napište nám