PWA aplikácie

V Techband je naším cieľom tvoriť IT základňu hviezdnych developerov a mimo iného podporovať ich a aj širšiu verejnosť, v osobnostnom a profesionálnom rozvoji v oblasti IT a technológií. Práve preto sme sa koncom roka 2020 rozhodli spustiť sériu Techband meetup-ov zameraných na rozvoj hard-skills, konkrétne na jednu z najpopulárnejších technológii – JavaScript

V tomto článku vám prinášame bližšie predstavenie témy “PWA aplikácie v Angulari”, o ktorej na našom poslednom JavaScript meetup-e rozprával speaker Johnny Seyd – my sme ju následne spracovali do písomnej formy na náš blog.

 

PWA – mobilná app-ka, čo zvládne aj tvoja babka?

PWA (progressive web application) je v krátkosti webka / web aplikácia, ktorá funguje a má určité znaky naozajstnej aplikácie. Jej vývoj stojí na technológiách HTML, CSS a JavaScript, cieľovými platformami sú desktop, ale rovnako aj mobilné telefóny. Aplikácia funguje v internetovom prehliadači na webstránke, ktorá nám umožňuje aplikáciu hneď využívať alebo si ju veľmi jednoducho jedným klikom rovno stiahnuť na desktop / mobilný homescreen, kde ďalej funguje ako klasická aplikácia v podobe ikonky, kliknutím na ktorú sa spustí headless okno bez hlavičky browsera a aplikácia samotná (tá vie následne fungovať aj v offline režime).

Čo sa týka podpory internetových prehliadačov, tak PWA aplikácie sú podporované všetkými prehliadačmi postavenými na jadre Chromium, naopak v takom FireFox niektoré veci ešte nefungujú. Následne napríklad taký IOS zase trochu hádže polienka pod nohy Chrome-u, pretože PWA aplikácie v rámci IOS rozhrania vieme používať a inštalovať len cez Safari prehliadač. 

 

 

 

Čo robí z webstránky PWA aplikáciu?

 

(1) Web App Manifest 

Web App Manifest je .json súbor, ktorého odkaz pridávame do hlavičky stránky HTML a definujeme v ňom informácie o našej PWA aplikácii, primárne sa jedná o jej názov a ikony. V DOM inspector-e si následne môžeme overiť, či bol manifest správne načítaný (urobiť tak môžete otvorením záložky application > manifest, kde uvidíte, či bolo všetko načítané správne).

 

(2) Ikony

Ikony vidíme na desktope a homescreene smartfónu, avšak každá aplikácia, respektíve platforma rovnako ako aj rôzne verzie toho istého operačného systému, zobrazujú ikonky trochu inak (napríklad ich orezávajú alebo zaobľujú ich okraje, niekde je ikonka zobrazená v kruhu, niekde ako štvorček, inde ako čokoľvek medzi kruhom a štvorčekom, rovnako sa môže líšiť aj veľkosť ikoniek). Z týchto dôvodov je možné do manifest-u pridať napríklad aj viacero rôznych ikon pre odlišné účely, vždy sa však odporúča mať určite aspoň optimálnu veľkosť 192×192 pixelov a padding (rádius 40% od stredu ikony predstavuje bezpečnú zónu, ktorá by mala byť viditeľná všade).

 

(3) Service worker

Na to, aby z webstránky mohla byť PWA aplikácia, potrebujeme vytvoriť a registrovať service worker. Service worker je v podstate JavaScript program, ktorý ale beží v inom scope ako bežné JavaScript programy danej webovej stránky. Tiež má aj špeciálny, na stránke nezávislý, životný cyklus (tkz. life cycle). Service worker zároveň beží na pozadí vášho zariadenia, aj keď nie ste práve v prehliadači na PWA webstránke. Čo sa týka jeho funkcií, tak s ním napríklad vieme riadiť push notifikácie alebo interceptovať, teda odchytávať, komunikáciu (to sú všetky requesty, ktoré stránka robí). Rovnako vieme vďaka service worker umožniť v prípade PWA aplikácie to, aby fungovala aj v offline režime. Service worker má vlastné API / dostupné objekty, tiež v ňom vieme nastaviť, aké funkcie sa majú spustiť po inštalovaní / fetch-ovaní / aktivovaní aplikácie alebo ním riadiť nejakú cache.

Ako príklad sa môžeme pozrieť na situáciu, kedy chcete, aby vaša aplikácia fungovala offline – v tomto prípade je dôležité v service worker-i na začiatku spomenúť všetky HTML, CSS a JavaScript súbory, všetky obrázky, videá a fonty, jednoducho všetko, čo potrebujete k správnemu fungovaniu vašej appky. Pri jej inštalácii sa následne všetky tieto súbory načítajú a vložia do cache, čiže od toho momentu bude môcť aplikácia fungovať v offline režime. Čo sa týka cache-ovania, tak existujú rôzne stratégie ako na to – pre tento účel existuje aj stránka serviceworke.rs, kde sú vymenované a krásne vysvetlené tie najrôznejšie stratégie. Johnny odporúča najmä stratégie cache and update, alebo cache, update and refresh.

Potrebné je ešte spomenúť tzv. zombie service worker – to je názov pre stav service worker v prípade, že urobíte chybu zacache-ovania niečoho spôsobom, že sa to už nikdy nebude schopné načítať z internetu, alebo z local host-u. Všetky request-y a všetky vaše zmeny bude browser ignorovať, pretože si povie, že má obsah, ktorý nebude už nikdy updatovať. Vy, ako vývojári, viete tento stav vo svojom prehliadači ľahko zvrátiť tým, že si otvoríte DOM inspector a v záložke service worker si updatnete alebo odregistrujete a znova nainštalujete service worker. Avšak, dôležité je, aby sa vám táto chyba nikdy nestala v produkcii, teda, že tento problém zažije váš užívateľ (toho už totiž budete ťažko inštruovať k tomu, aby si otvoril DOM inspector a niečo si tam updatol / nainštaloval). Našťastie však aj v tomto prípade existuje riešenie – volá sa kill switch. Service worker funguje tak, že beží na pozadí zariadenia a mal by v priemere každých 24 hodín urobiť dopyt na súbor service worker, teda zistiť, či sa nezmenil.  Tým, že chcete vykonať obsahovú zmenu (a opraviť tak spôsobenú chybu), môžete použiť jednoduchý spôsob nápravy – vytvoríte si premennú version, ktorú budete následne inkrementovať každým release-om – tým pádom nastane v service workeri zmena a znova sa načítajú potrebné asset-y.

 

(4) Možnosť pridať aplikáciu na desktop / homescreen

PWA aplikácie nám dávajú možnosť pridať aplikáciu na desktop / homescreen, skrátene túto funkcionalitu nazývame aj A2HS (add to home screen) – predstavuje to krok, keď nám web dovolí nainštalovať aplikáciu priamo na desktop / homescreen. Treba to však vnímať tak, že pridanie aplikácie na desktop / homescreen nie je nutný krok. Prvok pridania aplikácie na desktop / homescreen je len krok navyše, ktorý vám mimo iného umožní mať danú PWA aplikáciu v zozname aplikácii, teda medzi ostatnými mobilnými / počítačovými aplikáciami, a viete ju tým pádom spustiť aj bez browser-a. Funkcionalitu podporujú všetky browser-y postavené na Chromiu, rovnako má v dnešnej dobe aj silnú mobilnú podporu (s výnimkou IOS – ten blokuje Chrome a pridanie na desktop / homescreen tak funguje len cez internetový prehliadač Safari – ten samotný však funkcionalitu A2HS cez javascriptove API nepodporuje, takže je potrebná manuálna inštalácia). Zároveň v rámci tejto témy existujú aj rôzne stratégie o tom, ako a kedy čo najefektívnejšie vyzývať užívateľov na nainštalovanie app-ky – napríklad rôzne natívne lišty, automatické procesy, vystupujúce ikonky, patterny pre vyskakovanie rôznych custom okien a podobne (príklady nájdete na web.dev/promote-install). 

 

JS projekty

Užitočný nástroj pri vývoji PWA

Veľmi užitočným nástrojom je záložka LightHouse v rámci DOM inspector-a, kde môžete nájsť PWA check-list – v ňom si viete skonktrolovať, ktoré veci sú v rámci vývoja PWA aplikácie v poriadku / ktoré chýbajú, zároveň tam nájdete množstvo užitočných tipov a trikov o tom, čo môžete zlepšiť. Veľmi dobré tipy na túto tému nájdete aj na linku web.dev/progressive-web-apps.

Aké sú výhody PWA aplikácií?

– sú app-like – to znamená, že fungujú a vyzerajú ako aplikácie, avšak na rozdiel od bežných app-iek sú ešte aj vyhľadateľné cez internetové vyhľadávače, keďže na webe figurujú ako normálny internetový obsah

– fungujú offline, teda nezávisle od internetového pripojenia

– veľmi ľahko sa inštalujú – browse-ujem web, nájdem zaujímavú app-ku a do pár sekúnd si ju viem pridať na plochu počítača / homescreen smartfónu

– po inštalácii sú ľahko dostupné – cez ikonku z desktop-u alebo homescreenu kedykoľvek ich potrebujeme použiť

– sú nezávislé na store-och – PWA aplikáciu si vieme nainštalovať počas browse-ovania internetu

– vývoj PWA aplikácie predstavuje jeden projekt s využitím jedného technologického stack-u – nepotrebujete rôzne tímy s odlišnými skill-sets na vývoj pre rôzne “natívne” platformy (napr. vývoj bežnej mobilnej aplikácie na Android a na IOS predstavuje dva rôzne nezávislé samostatné projekty)

 

Aké sú nevýhody PWA aplikácií?

– neviete v nich použiť všetky moderné natívne funkcie – je potrebné to obchádzať cez rôzne wrapper-e 

– pri ich používaní sa vo väčšom množstve spotrebováva batéria mobilného telefónu

– platforma IOS blokuje možnosť používania push notifikácií a mnohých ďalších funkcií

– niektoré hardware funkcie nemusia byť podporované

– výkon výpočtovo náročných operácií môže byť pomalší

 

Mýty o PWA

– PWA sa týka iba oblasti mobilných telefónov (NIE – fungujú aj na desktope, sú to platformovo nezávislé aplikácie)

– PWA neexistujú na app store (NIE – PWA aplikácie vieme umiestniť na app store – všade okrem operačného systému IOS)

– PWA nevie využívať hardwarové features / funkcie (NIE – niektoré síce môžu robiť problémy, avšak na všetko sa dá nájsť riešenie)

– PWA sú drahé na vývoj (NIE – jeden technologický stack viete využiť pre všetky existujúce platformy a tým pádom značne ušetriť na vývoji aplikácie)

– cez PWA sa neviete dostať k celému potenciálnemu publiku (NIE – PWA viete dať na app store, sú vyhľadávateľné na webe a stiahnuteľné na jeden klik)

 

Existuje perfektná stránka whatwebcando.today, kde si viete pozrieť, čo všetko dnes umožňujú webové štandardy. Rovnako tam tiež nájdete veci, ktoré použiť neviete – často sú ľudia prekvapení, koľko sa toho v dnešnej dobe už dá použiť, takže si tam môžete ísť zmeniť názor na to, čo všetko sa dnes dá a nedá. 

 

Príkladnú PWA aplikáciu môžete nájsť na tomto demo linku – https://demoapp.ecocapsule.sk/.

 

Sledujte naše aktivity aj na našom Instagram a Facebook profile alebo na LinkedIn.