Online industrija oduvijek se borila za mjesto na kauču i korisnikov “attention span” – i to s dvije različite strane. Klasične web-aplikacije dostupne su na svim uređajima, mogu se sherati i linkati, bazirane su na otvorenim standardima, korisnici uvijek koriste posljednju verziju aplikacije, a uobičajene potrebitosti poput ispisa, spremanja članaka, online kupnje i ispunjavanja formulara rade besprijekorno. S druge strane, nativne aplikacije (iOs, Android itd.) brze su, jake, imaju pristup kameri, 3D-u, mogu raditi u pozadini te primati naredbe preko mikrofona (Hej Siri, pitaju me kakvo je stanje u frižideru!?).

Razlike u razvoju i tehnologiji velike su, pa će nativnu iOs aplikaciju producirati timovi koji se uglavnom bave samo iOs ekosustavom. Isto vrijedi i za Android. Takve nativne aplikacije prolaze kroz app store distribuciju, verzioniranje i app updates, a klasične web-aplikacije nemaju tih razvojnih koraka (problema).

Pristupi razvoju i drugačije tehnološke mogućnosti doveli su do stvaranja dva velika aplikacijska tabora – native VS web, a upravo je Google (pletući mrežu za svoje AdWordse) počeo promovirati PWA koncept, stvarajući most između njih. Cilj je na papiru jednostavan – postići da se web-aplikacije ponašaju kao nativne, ali i da imaju tehnološke mogućnosti tradicionalno rezervirane samo za nativne aplikacije. Takve Progresivne web-aplikacije (ime im je nadjenula Francis Berriman) koriste nove standardizirane web-tehnologije kako bi realizirale željenu interaktivnost: JavaScript Service Workers (offline work, client side caching, push notifications); Web App Manifest (instalacija na Home Screen, Fullscreen mode); Credentials management API; Payment Request API; Beacon API; WebShare API; WebVR API (eksperimentalno); te ostale nove W3C tehnologije koje obogaćuju web-iskustvo (pogledajte https://caniuse.com za detaljniju listu i browser support).

Rastavljene na proste faktore, PWA su zapravo skup HTML, CSS, JS datoteka, dizajniranih prema mobile first responzivnim pravilima. Navedene tehnologije developer može koristiti prema potrebi. Primjerice, Web App Manifest deskriptivna je datoteka koja opisuje ikonu, naziv ili početni URL web-aplikacije, ali tehnološki ona nam nije zanimljiva. Temu responzivnog web-dizajna već su detaljno obradili braća Blagonić u rujanskom izdanju Mreže. Tekst se direktno odnosi na dizajn i korisničko iskustvo responzivnog weba, krucijalnog za stvaranje PWA koncepata. Okrenimo se stoga prema Service Workerima – tehnološkoj jezgri progresivnih web-aplikacija.

Servisni radnici, ujedinite se!

Interaktivnu priču s kauča ne moramo niti stavljati u 2020. kako bismo iskusili mogućnosti PWA. Dovoljno je da upalimo mobitel s Androidom i vidimo što sve PWA donosi u olujni svijet web-razvoja. Takve aplikacije žele vam slati push notifikacije, dohvatiti kontakte s mobitela ili koristiti kameru za videopoziv. PWA želi biti korisna i kada nema internetske veze, a želi skriveno raditi i u pozadini uređaja. Sve to omogućuje Service Worker – Javascript datoteka koja cijelo vrijeme radi u posebnom browser threadu, odvojena i od web-stranice i od korisničkih interakcija.

Service Worker u suštini je programabilni mrežni proxy – JavaScript modul koji developeru dozvoljava da definira što se sve događa između web-aplikacije i mreže, tj. Interneta. Tako developer može cacheirati statičke datoteke, periodički syncati web-stranicu s pozadinskim servisima, koristiti GeoFencing ili omogućiti korisniku da koristi PWA u offline modu rada.

Prokopamo li dublje, ServiceWorkeri ovise o JavaScript objektima “Promises”, koji se pune nakon završetka asinkronih mrežnih poziva. Tehnologija je podržana u svim relevantnim browserima, a pozadinu i povijest razvoja “Promises” možete pratiti i do razvoja AJAX-a, XML-a i JSON-a.

Posebnost Service Workera jest to što on podržava i tzv. Install događaj (koji se dogodi pri prvom posjetu jednoj Progresivnoj web-aplikaciji). Developer na taj događaj može instalirati sve resurse koji su korisniku potrebni da bi aplikacija radila kako je on zamislio. I još važnije, developer pritom događaju cacheiranja treba zapisati i verziju cachea tj. verziju PWA koja se trenutačno koristi.

Service Worker omogućuje da se web-aplikacija ponaša kao nativna jer ne ovisi o klasičnom HTTP (click > request > response > render) modu rada. Zamislite se u sljedećim situacijama – upalite mobile web browser, a vaš omiljeni portal prikazuje najnovije vijesti prilagođene upravo vama, bez ikakve potrebe za internetskom vezom. Ili možda primjer eCommercea, gdje vam internetska trgovina, ona preko koje ste kupili novo odijelo, preko push notifikacije ponudi kupon za kupnju remena ili hlača sa 2% popusta jer upravo prolazite pored njihovog fizičkog dućana (GeoFencing). Banalni primjer uključuje i offline način rada, gdje je korisniku omogućeno preuzimanje dijelova sadržaja za kasnije konzumiranje. Inače, offline rad je krucijalan za sve videoigre izgrađene na PWA konceptima.

Caching omogućuje i jedan “inženjerskiji aspekt” razvoja progresivnih web-aplikacija, a to su brzina učitavanja, responzivnost i eksplozivnost korištenja – tradicionalno rezervirane samo za nativne aplikacije. Twitter je pionirski iskoristio PWA mogućnosti i razvio Twitter Lite, koji teži manje od megabajta. Slični pothvati vode se jednostavnim poslovnim iskustvom – brža aplikacija znači više konverzija i više zarađenih dolara. Milisekunde učitavanja su apsolutno “sve” kada govorimo o mobilnim korisničkim iskustvima. Istraživanja kažu da 53% korisnika odustaje od konzumiranje sadržaja ako učitavanje traje dulje od tri sekunde! Više od pola korisnika! Fakti su izraženiji u zemljama sa slabim internetskim vezama.

ServiceWorkeri imaju i ograničenja. Lokalno spremanje podataka je limitirano od browsera na 50 MB cached podataka (podatak ovisi od browsera do browsera). Time developer mora pravilno raspolagati te koristiti tehniku spremanja podataka u ovisnosti od različitih aplikacijskih ili korisničkih akcija (pogledajte posebni okvir “PWA i Service Workers događaji”)

Opisane Promises i ServiceWorker pozadinske su tehnologije koje omogućuju PWA revoluciju. No dok Promises uživaju podršku u svim browserima, Service Workers još su uvijek kočeni od Applea. Zašto?

Apple i Google; Macbeth i Macduff

Progresivnost je maglovita riječ, podložna da ju se lijepi na bilo koju tehnologiju, ne samo na ovu koju vam upravo prodajem. No upravo se web-dizajnerima i programerima kontinuirano “prodavalo” – Flash, Silverlight, Java, .NET, PHP, Figma, Sketch, PSD, React, Vue, Angular, Gulp, Grunt… šume i prašume termina nastalih u taborima Microsofta, Facebooka, Adobe i Googlea.

Svaki tabor njeguje svoj ekosustav pa je razvoj app storeova, distribucije aplikacija i monetizacije doveo do još jačeg zatvaranja tehnologija za razvoj nativnih aplikacija. Primjerice, razvoj iOs aplikacija radi se na Macu kroz XCODE IDE, a certificirana distribucija je moguća samo kroz Apple App store. In app purchases, Apple Pay i ostale monetizacijske sheme kontrolira isključivo Apple. Android je, pak, nešto otvoreniji, no koncept je isti – developer koristi Javu (ili moderni Kotlin koji se zgodno može transpilirati i u JavaScript za web), Android Studio te distribuciju preko Google Playa ili Amazon storea.

Čak se i mobile app design guidelinesi razlikuju. Ne samo da je inženjerstvo drugačije, već su i dizajneri verzirani od tabora do tabora. I to stvara veliki problem za inovatore i investitore. Naime, razvoj mobilne aplikacije uvijek se morao dvostruko budžetirati – jedan dio budžeta za iOs ekipu, a drugi dio budžeta za Android ekipu. Negdje na 50% gantograma klijent se prisjetio da mu treba i mobilni responzivni web pa je budžet povećan i za dodatnu front-end ekipu.

Problemu su htjeli doskočiti inženjeri koji sanjaju o magičnom alatu za “deploy” programskog kôda na sve nativne platforme: Adobe je imao Air, Facebook gura React Native, Apache gura Cordovu, a Xamarin se također šulja okolo kako bi postao kralj svih platformi. Sva ta hibridna rješenja imaju isti set problema: Programer mora producirati sloj iznad postojeće nativne platforme; Arhitektura IT sustava ovisi i o hibridnoj platformi i o nativnoj platformi; Hibridni sustavi nikada nisu mogli iskoristiti 100% funkcionalnosti nativne platforme; Održavanje i razvoj aplikacije ovisi o razvoju hibridne platforme i nativne platforme; te Hibridne platforme imaju korporativnog vlasnika (podložnog raznim tržišnim zaokretima).

Nekoliko primjera... Adobe Air (Flash) bio je tipična žrtva korporativnog rata između Adobea i Applea s kultnim pismom Stevea Jobsa, koji je, pak, označio početak kraja te web-tehnologije. Slijedno – developeri su se morali prebaciti s ActionScript 3.0 na Javascript ili možda Swift, koji su mu dosta slični.

Noviji primjer tiče se Facebooka i njihovog Reacta – Apache je zabranio upotrebu Facebook Opensource modula (poput Reacta) u svojim proizvodima jer smatra da licenca nije dovoljno “OpenSource”. Točnije, Facebookova verzija BSD licence je stroža, kako bi se branili protiv patent-trollova te u ovom slučaju Facebook nije htio mijenjati BSD verziju licence. Opet slijedno – neke organizacije prestale su koristiti React u svojim aplikacijama, što je sigurno oduševilo njihove developere, vrijedne kodere koji su proveli noći razvijajući upravo react-based aplikacije. Čak je i Matt Mullenweg, suosnivač WordPressa, odustao od Reacta kao alata za izradu novog WP editora (kodnog imena Guttenberg) te obrazložio cijeloj zajednici da moraju pronaći zamjensku UI knjižnicu i refaktorirati dobar dio već razvijenog kôda (više o temi u okviru Vue VS React)

Korporacije, hibridni pristupi, razni alati i nejasna budućnost kompliciraju ionako prenapregnuti trošak razvoja mobilnih aplikacija. PWA je svijetlo u maglovitom tunelu jer takvih problema nema, i to upravo radi ovih tehnoloških razloga: PWA su temeljene na otvorenim i standardiziranim W3C standardima; programski kôd i servisi razvijaju se pomoću poznatih i isprobanih web-tehnologija: HTML / CSS / JS;. Kako bi radile, web-aplikacije trebaju samo browser; i PWA se mogu prikazivati na bilo kojem uređaju, browseru i OS-u.

Zadnja stavka je komplicirana – Service Workeri trenutačno su podržani u Chromeu, Firefoxu, EDGE-u i Operi, ali ne i u browseru Safari. Gdje je problem?

U razvijenim zemljama Safari jede 33% tržišnog kolača, a Apple se grčevito bori da interaktivna i jaka iskustva zadrži na svojoj platformi AppStore. Usporena podrška, izgleda, namjerna je poslovna odluka, slična onoj vezanoj uz Flash, gdje je Apple onemogućio igranje videoflash igara i napredna iskustva plaćanja izvan njihove platforme In-app purchases.

Ovaj se put Apple bori s Androidom, W3C-om i samim Internetom, što je rezultiralo time da u kolovozu 2017. godine odobre rad na Service Workerima. Odlična je to vijest za web.standarde, jer time je stvoren temelj tehnologije za PWA na uređajima sa Safarijem, i novi val koji će omogućiti svježa web-rješenja na dva mobilna tabora – iOs + Android.

NAPOMENA: Ovaj tekst je izvorno objavljen u časopisu Mreža.