Progresivne web-aplikacije

master's thesis

• Author: Maja Nekić
• Mentor: Zvonimir Bujanović (mentor)
• Committee member: Zvonimir Bujanović (predsjednik povjerenstva)
• Committee member: Miljenko Marušić (član povjerenstva)
• Committee member: Nikola Sandrić (član povjerenstva)
• Committee member: Saša Singer (član povjerenstva)
• Granter: University of Zagreb; Faculty of Science; (Department of Mathematics); Zagreb
• Defense date and country: 2019-09-23, Croatia
• Scientific / art field, discipline and subdiscipline: NATURAL SCIENCES; Mathematics

Abstract

U ovom radu smo s teorijskog stajališta objasnili što su to progresivne web-aplikacije (PWA) te smo na konkretnom primjeru pokazali kako web-aplikaciju pretvoriti u progresivnu. Na početku smo objasnili što su uslužne skripte, najvažniji dio PWA. One omogućavaju trenutno pokretanje PWA, bez obzira na veličinu sadržaja aplikacije te na stanje mreže. To se postiže predmemoriranjem ključnih resursa pomoću kojeg možemo eliminirati ovisnost o mreži i na taj način zajamčiti odaziv i pouzdan doživljaj za korisnike. Naveli sam neke od najčešće korištenih obrazaca predmemoriranja te objasnili što je to IndexedDB (lokalna baza podataka unutar preglednika) i kako se njome koristiti. Dvije nove funkcionalnosti koje smo prikazali su tzv. push obavijesti i pozadinska sinkronizacija. One omogućavaju aplikaciji da, čak i nakon što je korisnik napusti, ona nastavi komunikaciju s istim te da sve potrebne informacije zaista budu dostavljene poslužitelju, čak i u slučaju privremenog gubitka internetske veze. Pisanjem manifest datoteke, postigli smo da se PWA može instalirati na korisnikov mobilni uređaj te smjestiti na početni zaslon. Instalacija se odvija bez potrebe za trgovinom aplikacija, direktno s web-lokacije na kojoj se ta web-aplikacija prikazuje. U svrhu demonstracije da aplikacija korektno radi u stanju kada ima pristup mreži i kada nema, uveli smo identifikatore stanja koji reagiraju na događaje promjene stanja mreže i to prikazuju.

Abstract (english)

In this thesis, we have explained from the theoretical point of view what are progressive web applications (PWAs) and have shown in a concrete example how to transform a web application into a progressive web application. At the beginning we explained what are service workers, the most important part of PWA. They enable instant launch of PWAs, regardless of the size of the application’s content and network status. That is achieved by caching key resources. Caching allows us to eliminate network dependency and thus ensures a responsive and trustworthy user experience. We explained some of the most frequently used caching patterns. Also, we explained what is IndexedDB (local database inside the browser) and how to use it. Two new features we have highlighted are push notifications and background sync. Push notifications allow the app to continue communicating with the user even after he leaves the app. Background sync ensures that all necessary data is actually delivered to the server even in the event of temporary Internet connection loss. By writing a manifest file, we have achieved that the PWA can be installed on the user’s mobile device and placed on the home screen. Installation takes place without the user ever visiting the app store, directly from the site where that web app is running. For the purpose of demonstrating that the application works correctly regardless of whether the user has network access or not, we have introduced status identifiers that respond to network changing events and display it.

• Keywords: progresivne web-aplikacije; PWA; uslužne skripte
• Keywords (english): progressive web applications; PWA; service workers
• Language: croatian
• URN:NBN: urn:nbn:hr:217:558022
• Study programme: Title: Computer Science and Mathematics; Study programme type: university; Study level: graduate; Academic / professional title: magistar/magistra računarstva i matematike (magistar/magistra računarstva i matematike)
• Type of resource: Text
• File origin: Born digital
• Access conditions: Open access
• Created on: 2020-02-13 13:30:44