U još jednom online eventu Split Tech City-ja, tridesetak znatiželjnih sudionika imalo je prilike poslušati zanimljivo predavanje Bože Penovića, web developera s višegodišnjim iskustvom u našoj tvrtki članici – Lilcodelab.

Božo nas je uveo u pojam progresivnih web aplikacija u Angular frameworku, što one točno jesu i čemu služe.

Progresivne web aplikacije (PWA) su poseban tip web aplikacija koje su poslužene od strane mobilnog ili desktop web preglednika. Drugim riječima, izgraditi PWA aplikaciju zapravo znači kreirati web aplikaciju koja korisniku pruža osjećaj korištenja “tradicionalne” tj. nativne aplikacije – koje smo naviknuti imati na početnom zaslonu naših mobitela ili računala.

Kako znati da te posjetili PWA web aplikaciju?

Jednostavno! Za vrijeme pregledavanja neke web stranice, a pod pretpostavkom da na svom uređaju imate pretraživač koji je podržan (Chrome, Opera…), dobivate upit “Želite li instalirati web aplikaciju na svoj početni zaslon?” Na ovaj način, čak i bez razvoja nativne aplikacije, dobili ste mogućnost postaviti ikonicu na ekran vašeg uređaja.

PWA aplikacije imaju u pravilu bolju podršku za desktop internetske preglednike no popularna je njihova primjena i u korištenju na mobilnim uređajima, gdje korisnik ima isto korisničko iskustvo kao na tradicionalnim mobilnim aplikacijama.

PWA predstavlja novu eru razvoja web aplikacija, koja nadopunjuje dosad izrazito popularan koncept responzivnog web dizajna. Responzivne web stranice podigle su nivo očekivanja korisnika mobilnih i tablet uređaja. Osim apsolutne prilagođenosti svakoj veličini ekrana, korisnici su navikli “ne osjetiti” razliku između pretraživanja na mobilnim i desktop uređajima te zadržati svoje navike pretraživanja sa svog pametnog telefona.

Neke od ostalih karakteristika su i:

– Progresivnost; omogućuje ispravan rad svim korisnicima, bez obzira na odabir preglednika,

– Neovisnost o internet pristupu; mogućnost rada aplikacije bez pristupa Internetu,

– Sigurnost; aplikacija se poslužuje korištenjem HTTPS protokola kako bi se spriječilo maliciozno mijenjanje podataka.

Da bi se neka aplikacija smatrala PWA aplikacijom, mora sadržavati dvije ključne stvari, a to su manifest datoteka i service worker. Božo nam je objasnio da je manifest datoteka zapravno JSON datoteka unutar koje se nalaze ‘metadata’ podaci koji opisuju web aplikaciju, dok je service worker skripta koju web preglednik izvršava u pozadini, a najčešće se koristi za primanje obavijesti i sinkronizaciju podataka. Jedna od važnih značajki jest ta da service worker može biti posrednik u komunikaciji između poslužitelja i web aplikacije, odnosno, može presresti komunikaciju te odlučiti što napraviti sa traženim/primljenim podacima.

Neke od preostalih tehnologija koje se koriste prilikom izrade PWA aplikacija su:

-IndexedDb

-WebStorage

-Kolačići (eng. Cookies)

-Brza priručna memorija web preglednika (engl. Cache)

Dizajn sučelja

Božo nas zatim uvodi u pojam dizajna sučelja i responzivnosti web stranice. Responzivnost web stranice je već spomenuta prilagodba različitim veličinama ekrana. Dakle, bez obzira otvarate li web stranicu/aplikaciju na mobitelu, tabletu ili računalu, prikaz bi trebao biti isti. To se postiže korištenjem fluidnih i propocionalnih mreža, fleksibilnih slika i @media upitima.

Osim responzivnosti, postoji i nekoliko dizajn principa koji se koriste u dizajniranju optimalnih sučelja, a jedan od njih je C.R.A.P. (contrast, repetition, alignment, proximity).
Također, Božo nas je upoznao i s pojmovima poput Hickovog i Fittsovog zakona, koji govore o vremenu donošenja odluke koje se povećava što je sučelje kompleksnije te o vremenu potrebnom da se pogodi cilj ovisno o udaljenosti i veličini cilja.

Božo naglašava da je veoma važno voditi računa o tome kako pozicionirati određene komponente same aplikacije, jer nije svaki dio ekrana jednako dostupan, kao što se može vidjeti na slici, gdje su zelenom bojom označena lako dostupna mjesta, do crvenog koje je najnedostupnije, odnosno, teže ih je prstom dosegnuti, bez obzira jeste li ljevak ili dešnjak.

Razlika između tradicionalnih mobilnih i PWA aplikacija

Sljedeće što nam je Božo pojasnio su karakteristike tradicionalnih mobilnih aplikacija te po čemu se one razlikuju od PWA aplikacija. Tradicionalne mobilne aplikacije su napisane u određenim programskim jezicima za određene platforme, kao na primjer Swift ili Objective C za iOS i Java za Android operacijske sustave. One su izrađene za konkretnu platformu te u skladu s time koriste i razne hardverske i softverske komponente. Neke od njihovih prednosti su: široki spektar funkcionalnosti, optimalnije korištenje komponenti uređaja što dovodi do boljih performansi, korisničko sučelje je prilagođeno operacijskom sustavu što dovodi do boljeg korisničkog iskustva…
Neki od nedostataka tradicionalnih mobilnih aplikacija su više kodova, odnosno, za svaki operacijski sustav potrebno je napisati zaseban kod. Samim time, trošak razvoja i vrijeme su veći.

S druge strane, PWA aplikacije razvijaju se uz pomoć jedinstvenog koda napisanog u HTML-u, CSS-u i JavaScriptu, koji je podržan i univerzalan za sve web preglednike na svim operacijskim sustavima. Zbog toga su trošak razvoja i vrijeme potrebno za implementaciju uvelike manji. Web aplikacije su brže i jednostavnije za izgradnju, ali u usporedbi sa perfomansama tradicionalnih aplikacija, sporije i manjeg spektra funkcionalnosti.

S obzirom na sve navedeno, postavlja se pitanje – kada izraditi tradicionalnu, a kada progresivnu aplikaciju?

Božo nam je olakšao ovu nedoumicu saževši prednosti i jedne i druge vrste:

Za kraj predavanja, Božo nam je pokazao i demo PWA aplikacije koju je izradio u Angular frameworku.

Progresivne web aplikacije su noviji trend u web developmentu, jednostavne su za izradu, štede resurse te koriste cache memoriju web preglednika. Za razliku od mobilnih aplikacija koje se moraju ažurirati da bi se koristile jednom kada izađe nova verzija, PWA aplikacija vas obavijesti da je stigla nova verzija aplikacije te vam nudi mogućnost ažuriranja ili korištenja stare verzije.

Za one koje PWA zanimaju detaljnije na ovom linku možete vidjeti primjer jedne takve aplikacije i sve njene mogućnosti.

Zahvaljujemo se Boži i Lilcodelab-u što su izdvojili vrijeme za ovo poučno predavanje, a vas pozivamo da nas i dalje pratite za još korisnih i zanimljivih evenata koje vam pripremamo u budućnosti!