Progressive Web Apps (PWA) i SPA

Da li je neko radio neku PWA impelentaciju? Sta tacno predstavlja PWA?

Da probam malo da pojasnim.

Odredjeni klijent zeli da uradi PWA aplikaciju za odredjeni specijalizovani hardware, da bi maksimizirali iskoristivljost, frontend bi trebao da se tera preko web-a (trenutno ce HW da tera Windows 10, ali mozda se jednog dana i potera nesto drugo). Do sada, ja sam uglavnom radio SPA (React + ts) i moj predlog je bio da radimo u toj kombinaciji (sto se ne kosi toliko sa PWA) ali bi trebalo da bude PWA. Ono sto ne razumem je sta tacno bi PWA nudio da ne moze da se uradi sa SPA? Sve primere koje sam video, najvise se pominje cache, kao jedan od feature-a, ali taj cache se odnosi vise na MPA (multi page applications), samim tim, koja je tacno svrha PWA, osim da se mozda upakuje SPA i runnuje kao "native" aplikacija (generalno svi feature-i su nebitni, posto ce se app terati kontrolisano, korisnik nema opciju nego samo da gleda u app, slicno kao ATM masine)?

Cini mi se da ti je situacija malo naopaka. Pogledah ovde https://en.wikipedia.org/wiki/Progressive_Web_Apps pod Characteristics i vidi da li ti je i sta od toga potrebano za konkretnu aplikaciju i to uradi.
Ne bi trebalo praviti PWA samo da bi se imala PWA jer je to novi buzzword vec vidi da li ti je to uopste potrebno. Ili ti je mozda potrebno samo pola tih karakteristika pa je to onda neka polu-pwa, da tako nazovem.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

Mislim, kapiram situaciju, imao sam i ja takvih slucajeva, da klijent hoce nesto da bude na neki nacin ili da koristi neki framework ili nesto slicno po svaku cenu samo zbog toga sto je cuo da je to nesto super iako je nepotrebno ili cak i otezava stvar u konkretnom projektu.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

Ja se drzim one - vezi konja gde ti gazda kaze :)

No, da budem iskren, ovo je vise research, pa samim tim zelim da budem sto je vise objektivan, da ne naginjem samo na ono sto je meni blisko. PWA naizlged nudi bas ono sto bi trebalo, ali iz mog ugla to deluje samo naizlged. Sve feature koje nudi su nebitni, cache, notifikacije, pristup OS specific API (WinRT u slucaju win) itd. jer to je sve ono sto ne treba korisnik da vidi. Kao sto rekoh, cache-iranje applikacije nema smisla u SPA, jer u momentu kad vidis SPA, on je vec ceo downloadowan, plus sto nisi vezan za broswer, jer ako sam dobro skontao PWA u win 10 se tera preko Edg-ovog engina (dok je jedan od zahteva klijenta da je UI maksimalno ispeglan, pa samim ti i animacije moraju da budu glatke, a iz nekog mog iskustva chrome, iako trosi resurse, najbolje renderuje content).

I da, koliko sam skontao PWA u stvari se ne kosi sa SPA, to je vise neka arhitektura "kako da teras web app kao native app", a web app mozes da pises u cemu hoce. No, glavno pitanje je, ako mogu da teram u browseru SPA identicno kao i PWA, kada se u opste koristi PWA?

Uzmi sa rezervom sto pisem jer nisam radio ni jedan konkretan projekat.

Elem, PWA nije nesto sto koristis vec je to nacin da napravis web sajt. Da, zove se "app", sve je sad "app", nije nego. PWA je web sajt koji je dosta klijentski orjentisan i trebao bi da ima offline mode (sto ce reci, da je JS svestan da je offline i da postupi u skladu sa tim). Ne radi u win 10 preko edge-ovog engine-a nego radi u browser-u u kojem otvoris.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

Nećeš da bude web stranica koja se otvara, već aplikacija koja se instalira na telefon. Neće da kuca adresu web sajta za neki portal sa vestima, Facebook ili šta već, nego samo da pokrene aplikaciju, pa čak i ako je u pitanju App koji otvara stranu sajta prilagođenu za prikaz na mobilnom).

Da bi bilo jasnije, recimo da koristiš PhoneGap ili nešto slično (ima sad gomila tih FW za razvoj aplikcija za mobilne koristeći HTML, CSS i JS uz dodatne biblioteke, itd.), samo treba da ispoštuješ smernice za PWA, dakle aplikacija treba da radi i offline (očigledno da ne može da radi sve što i online) i da ispoštuje sve ostale smernice za PWA, ali se ne radi o web strani koja se otvara (SPA), već o aplikaciji koju korisnik vidi kao da je "native".

Potpis

Blessed are those who can laugh at themselves, for they shall never cease to be amused.

@Shadowed
Hm, otvaranje PWA u bilo kom browseru je nista vise nego otvaranje web aplikacije. No, PWA ima neke feature koje mozes da iskoristis a koje ne mozes u standardnoj web app (cashiranje stranica/resursa, notifikacije, interakcija sa OS). No, to je ako otvoris PWA u browseru (drugim recima to je tvoj web app + onaj maifest fajl), ali ako recimo pristupis PWA iz web store-a, i "downloadujes" na svoj racunar, u tom slucaju PWA ce se pozvati kao standalone windows aplikacija (sto je inace i cela poenta PWA da izgleda kao native) koji se u win10 poziva preko WWAHost procesa koji koristi EdgeHtml za rendering, tj. verovatno isiti taj rendering engine koji imas u Edge-u (najbolje sto sam nasao da pise o tome je na ovom blogu)

@mjanjic
Jasno je da PWA treba da omoguci offline mode, samo sto je to poprilican buzzword, posto u vecini slucajeva offline mode (osim u nekim trivijalnim aplikacijama) ne moze da radi apsolutno nista, osim da prikaze neku genericku poruku "app is offline", sto bas i nije neka korist :)

No, mislim da znam cemu sluzi PWA, i sta mu je target, sad, da li to nekom treba ili ne, to je vec na svakom da odluci (u slucaju "mog" klijenta, PWA ima smisla samo zbog ono dela gde se tera kao standalone applikacija jer ukoliko bi isli na browsers samo, onda bi u slucaju da nema trenutno konekcije morao da klikce dok mu se ne ucita web app :))

PWA je isto što i SPA plus offline režim. Poenta je da se kostur aplikacije kešira u lokalu pa kod pokretanja da se ne učitava svaki put nego samo goli podaci. Drugim rečima, PWA sajt će se otvoriti i kad smo potpuno offline, čak i prikazati neki sadržaj koji je predefinisan ali čim zatrebaju neki podaci izaći će poruka da smo offline. Klasičan SPA se uopšte neće ni učitati ako smo offline već će se pokazati ugly brauzer poruka. Dakle PWA je samo mala nadogradnja na SPA koja omogućava da sajtovi dobiju neke osobine aplikacija. Šta se u praksi dobija: malo brži startup, mogućnost da se izvuče ikonica i da funkcioniše kao aplikacija (dakle ne mora da se koristi kroz brauzer), zatim ima i neke funkcije za notifikacije... generalno ništa specijalno i bez čega se ne može ali s obzirom da google gura tu priču, vrlo moguće da će postati novi standard pa ako uradiš nešto mimo toga, bićeš javno oblaćen ;)

@negyxo
Ono o cemu sam pisao je uopsteno o PWA. To sto ti pominjes je specijalan slucaj koji se odnosi samo na Win10 Store aplikacije za koje nisam ni siguran da bi uopste trebalo da se zovu PWA (jesu html/css/js ali su aplikacije koje se instalriaju, nesto kao Electron). OK, mozda tebi bas to treba i to je ok, ali je to specijalan slucaj. I na tom linku koji si dao je prikazana na slici razlika izmedju PWA uopsteno i Win10 App "PWA".

Primer PWA mozes videti recimo ovde. U pitanju je obican blog ali probaj nakon sto ga otvoris da odes offline i otvoris neki clanak ili bilo koji interni link (osim RSS feed-a :) ). Trebalo bi da ti ucita bez problema. Takodje, mozes da uradis i refres na homepage-u, normalno se ucitava. Naravno, ucitavanje dodatnih linkova ka starijim clancima nece raditi dok se ne vratis online (nije skinuo kompletan blog).

Mozes videti i druge primere ovde - https://pwa-directory.appspot.com

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

Hm, koliko sam ja skontao PWA bi trebalo da je univerzalan, samim tim, na windowsu koristis windows-ovu implementaciju (tacnije ti nista ne diras, to sam OS handluje). Recimo Chrome OS ima podrsku (imas takodje google-ov store), linux verovatno ima podsku, mac tj. iOS itd.

Poenta je da kada runnujes kao aplikaciju, to mora da ide kroz neki process i mozda je to specijalan slucaj, ali ja bih rekao da je taj specijalan slucaj u stvari bas i namena PWA - da pokrenes kao "native" aplikaciju, iz browsera i sada mozes da vidis web app, samo ukucas adresu (jeste nemas offline mode, tj. nista se nece ucitati, ali ako recimo runnujes SPA, onda ce se ucitiati cela aplikacija kada is online, a ako izmedju nemas konekciju to handlujes kroz SPA, i sve dok ne opalis refresh apsolutno nema nikakvih issue to da li imas offline mode ili ne).

Ne, ne, ti imas offline mod u browser-u :)
Eno, onaj blog da otvorim sad u ff-u dok sam offline otvorice lepo. I radice sve osim, naravno, dovlacenja novih podataka. Evo, sad sam probao, cak i postove koji se ucitavaju ajax-om kad skrolujes ucita u offline modu jer sam ih jednom vec ucitao. Univerzalnost se ogleda u tome da je stranica napravljena tako da je responsive i radi u razlicitim browser-ima na razlicitim OS. Nema potrebe za ikakvom native aplikacijom (browser-i sada provide-uju location, offline storage i sl.). To sto MS gura neku svoju pricu sa Win10 je... druga prica :)

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

Kao što rekoh, može da bude "obična" Web strana koja je u stvari SPA, ali obična web strana nema pristup kameri, žiroskopu i ko zna još čemu sve na mobilnom uređaju (mada postoje dodatne biblioteke za to, ali opet može da zavisi od platforme, jezika i razvojnog okruženja), a ovo predviđa da se može koristiti sve što i kod native aplikacije, a da u stvari bude maltene kao SPA, samo ne otvaraš u browser-u.

Takođe, ako se radi o aplikaciji, ona može da bude aktivna u pozadini i da u momentu kad dobiješ signal (ako si u nekoj zabiti, ili kada se nakačiš na neki wifi ako podatke vučeš samo preko wifi) povuče nove podatke sa bloga, pa kad je kasnije otvoriš, imaćeš najnovije podatke iako nemaš signal, dok ne znam baš kod klasične Web strane kako ćeš to da izvedeš, a da ti strana ne bude otvorena u browser-u (što povlači da i browser bude otvoren sve vreme).

Potpis

Blessed are those who can laugh at themselves, for they shall never cease to be amused.

Mnogim od tih stvari moze da pristupi. Browser-i sada to prosledjuju (uz dozvolu korisnika), kako na desktop-u, tako na mobilnim uredjajima. Idi na blic-ov sajt i pitace te da dozvolis da ti salje notifikacije. Idi na neki sajt sa mapama i pitace te da dozvolis da vidi tvoju lokaciju (mozda ne odmah, nego ako kliknes nesto tipa "nadji me na mapi"), itd.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

Upravo sto Shadowed kaze "PWA" je najobicniji buzzword.

I nemojte nikad vise da kazete da web site/PWA ili stogod takvo "moze sve kao i native app" jer to vredja inteligenciju. Samo pogledajte svoj browser.

Al' može da izgleda kao da može ;)


Notifikacije su postojale na desktop-u još pre neku godinu (za Gmail, ako se dobro sećam), samo većina korisnika nije bila zainteresovana da to aktivira ili nije ni znala za to, tako da to nije nešto novo i revolucionarno.

@Shadow
Sad će sajt sa mapama da vidi gde si preko desktop browser-a, naročito ko je na kablovskom netu pa je NAT-ovan, ne znam ni da li ADSL korisnicima sa javnom adresom radi kako treba (nisam sad kod kuće da probam), tako da nema ništa bez GPS modula.

Potpis

Blessed are those who can laugh at themselves, for they shall never cease to be amused.

@Shadowed
Ja i dalje ne vidim da je tako kao sto pises. PWA treba da je standardizovan nacin da web app runnujes kao "native" app. Drugim recima, da nemas browser (iako je u pozadini u stvari neki browser engine).

Pogledaj ove linkove:
mozila: https://developer.mozilla.org/...s/Progressive/Installable_PWAs
google: https://developers.google.com/web/progressive-web-apps/desktop

Ove stvari nisu vezane za windows, a opet isto rade sto windows ("bez" browsera).

Mislim, meni bar deluje logicno, ako PWA donosi samo offline mode za web app u browseru, pa onda sumnjam da bi se neko u opste mucio da to podrzi, skoro identicno sve moze kroz SPA, ali PWA bi trebalo da donese integraciju web app unutar OS (ono "native" support :))

Nije poenta u tome koliko ce precizno odrediti vec u tome da browser expose-uje location service OS-a web strani ukoliko to dozvolis. Koliko je je taj location service precizan je irelevantno za ovu pricu (a zavisi od toga da li specijalizovani hardver ili ne).


@negyxo, procitacu kasnije te linkove ali koliko na brzinu vidim, rekao bih da ti gledas jedan podskup PWA aplikacija misleci da je to kompletan skup.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

PWA nije isto što i native aplikacija. I dalje mora da postoji browser na operativnom sistemu koji omogućava pokretanje PWA aplikacije.

MS je uključio Edge u podršku i to možemo videti ovde: https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/get-started

Može čak i da se aplikacija "uploaduje" na Store: https://docs.microsoft.com/en-...ssive-web-apps/microsoft-store

Pogledao sam sada detaljnije. To je i dalje obicna web aplikacija, na web serveru, kao i bilo koji drugi sajt. Jedino sto tu imas je manifest fajl koji browser ucita i dobije informacije tipa koja je ikona, koji title i sl. i onda mozes da dodas shortcut na homescreen. Kad pokrenes shortcut, pokrene se browser i otvori ti sajt. Prakticno nabudzeni bookmark. manifest moze da ima instrukciju da se browser otvori fullscreen da bi sve izgledalo kao aplikacija.
No, to je sve i dalje obican web sajt. Moze da radi offline u izvesnoj meri, ali to nema nikakve veze sa ovim iznad. Ima veze sa tim sto je sajt napravljen da koristi local storage u browser-u za kesiranje.

PWA je jednostavno skup osobina web sajta. Mozes implementirati neke od njih ili sve. Takodje, neki browser-i imaju podrsku za "instaliranje" PWA pri cemu je to instaliranje postavljanje naprednije varijante bookmark-a.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

Evo, pogledah sad, i onaj blog koji sam ranije linkovao (https://karlherrick.com/ ) ima podrsku za to. Kad ga otvorim u Firefox-u na mobilnom telefonu, imam Home ikonu u addressbar-u i mogu da dodam na homescreen. Kad ga odatle otvorim, otvori se full screen. Al' to je i dalje taj isti sajt :)

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac