A progressive web app for digital signage

Full text

(1)UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO. Dejan Rupnik. NAPREDUJOČA SPLETNA APLIKACIJA ZA DIGITALNO SPOROČANJE Diplomsko delo. Maribor, avgust 2017.

(2) UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO. Dejan Rupnik. NAPREDUJOČA SPLETNA APLIKACIJA ZA DIGITALNO SPOROČANJE Diplomsko delo. Maribor, avgust 2017.

(3) Napredujoča spletna aplikacija za digitalno sporočanje Diplomsko delo. Študent:. Dejan Rupnik. Študijski program:. Visokošolski strokovni program Računalništvo in informacijske tehnologije. Mentor:. doc. dr. Aleš Zamuda.

(4)

(5) Zahvaljujem se doc. dr. Alešu Zamudi za svetovanje in usmerjanje pri izdelavi diplomskega dela.. Posebna zahvala gre tudi mojima staršema ter Francu in Ivanki Roškar za podporo skozi vsa študijska leta.. To delo je nadaljevanje raziskovanja tehnologij spletnih aplikacij, katerega začetek je bil projekt PKPZ IMOPADS, ki mi je dal začetni vpogled v to industrijo in osnovno znanje za začetek tega diplomskega dela.. ii.

(6) Napredujoča spletna aplikacija za digitalno sporočanje Ključne besede: napredujoča, spletna aplikacija, storitveni delavci, digitalno sporočanje. UDK:. 004.774.6(043.2). Povzetek. V diplomskem delu je pokazano in razloženo delovanje napredujočih spletnih aplikacij in kako se te primerjajo z domorodnimi aplikacijami mobilnih operacijskih sistemov. Tehnologijo bomo razložili skozi primer aplikacije za digitalno sporočanje, ob tem pa se bo bralec tega diplomskega dela seznanil tudi z drugimi uporabnimi tehnologijami in orodji, ki razvijalcem pomagajo pri implementaciji napredujočih aplikacij. Podrobneje so razloženi koncepti digitalnega sporočanja, napredujočih spletnih aplikacij in storitvenih delavcev. Ko je bralec seznanjen s temi pojmi, se delo nadaljuje z opisom implementacije, ki vodi skozi težave, ki so nastale med implementacijo in kako so bile te odpravljene. V zaključku je še razloženo, kakšen vpliv imajo napredujoče spletne aplikacije na trg spletnih aplikacij in s katerimi tehnologijami lahko še dodatno izboljšamo uporabniško izkušnjo.. iii.

(7) A Progressive Web App for Digital Signage Key words: progressive, web app, service workers, digital signage. UDK:. 004.774.6(043.2). Abstract. The thesis shows and explains the Progressive Web Apps' functionalities and how they compare against their native mobile counterparts. We explain this technology through an example of an app for Digital Signage. At the same time the reader gets introduced to other useful technologies and tools, that help developers implement the Progressive Web Apps. The concepts of Digital Signage, PWA and Service Workers are thoroughly explained and once the reader gets acquainted with the said terms the work continues with the description of the implemetation of our app and outlines the problems that occured and how they were resolved. At the very end, we explain the influence of the Progressive Web Apps on the web aplications market and which technologies can further improve the user experience.. iv.

(8) Kazalo vsebine 1 Uvod .............................................................................................................................. 1 2 Sorodna dela ................................................................................................................. 3 2.1 Digitalno sporočanje ................................................................................................ 3 2.2 Napredujoče spletne aplikacije ................................................................................ 4 2.3 Storitveni delavci ..................................................................................................... 6 2.3 Orodja in programske knjižnice za razvoj aplikacije ................................................. 7 3 Implementacija rešitve ..................................................................................................10 3.1 Uporabniški vmesnik ..............................................................................................10 3.2 Skripte za delovanje v ozadju .................................................................................14 3.3 Storitveni delavec ...................................................................................................17 4 Rezultati........................................................................................................................21 5 Sklep ............................................................................................................................27 Literatura .........................................................................................................................29. v.

(9) Kazalo slik Slika 2. 1: Ukazi, potrebni za namestitev React aplikacije. .................................................... 8 Slika 3. 1: Primer generiranega poročila naše aplikacije. ……………………………………………….. 11 Slika 3. 2: Osnutek uporabniškega vmesnika aplikacije. ..................................................... 12 Slika 3. 3: Aplikacija z manjšimi karticami, po izboru trgovine v stranskem meniju. Okoli kartic se vidijo orodna vrstica, stranski meni in glavno odlagališče. [51][52] ..................... 13 Slika 3. 4: Objekt, v katerem hranimo spremenljivke objektov, katere uporabljamo kot vzorce pri nalaganju in kasneje shranjevanju podatkov iz podatkovne baze. .................... 14 Slika 3. 5: S tem odsekom kode pridobimo našo podatkovno bazo JSON. ......................... 15 Slika 3. 6: Prototip podatkovne baze na QuarkBackend, v JSON obliki............................... 15 Slika 3. 7: Funkcija, s katero naložimo kartice v localForage............................................... 16 Slika 3. 8: Podatke iz localForage poiščemo takoj po registraciji storitvenega delavca...... 16 Slika 3. 9: Objekti in spremenljivke našega storitvenega delavca. ...................................... 17 Slika 3. 10: Sprotno shranjevanje spletnih strani, ki jih dobimo v tabeli nizov URL naslovov. ............................................................................................................................................. 18 Slika 3. 11: Pridobivanje podatkov v ozadju. ....................................................................... 19 Slika 3. 12: Pridobivanje podatkov s Promises in Fetch. Na koncu podatke pošljemo vsem odjemalcem. ........................................................................................................................ 20 Slika 3. 13: Prenos podatkov od prvem obisku aplikacije. .................................................. 23 Slika 3. 14: Prenos podatkov pri drugem obisku strani. ...................................................... 24 Slika 3. 15: Obisk aplikacije, ko nimamo spletne povezave. ............................................... 24 Slika 3. 16: Stanje podpore za delovanje v nepovezanem načinu v različnih brskalnikih. (25.08.2017) [7]. .................................................................................................................. 26. vi.

(10) Seznam uporabljenih kratic. PWA – Progressive Web Apps (slo.: napredujoča spletna aplikacija) DS – Digital Signage (slo.: digitalno sporočanje) FPS – Frames Per Second (slo.: sličic na sekundo) CSS – Cascading Style Sheets HTML – Hyper Text Markup Language JS – JavaScript UWP – Universal Windows Platform WP – Windows Phone MS – Microsoft JSON – Javascript Object Notation Idb – Indexed Database XML – eXtensible Markup Language XHR – XML HttpRequest SW – Service Worker (slo.: storitveni delavec) GUI – Graphical User Interface (slo.: grafični vmesnik) UX – User Experience (slo.: uporabniška izkušnja) OS – operacijski sistem GPS – Global Positioning System URL – Uniform Resource Locator NFC – Near Field Communication HTTPS – HyperText Transfer Protocol Secure ES6 – ECMAScript 6 DOM – Document Object Model PKPZ – Po kreativni poti do znanja IMOPADS – Interaktivni multimedijski oglasni panoji — Adin DS API – Application Programming Interface (slo: aplikacijski programski vmesnik). vii.

(11) 1 Uvod. V želji po hibridnih računalniško interaktivnih aplikacijah, ki temeljijo na odprtih standardih, za katere bi želeli, da delujejo, tako na osebnih računalnikih, kot na mobilnih napravah, se lahko srečamo z mnogimi ovirami. Za takšne aplikacije želimo, da bi čim bolje izkoriščale sistemske vire, imele odziven in sodoben grafični vmesnik ter možnosti uporabe v sistem vgrajenih funkcij, kot so: obvestila (angl. notifications), uporaba strojne opreme (Bluetooth, GPS, ipd.), dostop do pomnilnika naprave itd ... Trenutno se lahko razvijalci odločajo med domorodnimi (angl. native) aplikacijami, spletnimi aplikacijami ter hibridnimi rešitvami. [2] Domorodne aplikacije najbolje izkoriščajo sistemske vire in dovoljujejo največ svobode, ko pride do izdelave aplikacij ter uporabe raznih funkcionalnosti. Vendar pa je potrebno za vsak operacijski sistem posebej izdelati ločeno aplikacijo, kar je lahko drago, tako za razvoj kot za vzdrževanje. [3] Po navadi se izdelajo tri aplikacije: ena za iOS, druga za Android, tretja (ki je namenjena uporabnikom osebnih računalnikov) se razvije kot spletna stran. Nekateri se odločijo samo za spletno aplikacijo, pri čemer so razvijalci zelo omejeni, saj ne morejo uporabljati vseh funkcionalnosti, ki jih prinaša strojna oprema naprave, ter dosti slabše izkoriščajo sistemske vire. Prav tako so v večini primerov precej manj odzivne, v primerjavi z domorodnimi. [4]. Kot tretja možnost pa se tu pojavljajo tudi razne hibridne rešitve (Ionic, React Native, ipd.), kjer gradimo spletne aplikacije in nam programske knjižnice omogočijo klice/uporabo domorodnih gradnikov in elementov. [5][6] Tu je še vedno potrebno izdelati tri aplikacije, kot pri izdelavi domorodnih aplikacij, a je zaradi uporabe istega programskega jezika/knjižnice kodo lažje »reciklirati«. [7][8] V letu 2015 je Google predstavil še četrto možnost — »Progressive Web Apps« (v nadaljevanju: »PWA«), ki predstavljajo precej obetavno alternativo domorodnim aplikacijam. [2][9] Ta tip aplikacij je trenutno dobro podprt le na njihovem mobilnem operacijskem sistemu Android. [10] Pri PWA gre za spletno stran/aplikacijo, ki je zmožna uporabljati nekatere funkcionalnosti domorodnih aplikacij, kot so obvestila, ter izkoriščati. 1.

(12) strojno opremo (GPS, kamero in mikrofon). [11][12][13] Treba je vedeti, da smo tu še vedno omejeni s podporo mobilnih brskalnikov, a le-ta na srečo napreduje z meseca v mesec — Google Chrome trenutno (avgust 2017) podpira že večino funkcionalnosti, z izjemo bolj kompleksnih, kot so Bluetooth in NFC. [10]. Cilj te diplomske naloge je zgraditi aplikacijo za uporabo pri digitalnem sporočanju (angl. Digital Signage) po konceptu PWA ter raziskati, kako se obnese razvoj/uporaba tovrstnih aplikacij v primerjavi z domorodnimi. Raziskali bomo, s kakšnimi ovirami se srečujemo pri izgradnji aplikacij PWA, ter v katerih primerih (če ti obstajajo) se razvoj »klasičnih« mobilnih aplikacij ne splača več. [14]. Prav tako bomo raziskali tehnologijo, imenovano »Service Workers« (SW, oziroma t.i. »storitveni delavci«), ki je del koncepta PWA. [11][15] Predelali bomo povezave med SW in predpomnenjem (angl. cacheing) in kako se aplikacija obnese, ko nima povezave na svetovni splet oziroma lokalnega strežnika (angl. offline mode). [16] Čeprav aplikacija DS potrebuje strežnik, nam storitveni delavci omogočajo, da preusmerimo URL na predpomnjeno verzijo strani s tega URL-ja.. 2.

(13) 2 Sorodna dela. 2.1 Digitalno sporočanje. Digitalno sporočanje je vrsta sporočanja, ki počasi nadomešča klasične plakate in oglasne panoje. Je izredno hitro rastoč trg, ki bo po napovedih MarketsandMarkets od leta 2017 do 2023 zrastel s preračunanih 16,74 milijarde EUR na preračunanih 28,03 milijarde EUR. Čeprav si pod tem izrazom večinoma predstavljamo velike zaslone, na katerih se izpisujejo razni napisi in slike, je v bistvu vsaka elektronska naprava z zaslonom lahko uporabljena za tovrstno sporočanje.. Za uspešno komunikacijo z ljudmi je potrebno pridobiti njihovo pozornost. Stalna uporaba televizijskih sprejemnikov in računalnikov sta nas navadila, da se, ko iščemo informacije, oziramo na zaslone. Zaradi tega je izbira digitalnega sporočanja povsem jasna, če želimo doseči širšo publiko (»To communicate with people, you have to get their attention. Watching TV and using computers has trained us to look at screens for information, so digital signage is a natural choice for reaching large audiences.«). [17]. Digitalno sporočanje je cenovno ugodnejše kot tiskanje plakatov, okolju bolj prijazno, poleg tega pa se da novice hitreje posodabljati, zamenjati, popraviti. Za razliko od tiskanih plakatov so lahko aplikacije digitalnega sporočanja opremljene z zasloni na dotik, ki uporabniku omogočajo interakcijo in s tem več informacij.. Mnogi elektronski panoji so opremljeni s kamerami in drugimi senzorji, s katerimi spremljajo okolico. Z njimi lahko na primer ocenjujejo starost nakupovalcev v nakupovalnem središču in skozi te podatke prikazujejo izdelke in informacije, ki bi glede na statistiko bolj zanimala nakupovalce. [18]. 3.

(14) Digitalno sporočanje se največkrat uporablja za prikaz javnih informacij (novic, vremena, javnih prevozov, itd.), informacij znotraj podjetja, oglaševanja produktov in storitev, v nakupovalnih središčih. [18]. 2.2 Napredujoče spletne aplikacije. Napredujoče spletne aplikacije so odličen primer uspešne kombinacije domorodnih (angl. native) in spletnih (angl. web) aplikacij. Omogočajo polno funkcionalnost takoj od prve uporabe, brez potrebe nameščanja preko trgovine z aplikacijami. Zaradi tega so lažje dostopne za uporabnika. Prav tako, ker so napisane v programskem jeziku JavaScript, delujejo na vseh operacijskih sistemih ter vseh prevladujočih brskalnikih (tako namiznih, kot mobilnih). [19]. Dobra PWA aplikacija se načeloma lahko naloži/odpre celo hitreje, kot domorodna aplikacija (razen ob prvem zagonu). Reši nas iz situacij, ko naša mobilna naprava zaznava, da je v omrežju, a ima kljub temu prešibek signal, da bi lahko dejansko kaj naložila. [20]. Napredne spletne aplikacije se imenujejo »napredne« zaradi tega, ker se uporabniška izkušnja izboljšuje glede na to, kaj nam omogoča brskalnik oziroma naša naprava. To pomeni, da implementacija določene funkcionalnosti v aplikaciji, čeprav je vsi brskalniki ne podpirajo, ne onemogoči uporabnikom možnosti uporabe celotne aplikacije — omejena je samo uporaba tistih funkcionalnosti, za katere strojna oziroma programska oprema naše naprave nima podpore.. Zaradi dostopa do nekaterih funkcionalnosti lahko dosežemo, da se aplikacija, tako po videzu kot po funkcionalnosti, zelo približa domorodni uporabniški izkušnji. Temu prispevajo tudi nekatere funkcije ES6.. 4.

(15) Za naprednejše funkcionalnosti aplikacije poskrbimo s tako imenovanimi »storitvenimi delavci« (angl. service workers). To so skripte JavaScript, ki delujejo v ozadju aplikacije in upravljajo z raznimi funkcionalnostmi, ki jih napiše programer. To vključuje lokalno skladiščenje spletne strani, ki omogoča delovanje brez omrežne povezave (angl. offlinemode), pošiljanje sporočil na strežnik, upravljanje s kamero itn ... Več o storitvenih delavcih bo omenjeno v naslednjem podpoglavju.. Napredujoče spletne aplikacije imajo nekaj osnovnih kriterijev, katerim morajo slediti. Nekaj najbolj ključnih [21]: . stran mora biti dosegljiva preko protokola HTTPS (HyperText Transfer Protocol Secure),. . teči mora gladko na tablicah in mobilnih napravah,. . s pomočjo storitvenega delavca vsaj delno omogočimo delovanje aplikacije tudi, ko nimamo podatkovne povezave,. . aplikacija ima prav tako svojo datoteko imenovano »manifest«, s katero lahko omogočimo dodajanje aplikacije na domač zaslon mobilne naprave,. . hitro nalaganje, čeprav smo v omrežju 3G,. . ter podpora več različnim brskalnikom.. Vizija Googla in drugih razvijalcev je, da sčasoma zamenjajo »klasične« spletne in v določenih primerih tudi mobilne aplikacije. Microsoft je jeseni 2012 z izdajo operacijskega sistema Windows 8 predstavil platformo Universal Windows Platform (krajše: UWP). [22] Ta platforma omogoča razvijalcem razvoj aplikacij, ki delujejo na vseh operacijskih sistemih Windows, od različice Windows 8 naprej. To vključuje verzije za namizne računalnike, strežnike in mobilne naprave. Slabost te platforme je, da tovrstne aplikacije delujejo le v okolju Windows, ter da Microsoftov mobilni operacijski sistem, Windows Phone (krajše: WP), ni nikoli dosegel visoke stopnje priljubljenosti (po podatkih za Q4 2016, je imela samo 0,3% tržni delež, 2017 pa so jo pri Microsoftu celo ukinili, zaradi česar razvijalci nikoli niso imeli oziroma nimajo razlogov, da bi razvijali za to platformo. [23] PWA omogočajo točno to, kar počnejo aplikacije UWP, z razliko da delujejo med različnimi operacijskimi sistemi,. 5.

(16) ter brskalniki, s čimer lahko razvijalci dosežejo precej večjo ciljno publiko. Microsoft in razvojni team za Microsoft Edge sta objavila, da je podpora za aplikacije PWA v njihovem brskalniku Edge izredno visoka prioriteta. Razvijalci pridobivamo vedno več možnosti in podpore za to platformo. [24] V zaostanku je trenutno Apple z njihovim brskalnikom Safari, ki trenutno ne podpira še nobene podpore aplikacijam PWA, a je tu pomembno omeniti, da so avgusta 2017 razvijalci prvič uradno naznanili, da je razvoj podpore za te aplikacije že v teku. [25]. 2.3 Storitveni delavci. Storitveni delavci so skripte JavaScript, ki nam omogočajo dostop do funkcionalnosti, ki so bile prej možne le v domorodnih aplikacijah. Te skripte se ob zagonu aplikacije registrirajo v brskalniku odjemalca in nato, s pomočjo komuniciranja med drugimi skriptami, skrbijo za delovanje raznih opravil. Med ta opravila spadajo: shranjevanje datotek v lokalnem predpomnilniku (za delovanje v stanju brez omrežne povezave), sinhroniziranje v ozadju in podpora za domorodni način delovanja.. Ena glavnih omejitev storitvenih delavcev je ta, da jih ne moremo poganjati na nezaščitenih spletnih mestih — se pravi na mestih, ki niso registrirana na naslovih HTTPS (HyperText Transfer Protocol Secure). To je pomembno predvsem s stališča varnosti.. Življenjski cikel storitvenega delavca se začne z nameščanjem (angl. installing). V tem fazi preverimo, če je pred novim storitvenim delavcem registriran že kateri drugi in če sta si med seboj različna. Ko se SW naloži, začne čakati, da se odjemalci, ki uporabljajo druge storitvene delavce, zaprejo. Nato se storitveni delavec aktivira. V postopku aktivacije lahko tudi pobrišemo predpomnjene podatke starejših verzij. Ko se SW aktivira, lahko začne upravljati različne dogodke (angl. event). Življenjski cikel se zaključi, ko želi aplikacija registrirati novega storitvenega delavca. Takrat stari postane odvečen, zaradi česar se ga odstrani in zamenja z novim. [26]. 6.

(17) Storitveni delavci omogočajo več kot le možnost brez omrežnega načina delovanja, čeprav se to največkrat omenja, ko govorimo o njih. Ena od izredno pomembnih funkcionalnosti je sinhroniziranje v ozadju. [27] Ta poskrbi, da se funkcija izvede, tudi če med izvajanjem zapremo zavihek oziroma navigiramo drugam. To smo združili še s tako imenovanimi »Promises«, ki so prišli skupaj z ES6 in omogočajo izvajanje asinhronih niti ter nadzora nad njimi. [28] Storitveni delavci prav tak omogočajo nadzor nad več zavihki iste aplikacije. Tako ni potrebno, da se za vsak zavihek registrira drug storitveni delavec, temveč je dovolj le tisti, ki se je registriral s prvim zavihkom. Tako lahko z enim SW pošljemo posodobljene podatke iz podatkovne baze vsem odprtim zavihkom aplikacije (slika 3.13). [29] S tem prihranimo prenos podatkov, prav tako pa ohranjamo podatke med zavihki sinhronizirane.. 2.3 Orodja in programske knjižnice za razvoj aplikacije. Pri napredujoči spletni aplikaciji se vse začne že pri samem izgledu. Če smo želeli, da PWA aplikacije sčasoma nadomestijo domorodne, moramo poskrbeti, da izgledajo in dajejo enak občutek odzivnosti, kot le-te. [30]. Nadzor nad velikim številom različnih grafičnih elementov lahko v aplikaciji, ki uporablja izključno »čisti« (angl. tudi pure oz. vanilla) JavaScript in CSS, hitro postane velik problem, predvsem pri vzdrževanju oziroma nadgradnji kode. Velik nabor različnih elementov je pri aplikaciji, ki se uporablja za namene digitalnega sporočanja, nekaj povsem običajnega. [1][31]. Zato je za kompleksnejše aplikacije pametno izbrati ogrodje (angl. framework), kot sta React JS (tudi samo React) ali PREACT (okrnjena verzija React-a). [32] Ogrodje React so razvili pri podjetju Facebook z namenom, da bi si olajšali delo nad urejanjem različnih elementov, kot so objave, oglasi in ostale komponente, ki sestavljajo njihove aplikacije. [33] Ena od zelo znanih aplikacij, ki uporablja React in je hkrati napredujoča spletna aplikacija, je Twitter Lite. [34][35]. 7.

(18) React omogoča, da si naložimo že pripravljen paket, imenovan »create-react-app«. [36] Za namestitev se mora uporabiti orodje za namestitev paketov (na primer: npm, ki je del okolja Node.js.. Slika 2. 1: Ukazi, potrebni za namestitev React aplikacije.. Zadnja vrstica na sliki 2.1 služi za zagon paketa. V paketu najdemo večino knjižnic, ki jih potrebujemo za izdelavo React in PWA aplikacije, saj je maja 2017 Facebook v sodelovanju z Googlom, dodal podporo v ta paket, kar so tudi oznanili na konferenci Google I/O'17. [36]. Ker je glavna tema tega diplomskega dela PWA, smo za referenco vzeli drug paket, imenovan »Web Starter Kit«. [37] Tega je izdal Google in ima notri že dodan osnoven CSS, HTML in knjižnice, ki so zelo uporabne oz. obvezne pri izgradnji PWA. Ta vključuje ikone, ki jih uporabnik doda preko brskalnika v meni na svoji napravi in preko katere lahko v prihodnje direktno dostopa do aplikacije. V pomoč nam je bila tudi Googlova uradna dokumentacija ter navodila. [38] Tu so razloženi koncepti, katerih se aplikacija mora držati, da jo lahko kličemo napredujoča spletna aplikacija. S tem smo naredili hitrejši korak proti izgradnji končne rešitve.. Za testiranje odzivnosti aplikacije smo uporabljali orodje Lighthouse, ki ga lahko namestimo kot vtičnik za brskalnik Google Chrome. Ko Lighthouse zaženemo, nam ta požene spletno stran čez več različnih testov, ter na koncu generira poročilo, če naša aplikacija ustreza kriterijem PWA in kako jo lahko izboljšamo. Na sliki 3.1 lahko vidimo primer poročila ene od verzij naše aplikacije. Za shranjevanje podatkov v predpomnilnik brskalnika smo uporabili knjižnico, imenovano 'localForage'. [39] Ta nam omogoča shranjevane določenih JavaScript objektov v lokalni. 8.

(19) shrambi brskalnika. [40] LocalForage je samo ovojnica za podatkovno bazo IndexedDB (krajše: idb). Deluje na zelo podoben način kot 'localStorage', ampak omogoča asinhrono shranjevanje tipov, ki jih lahko shranimo in podporo za več različnih vrst podatkovnih tipov.. 9.

(20) 3 Implementacija rešitve. 3.1 Uporabniški vmesnik. Naša aplikacija je namenjena kot interaktivni medij za prikaz oglasov in obvestil za trgovski center, kjer najdemo več različnih trgovin. Aplikacija se uporablja na elektronskih panojih/zaslonih, lahko pa jo uporabljamo tudi na mobilnih napravah. Ta aplikacija se lahko uporablja kot nadomestek za »tradicionalne« oglasne kataloge in letake, kot jih po navadi zasledimo v tiskani obliki. [1]. Najprej smo zgradili tako imenovan »App Shell« oziroma, po slovensko, lupino aplikacije. To sestavljajo trije ključni elementi: stranski meni, orodna vrstica, ter »odlagališča« (angl. containers), kamor nalagamo vsebino iz podatkovne baze v obliki različnih gradnikov. Nekaj osnovnih. UI. gradnikov. smo. pridobili. na. straneh. GitHub,. CodePen. in. W3Schools. [41][42][43][44] To vključuje orodno vrstico, stranski meni in nekatere animacije teh elementov. Izgled stranskega menija smo priredili tako, da zasede čim manj prostora ter da s čim manj kliki/dotiki pridemo do želenih informacij. Pri izgradnji vmesnika smo si pomagali s pomočjo modela (angl. mockup), ki smo ga izdelali v programu Adobe Photoshop CC 2017. S tem smo si prihranili precej dela, saj je hitreje izdelati osnutek v programu za obdelavo grafik, kot pa da to delamo s CSS (Cascading Style Sheets) in HTML (HyperText Transfer Protocol) — osnutek je prikazan na sliki 3.2.. 10.

(21) Slika 3. 1: Primer generiranega poročila naše aplikacije.. 11.

(22) Slika 3. 2: Osnutek uporabniškega vmesnika aplikacije.. Za nekatere transformacije, s katerimi v CSS animiramo določene elemente, smo uporabili promocijo plasti (angl. layers), z lastnostjo »will-change«. [45] S tem razvijalec brskalniku namigne, da se bodo spreminjale, še preden do tega sploh pride. To omogoča brskalniku, da elemente vnaprej optimizira in pripravi, s čimer lahko precej povečamo odzivnost aplikacije. To lastnost smo uporabili le za animacijo menija. Zelo pomembno je, da se tega ne poslužujemo preveč in da »will-change« določimo le elementom, ki so najbolj uporabljani. V nasprotnem primeru lahko naša aplikacija porabi preveč sistemskih virov, s čimer jo celo upočasnimo.. V stranskem meniju smo namestili ikone logotipov trgovin, ki jih najdemo v trgovskem centru. Ob izboru določene trgovine, se nam prikažejo manjše kartice izdelkov, ki jih ta trgovina prodaja. Na spodnjem delu menija najdemo še gumb z informacijami.. V glavnem meniju smo namestili gumb za prikaz, prej omenjenega, stranskega menija. Zraven smo dodali še gumb za domačo stran ter ikono, ki uporabniku kaže stanje. 12.

(23) sinhroniziranja v ozadju — zeleni krogec pomeni, da je aplikacija sinhronizirana, rumena pove, da se sinhroniziranje trenutno izvaja, rdeča pa označuje to, da naš brskalnik oz. OS ne podpira omenjene funkcionalnosti oz. storitvenih delavcev samih.. Ko smo zgradili lupino naše aplikacije, smo začeli z izdelavo kartic, ki bodo prikazovale izdelke ter podatke o trgovinah in ostalih ponudbah (slika 3.3).. Kartico produkta smo sestavili iz dveh delov: slike izdelka in noge. Noga se nato še dodatno deli na dva dela. V prvem (levem) imamo ime izdelka, informacije o izdelku, ter informacije o akciji. Na desni pa se nahajajo cena v akciji, popust in redna cena. Izdelali smo tudi manjše verzije teh kartic, ki se prikažejo ob izboru trgovine in kartice za prikaz novic.. Slika 3. 3: Aplikacija z manjšimi karticami, po izboru trgovine v stranskem meniju. Okoli kartic se vidijo orodna vrstica, stranski meni in glavno odlagališče. [51][52]. 13.

(24) 3.2 Skripte za delovanje v ozadju. Prva funkcionalnost, ki smo jo dodali naši aplikaciji, je hitro nalaganje. Za implementacijo tega dela smo si pomagali z localForage, ki smo ga prej omenili v poglavju 2.4.. Slika 3. 4: Objekt, v katerem hranimo spremenljivke objektov, katere uporabljamo kot vzorce pri nalaganju in kasneje shranjevanju podatkov iz podatkovne baze.. Podatke hranimo na QuarkBackend (vidno na sliki 3.6). [46] Ta nam omogoča zelo priročno gostovanje JSON (JavaScript Object Notation), XML (eXtensible Markup Language) in tekstovnih datotek, z namenom prototipiranja aplikacij. Uporaba je zelo enostavna, omogoča tudi nastavitev »Access-Control-Allow-Origin«, ki je potrebna za pridobitev datotek s funkcijo »Fetch« (slika 3.5), ki je nadomestila zastareli in počasni XHR (XMLHttpRequest). [47] Slike, ki so navedene v datoteki JSON, smo naložili na Imgur, oblačno storitev za nalaganje slik. V produktni verziji tovrstne naslove nadomestimo z naslovi lastnih strežnikov oz. storitev, ki jih imamo zakupljene (Amazonove oblačne storitve). Tak strežnik, bi moral imeti tudi vlogo generiranja datotek JSON vnaprej, glede na podatke, ki bi jih sproti pridobivali iz podatkovne baze.. 14.

(25) Slika 3. 5: S tem odsekom kode pridobimo našo podatkovno bazo JSON.. Slika 3. 6: Prototip podatkovne baze na QuarkBackend, v JSON obliki.. Ko so podatki naloženi, zaženemo funkcijo »JsonToHtmlAppComponents«. Tu kloniramo elemente v objektu »app«, ki nam služijo kot vzorci za izdelavo kartic, tako kot je prikazano na sliki 3.4. V naši podatkovni bazi so izdelki razdeljeni med trgovine, zato v kartico najprej 15.

(26) naložimo podatke o trgovini. To kartico nadalje kloniramo za vsak produkt, nato pa naložimo notri še podatke o izdelku. Na koncu naložimo kartico v odlagališče aplikacije ter shranimo podatke v localForage (slika 3.7). Podatki so v obliki tabele nizov. Vsak niz vsebuje kodo HTML z vsemi, prej vnesenimi, podatki.. Slika 3. 7: Funkcija, s katero naložimo kartice v localForage.. Ko se vse pravilno naloži, shranimo podatke v localForage. Pred tem jih pretvorimo v spremenljivko tipa 'string'. Ko podatke beremo iz localForage-a, jih razčlenimo (angl. parse) nazaj v JSON objekt (slika 3.8). Ob osvežitvi strani oziroma novem zagonu, se najprej naložijo podatki iz localForage. Ko dobimo podatke iz podatkovne baze (v našem primeru je to datoteka JSON), preverimo, katere ploščice še manjkajo in katere so odvečne. V primeru, da gre za isto trgovino oziroma produkt, ne generiramo nove ploščice, temveč samo zamenjamo podatke v njih.. Slika 3. 8: Podatke iz localForage poiščemo takoj po registraciji storitvenega delavca. 16.

(27) 3.3 Storitveni delavec. Nato smo začeli z implementacijo SW, ki je poskrbel, da se je aplikacija (spletna stran) naložila na napravo tudi v primeru, če ni internetne povezave.. Slika 3. 9: Objekti in spremenljivke našega storitvenega delavca.. Storitveni delavec, ki je vključen v Web Starter Kit, ima že vključene osnovne funkcije/dogodki, ki so del vsake tovrstne skripte. To so: »install«, »activate« in »fetch«. Mi smo dodali še »message«, ki poskrbi za komunikacijo med odjemalcem in storitvenim delavcem. Na koncu smo uporabili še funkcijo »sync«, ki zagotovi, da se funkcija izvede, čeprav smo med delovanjem zaprli okno oziroma navigirali stran. Skripte, pisave, CSS, slike, in ostale datoteke, ki jih vključujemo preko značk v »index.html«, smo dodali v spremenljivko »filesToCache« (slika 3.9). Te se nato vedno naložijo v predpomnilnik, ter posodobijo skupaj s SW. Nekatere datoteke, ki se pojavljajo bolj dinamično, prestrežemo s pomočjo funkcije »hrefsToArray«. Ta shrani vse nove URL-je v tabelo nizov, nato pa to tabelo. pošljemo. v. obliki. sporočila. storitvenem. delavcu,. kateri. s. funkcijo. »self.toolbox.precache« shrani podatke z URL-ja v predpomnilnik. Funkcija, s katero smo. 17.

(28) shranjevali podatke, je vidna na sliki 3.10. Omenjena funkcija je del knjižnice »sw-toolbox« [48], ki je velika zbirka orodij za storitvene delavce, ki nam omogoča shranjevanje raznih zahtevkov med izvajanjem v lokalno, brez omrežno, kopijo. Tega načina shranjevanja se sicer poslužujemo le za bolj posebne primere/domene, ki se večkrat spreminjajo oziroma jih vključujemo dinamično.. Slika 3. 10: Sprotno shranjevanje spletnih strani, ki jih dobimo v tabeli nizov URL naslovov.. Za večino naslovov smo namreč uporabili skripto »runtime-caching.js«, v kateri smo klicali dogodek »global.toolbox.router.get«. Uporabili smo nastavitev »global.toolbox.fastest«, ki paralelno pošlje dva klica: enega v predpomnilnik in drugega na strežnik aplikacije. Uporabnik vidi tisto verzijo podatkov, kateri pridejo nazaj prvi. V kolikor je bil klic na strežnik uspešen, a se je vrnil zadnji, se podatki v predpomnilniku posodobijo in uporabnik bo videl posodobljeno verzijo ob naslednjem obisku strani. Tudi ta je del orodja »sw-toolbox«. Orodje nam omogoča tudi to, da določimo, kateri klic se pošlje prvi, oziroma da pošljemo samo en določen klic. Če bi na primer želeli zmanjšati porabo mobilnih podatkov, bi z »cacheOnly« dosegli to, da se naloži le verzija iz predpomnilnika, klica na strežnik pa ne izvedemo, tudi če je klic na predpomnilnik neuspešen.. Kot smo že omenili v poglavju 2.3, storitveni delavci omogočajo sinhroniziranje v ozadju. To izvedemo z dogodkom »Sync«, ki smo mu dodali oznako »databaseUpdate«. Naš objekt tega dogodka vsebuje tabelo URL naslovov, s katerimi dostopamo do podatkov iz podatkovne baze. Ker SW nimajo direktnega dostopa do DOM (Document Object Model) oziroma ostalih skript aplikacije, podatke pošljemo do »main.js« kot »Message« dogodek. Tu vedno pošljemo objekt z lastnostjo »action«, ki nam služi za ločevanje različnih vrst. 18.

(29) sporočil, nato pa so tu dodane še druge lastnosti, ki vsebujejo glavno vsebino sporočila. Za vsak Url pošljemo metodo Fetch, potisnemo v tabelo z imenom »sequence« (angl. niz). Nadalje s »Promise.all(sequence)« počakamo, da se vsi Fetch-i izvedejo do konca, nato pa pošljemo posodobljene podatke do odjemalca (slika 3.13 in slika 3.12). To deluje zato, ker Fetch spada pod Promises. Pomembno je, da se počaka, da se vsi izvedejo — ker so ukazi asinhroni se namreč lahko zgodi, da bo v nekaterih primerih SW poslal sporočilo odjemalcu, še preden se vsi ukazi izvedejo do konca.. Nato lahko nato s pomočjo teh podatkov posodobimo spletno stran ne, da bi potrebovali kakršno koli osveževanje aplikacije s strani brskalnika, pri čemer bi morali naložiti celoten DOM aplikacije, ter ostale komponente na novo.. Slika 3. 11: Pridobivanje podatkov v ozadju.. 19.

(30) Slika 3. 12: Pridobivanje podatkov s Promises in Fetch. Na koncu podatke pošljemo vsem odjemalcem.. 20.

(31) 4 Rezultati. Pri preizkušanju smo se osredotočili na delovanje v načinu brez podatkovne povezave. Pri tem smo si pomagali kar z orodjem Google Chrome Dev Tools, ki nam je podal dovolj informacij in jih prikazal na pregleden, in bralcu tega diplomskega dela, prijazen način.. Na slikah 3.14, 3.15 in 3.16 lahko opazujemo razlike v nalaganju skript v različnih scenarijih. Ob prvem obisku se podatki naložijo normalno s strežnika. Ker podatkov v predpomnilniku za to aplikacijo še ni, in ker storitveni delavec še ni registriran, deluje ta stran enako, kot navadna spletna stran. Na drugi sliki, ko ima aplikacija določene datoteke in podatke že shranjene v predpomnilniku, le-te s pomočjo storitvenega delavca naložimo pred podatki, ki jih dobimo preko omrežne povezave. Na sliki 3.15 (prav tako na 3.16), ko spletne povezave nimamo, se vidi, kako se pošljeta dva klica za skripte, ki so shranjene z »runetimecaching.js« in kako klic na strežnik pade, klic v predpomnilnik pa je uspešen in omogoči, da se naša aplikacija naloži brez težav in izredno hitro. Aplikacija, ki je podprta s storitvenimi delavci, mora v stanju brez omrežne povezave vrniti status 200 in naložiti datoteke s pomočjo storitvenega delavca. V stolpcu »Size« (slo: velikost) lahko vidimo, da je aplikacija prejela datoteke iz predpomnilnika. Za ostale datoteke, ki pa jih je poizkušala prejeti z omrežja in jih zaradi izpada povezave ni uspešno prejela, pa je vrnila status »failed« (slo: spodletelo).. Med našo implementacijo smo naleteli tudi na nekaj manjših težav, ki bi se jih načeloma dalo precej preprosto zaobiti. Ena taka napaka, s katero smo se soočili, je bilo osveževanje aplikacije. Storitveni delavec si je namreč zapomnil stran, zaradi česar v redkih primerih nismo mogli preveriti nove kode. Rešitev za ta problem je bila, da smo v Google Chrome Dev Tools, pod »Application« izbrali »Clear Site Data«, s čimer smo pobrisali predpomnjene podatke in omogočili, da so se naložili novi podatki. V nekaterih, še bolj redkih primerih, se je stran posodobila samo, če smo zavihek z aplikacijo zaprli in URL odprli na novo. Da nam tega ni potrebno delati ob vsaki majhni spremembi kode, lahko imena skript, na katerih. 21.

(32) trenutno delamo, umaknemo iz tabele elementov, ki jih storitveni delavec shrani, kar čisto odpravi problem. Dokončna rešitev je uporaba knjižnice »Service Worker Toolbox«. Ta nam omogoča izredno pregleden in enostaven način kontrole nad storitvenimi delavci. Lahko tudi določamo, kako dolgo si bo delavec zapomnil določene podatke in podobno.. Drugi problem, na katerega smo naleteli, je bilo predpomnjenje elementov, ki jih v stran vključujemo z uporabo URL-jev. Za ta problem isto poskrbi knjižnjica »Service Worker Toolbox« in sicer s funkcijo »global.toolbox.router.get«. Z njo lahko nastavimo določene domene, ki si jih storitveni delavec zapomni.. Imeli smo še tretji problem — doseg storitvenega delavca. Ta je bil prvi, s katerim smo se soočili in je sicer izhajal iz našega začasnega nerazumevanja dosega storitvenega delavca. Storitveni delavec namreč doseže samo datoteke, ki so del istega direktorija. Problem smo rešili tako, da smo premaknili skripto storitvenega delavca v isti direktorij, kjer se nahaja tudi mapa »node_modules« — to je mapa, v katero se nameščajo vsi projekti, ki jih namestimo s pomočjo »npm«. Tako je storitveni delavec dobil pregled nad vsemi »dodatki«, ki smo jih vpeljali v aplikacijo.. Določenim skriptam v index.html smo morali dodati oznaki »defer« oziroma »async«, s čimer smo skripte, ki nimajo kritične vloge pri delovanju aplikacije ločili iz glavne niti in jim dovolili, da se naložijo asinhrono, ne da bi ovirale nalaganje spletne strani. To nam je ponovno pridobilo nekaj sekund pri nalaganju aplikacije.. Lighthouse nam je tudi javil, da so slike precej slabo optimizirane in da bi poleg tega bilo pametno naši spletni strani dodati tako imenovan »lazy-loading«. To pomeni, da se slike naložijo šele takrat, ko so nekaj pikslov (število določi programer) oddaljene od dejanskega vidnega dela brskalnika. To izredno pospeši nalaganje in prav tako potencialno prihrani porabo podatkov, v kolikor uporabnik ne pregleda celotne strani. Sami se te rešitve nismo poslužili, ker smo se osredotočali bolj na odzivnost aplikacije in možnost brskanja med izdelki trgovin, ne da bi bilo kupcu potrebno čakati, da se podatki naložijo, je pa tovrsten. 22.

(33) način nalaganja skorajda obvezen, če bi se odločili, da zgradimo aplikacijo, ki je naložena na mobilnih napravah kupcev.. Slika 3. 13: Prenos podatkov od prvem obisku aplikacije.. S pomočjo orodja Lighthouse smo aplikacijo ves čas izboljševali, z upoštevanjem nasvetov za optimizacijo učinkovitosti. Cilj nam je bil doseči oceno čim bližje stotici, v vsaki izmed kategorij: • Progressive Web App (slo: napredujoča spletna aplikacija), • Performance (slo: učinkovitost), • Accessibility (slo: dostopnost) in • Best Practices (slo: najboljša praksa dela). S tem smo dosegli želeno hitrost in odzivnost naše napredujoče aplikacije za digitalno sporočanje.. 23.

(34) Slika 3. 14: Prenos podatkov pri drugem obisku strani.. Slika 3. 15: Obisk aplikacije, ko nimamo spletne povezave. 24.

(35) Aplikacija deluje brez interneta v brskalnikih Google Chrome, Google Chrome za Android, Opera in Mozzila Firefox. Nekateri brskalniki, kot na primer UC Browser za Android, imajo tu le delno podporo (slika 3.17).. Google. Mozilla. Microsoft. Chrome. Firefox. Edge. Lokalna obvestila (angl. local notifications). ✓. ✓. ✓. Potisna sporočila (angl. push messages). ✓. ✓. ✕. Brez omrežno delovanje (angl. offline mode). ✓. ✓. ✕. Sinhronizacija v ozadju (angl. background sync). ✓. ✕. ✕. Namestitev na domači zaslon (angl. home screen. ✓. ✕. ✕. Prepoznava govora (angl. speech recognition). ✓. ✕. ✕. Bluetooth. ✕. ✕. ✕. NFC. ✕. ✕. ✕. Senzorji bližine (angl. proximity sensors). ✕. ✓. ✕. Zajem zvoka in slike (angl. audio & video capture). ✓. ✓. ✓. Vibracija (angl. vibration). ✓. ✓. ✕. Celozaslonski način (angl. fullscreen). ✓. ✓. ✓. Zaklenjen način pripravljenosti (angl. wake lock). ✕. ✕. ✕. instalation). Legenda: ✓- funkcionalnost je podprta, ✕ - podpore trenutno še ni.. Na zgornji tabeli si lahko ogledamo še podporo za funkcionalnosti, ki jih lahko trenutno uporabljamo s pomočjo storitvenih delavcev v treh glavnih brskalnikih za namizne računalnike (Google Chrome — verzija: 59.0.3071.115, Mozilla Firefox — verzija: 55.0.2 (64bitni) in MS Edge — verzija: 40.15063.0.0) (24.08.2017). [7] Omejili smo se na to, da prikažemo tiste glavne funkcije, za katere smo menili da so ključne, oziroma imajo potencial da se uporabijo pri razvoju aplikacije za digitalno sporočanje.. 25.

(36) Slika 3. 16: Stanje podpore za delovanje v nepovezanem načinu v različnih brskalnikih. (25.08.2017) [7].. 26.

(37) 5 Sklep. Naša spletna stran ponuja mnogo funkcionalnosti, ki bi jih bilo brez uporabe storitvenih delavcev nemogoče oz. zelo težko implementirati. To vključuje namestitev aplikacije v meni aplikacij na sistemu Android, sinhronizacijo podatkov v ozadju, delovanje brez povezave (oziroma s slabo, nestabilno povezavo) na internet, podpora kretnjam (angl. gestures), potisna obvestila in celozaslonski način (angl. fullscreen). Vse to nam daje občutek, da uporabljamo »klasično« domorodno aplikacijo. Tudi hitrost nalaganja elementov po optimizaciji ne daje občutka, da imamo pred sabo spletno stran, ki teče v brskalniku. Na koncu je vse odvisno od implementacije grafičnega vmesnika ter, da stran dizajniramo tako, da se zavedamo, da bo aplikacija tekla na različnih resolucijah, velikostih zaslona ter razmerjih stranic (angl. aspect ratio). CSS omogoča uporabo »@media«, s pomočjo česar lahko nastavimo različne videze gradnikov, za različne naprave. [49] Trenutno je najbolj elegantna rešitev uporaba React-a in tako imenovanega »inline-style« načina uporabe CSS, s čimer dosežemo precej bolj pregledno in obvladljivo kodo, saj nam to omogoča, da stile shranjujemo kot spremenljivke in jih dodamo v tabelo, s katere jih dinamično kličemo in nastavljamo različnim elementom. Med delom na naši aplikaciji smo namreč opazili izredno velik problem nad pregledom kode, kar je velikokrat povzročilo tudi razne napake in dolgotrajno iskanje tako imenovanih hroščev v kodi (angl. bugs). Do te težave je prišlo kljub temu, da je imela naša aplikacija majhen nabor komponent. Napredek uporabe Reacta-a je bil opazen tudi v projektu PKPZ IMOPADS, kjer so bile komponente sistema Adin DS ločene v posamezne razrede, s čimer se je omejilo čas iskanja napak in vzpostavilo boljši pregled nad velikim številom komponent. [1]. Omenili bi še orodje Cordova, ki s pomočjo vtičnika »cordova-plugin-service-worker« omogoča uporabo storitvenih delavcev že več kot dve leti (a le za aplikacije, ki uporabljajo ogrodje Cordova). [50]. 27.

(38) Kot vse kaže, bodo podjetja morda končno dobila sistem, ki bo omogočal razvoj spletnih aplikacij, ki na vseh platformah in brskalnikih delujejo identično, brez da bi se morali vezati na določen API ali ogrodje. S tem bodo lahko znižali stroške razvoja in skrajšali čas testiranja aplikacij, hkrati pa bo koda postala tudi vedno bolj pregledna in odzivna.. Na področju spletnih aplikacij se je v zadnjih letih pojavilo veliko, zelo obetavnih rešitev, ki spreminjajo splet, kot smo ga poznali doslej — tako za uporabnike, kot tudi za razvijalce. Menimo, da je to korak v pravo smer, saj v času, kjer na trgu aplikacij prevladujejo mobilne naprave z interaktivnimi zasloni na dotik, aplikacije, ki ne uporabljajo funkcionalnosti, ki jih pridobimo z uporabo storitvenih delavcev in napredujočih spletnih aplikacij, ne ponujajo enake uporabniške izkušnje. Ker so uporabniki navajeni tovrstne interakcije z napravami, je edino logično, da se tega načina poslužujemo tudi takrat, ko jim želimo predstaviti raznorazne informacije, od oglasov pa do prometnih informacij.. 28.

(39) Literatura. [1] Zamuda Aleš, Interaktivni multimedijski oglasni panoji - Adin DS: nadgradnja transformacijskega strežnika, gradnikov prikaza in trženja: končno poročilo o doseženih ciljih: projekt »Po kreativni poti do praktičnega znanja«, Maribor: Fakulteta za elektrotehniko,. računalništvo. in. informatiko,. 2017,. dostopno. na:. https://. dk.um.si/IzpisGradiva.php?id=66900 (zadnji dostop: maj 2017). [2] Ivano Malavolta, VU University Amsterdam, Nizozemska, Oktober 2016, Beyond native apps: web technologies to the rescue! (keynote). [3] Dan Dascalescu, Medium, Why »Progressive Web Apps vs. Native« is a wrong question to ask, dostopno na: https://goo.gl/dsCcPb (zadnji dostop: maj 2017). [4] Gudla, Suresh Kumar, International World Wide Web Conferences Steering Committee, 2017, A Systematic Framework to Optimize Launch Times of Web Apps (Proceedings of the 26th International Conference on World Wide Web Companion). [5] Facebook Inc., React Native, dostopno na: https://facebook.github.io/react-native (zadnji dostop: maj 2017). [6] Ionic Framework, dostopno na: https://ionicframework.com (zadnji dostop: maj 2017). [7] Ketan Anant More in Ms.Priya Chandran, Junij 2016, Native Vs Hybrid Apps. [8] Vipul A M in Prathamesh Sonpatki, April 2016, ReactJS by Example - Building Modern Web Applications with React. [9] Antoni Zolciak, Progressive Web Applications: The Thing to Consider When Short on Resources,. InsaneLab. Blog,. dostopno. na:. http://insanelab.com/blog/web-. development/progressive-web-apps-pwa-vs-native (zadnji dostop: maj 2017). [10] Adam Bar, What Web Can Do Today, dostopno na: https://whatwebcando.today (zadnji dostop: avgust 2017). [11] Max Lynch, What are Progressive Web Apps?, dostopno na: http://blog.ionic.io/whatis-a-progressive-web-app (zadnji dostop: maj 2017).. 29.

(40) [12]. Eric. Elliot,. Medium,. Native. Apps. are. Doomed,. dostopno. https://medium.com/javascript-scene/native-apps-are-doomed-ac397148a2c0. na:. (zadnji. dostop: maj 2017). [13]. Google. Developers,. Progressive. Web. Apps,. dostopno. na:. https://developers.google.com/web/progressive-web-apps (zadnji dostop: junij 2017). [14] PWA Rocks, dostopno na: https://pwa.rocks (zadnji dostop: avgust 2017). [15] Ivano Malavolta, Giuseppe Procaccianti, Paul Noorland in Petar Vukmirović, MOBILESoft’17, Buenos Aires, Argentina, Maj 2017, Assessing the Impact of Service Workers on the Energy Efficiency of Progressive Web Apps (Proceedings of the International Conference on Mobile Software Engineering and Systems). [16] Jeffrey D. Walker in. Steven C. Chapra, Civil and Environmental Engineering. Department, Tufts University, ZDA, Februar 2014, A client-side web application for interactive environmental simulation modeling. [17] Visix, dostopno na: http://www.visix.com (zadnji dostop: maj 2017) [18] Digital Signage, dostopno na: https://en.wikipedia.org/wiki/Digital_signage (zadnji dostop: maj 2017). [19] ECMAScript 6 compatibility table, dostopno na: http://kangax.github.io/compattable/es6 (zadnji dostop: maj 2017). [20] Jake Archibald, Instant Loading: Building offline-first Progessive Web Apps (Google I/O 2016), dostopno na: https://www.youtube.com/watch?v=cmGr0RszHc8 (zadnji dostop: maj 2017). [21]. Google. Developers,. Progressive. Web. App. Checklist,. dostopno. na:. https://developers.google.com/web/progressive-web-apps/checklist (zadnji dostop: julij 2017). [22] Windows 8, dostopno na: https://en.wikipedia.org/wiki/Windows_8 (zadnji dostop: maj 2017). [23] James Vincent, 99.6 percent of new smartphones run Android or iOS, dostopno na: https://www.theverge.com/2017/2/16/14634656/android-ios-market-share-blackberry2016 (zadnji dostop: maj 2017).. 30.

(41) [24] Paul Thurrott, This is What Microsoft Said About Progressive Web Apps at Build, https://www.thurrott.com/windows/windows-10/116101/microsoft-said-progressiveweb-apps-build (zadnji dostop: maj 2017). [25] Webkit Feature Status, dostopno na: https://webkit.org/status/#specification-serviceworkers (zadnji dostop: avgust 2017). [26] MDN web docs, Using Service Workers, dostopno na: https://goo.gl/p4z4Nn (zadnji dostop: avgust 2017). [27] Jake Archibald, Introducing Background Sync, Google Developers, dostopno na: https://developers.google.com/web/updates/2015/12/background-sync (zadnji dostop: avgust 2017). [28]. Nolan. Lawson,. We. have. a. problem. with. promises,. dostopno. https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html. na:. (zadnji. dostop: avgust 2017). [29] Craig Russell, How to Send Messages Between Service Workers and Clients, dostopno na: http://craig-russell.co.uk/2016/01/29/service-worker-messaging.html#.WZ_voihJaiM (zadnji dostop: avgust 2017). [30] UI Elements at 60fps (Progressive Web Apps Summit 2016), dostopno na: https://www.youtube.com/watch?v=ZqdNgn5Huqk (zadnji dostop: maj 2017). [31]. Pohajač. Gregor,. Razvoj. predvajalnika. vsebin. digitalnega. sporočanja:. diplomsko delo univerzitetnega študijskega programa, Maribor 2016, dostopno na https://dk.um.si/IzpisGradiva.php?id=59994 (zadnji dostop: avgust 2017). [32] Production Progressive Web Apps With JavaScript Frameworks (Google I/O 2017), dostopno na: https://www.youtube.com/watch?v=aCMbSyngXB4 (zadnji dostop: maj 2017). [33] Addy Osmani, Medium, Progresssive Web Apps with React.js, dostopno na: https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-iintroduction-50679aef2b12 (zadnji dostop: junij 2017). [34] Progressive Web Apps: Great Experiences Everywhere (Google I/O 2017), dostopno na: https://www.youtube.com/watch?v=m-sCdS0sQO8 (zadnji dostop: junij 2017). [35] Twitter Lite, dostopno na: https://lite.twitter.com (zadnji dostop: maj 2017).. 31.

(42) [36] Create React App, dostopno na: https://github.com/facebookincubator/create-reactapp (zadnji dostop: maj 2017). [37] Google Inc., Web Starter Kit, dostopno na: https://github.com/google/web-starter-kit (zadnji dostop: maj 2017). [38]. Google. Developers,. Your. First. Progressive. Web. App,. https://codelabs.developers.google.com/codelabs/your-first-pwapp. dostopno (zadnji. na:. dostop:. avgust 2017). [39] LocalForage, dostopno na: https://github.com/localForage/localForage (zadnji dostop: julij 2017). [40] Addy Osmani, Medium, Offline Storage for Progressive Web Apps, dostopno na: https://medium.com/dev-channel/offline-storage-for-progressive-web-apps70d52695513c (zadnji dostop: julij 2017). [41] Abel Masila, Android Style Side Navigation In Pure JavaScript, dostopno na: http://www.cssscript.com/android-style-side-navigation-pure-javascript (zadnji dostop: maj 2017). [42] W3Schools, How TO – Snackbar / Toast, dostopno na: https://www.w3schools.com/howto/howto_js_snackbar.asp (zadnji dostop: avgust 2017). [43]. Samuel. Thornton,. Material. Design. Box. Shadows,. dostopno. na:. https://codepen.io/sdthornton/pen/wBZdXq (zadnji dostop: julij 2017) [44] Brunjo, Pure CSS Loading Bar, dostopno na: https://codepen.io/brunjo/pen/xbwVXJ (zadnji dostop: julij 2017). [45] MDN web docs, will-change, dostopno na: https://developer.mozilla.org/enUS/docs/Web/CSS/will-change (zadnji dostop: maj 2017). [46] Jake Archibald, That's so fetch!, dostopno na: https://jakearchibald.com/2015/thatsso-fetch (zadnji dostop: julij 2017). [47] QuarkBackend, dostopno na: https://quarkbackend.com (zadnji dostop: avgust 2017). [48] Service Worker Toolbox, dostopno na: https://github.com/GoogleChrome/sw-toolbox (zadnji dostop: junij 2017).. 32.

(43) [49] Creating UX that »Just Feels Right« with Progressive Web Apps (Google I/O 2017), dostopno na: https://www.youtube.com/watch?v=mmq-KVeO-uU (zadnji dostop: maj 2017). [50] Cordova Service Worker Plugin for iOS, dostopno na: https://www.npmjs.com/package/cordova-plugin-service-worker (zadnji dostop: avgust 2017). [51] André Karwath, Lemon, dostopno na: https://commons.wikimedia.org/wiki/File:Lemon.jpg (zadnji dostop: avgust 2017). [52] Myrabella, Coulommiers Lait Cru, dostopno na: https://commons.wikimedia.org/wiki/File:Coulommiers_lait_cru.jpg (zadnji dostop: avgust 2017).. 33.

(44) 34.

(45) 35.

(46) 36.

(47) 37.

(48)

No results found