Izrada progresivnih web aplikacija

master's thesis

• Author: Anastasija Jezernik
• Mentor: Ivica Nakić (mentor)
• Committee member: Ivica Nakić (predsjednik povjerenstva)
• Committee member: Franka Miriam Bruckler (član povjerenstva)
• Committee member: Ilja Gogić (član povjerenstva)
• Committee member: Tina Bosner (član povjerenstva)
• Granter: University of Zagreb; Faculty of Science; (Department of Mathematics); Zagreb
• Defense date and country: 2020-02-28, Croatia
• Scientific / art field, discipline and subdiscipline: NATURAL SCIENCES; Mathematics

Abstract

PWA (Progressive Web Application) je naziv za web aplikaciju koja je prilagođena za korištenje na internet preglednicima i na mobilnim uređajima, neovisno o platformi. PWA su brze i pouzdane, čak i na sporim mrežama ili potpuno offline. Mogućnosti koje aplikacija nudi ipak ovise o uređaju: najnoviji uređaj će moći koristiti sve funkcionalnosti, a stariji uređaj samo dio, odakle i dolazi naziv ``progresivna" aplikacija. Neke od tehnologija koje se mogu koristiti za kreiranje PWA su: React, Preact, Angular, Vue, Ionic. Koristeći React alat Create React App koji u samo nekoliko koraka kreira osnovnu aplikaciju i njenom nadogradnjom razvijamo aplikaciju za seminare na Matematičkom odsjeku Prirodoslovno matematičkog fakulteta. U aplikaciji je omogućena prijava korisnika, dodavanje novih predavanja i članova, generiranje izvještaja i slanje emaila. Prikazujemo osnovne koncepte korištenja React biblioteke na isječcima koda iz aplikacije (renderiranje, routing, state, props, event handling). Kao bazu podataka i sustav autentifikacije koristimo Firebase. Mogućnost instaliranja aplikacije na mobilni uređaj ostvarujemo manifest datotekom, a offline rad i spremanje u priručnu memoriju generiranim service workerom. Na kraju analiziramo aplikaciju alatom Lighthouse koji potvrđuje da je naša aplikacija zaista PWA.

Abstract (english)

PWA (Progressive Web Application) is a name for a web application that can be used on different web browsers and mobile devices, not depending on the platform or the device. PWAs are fast, reliable and work on slow networks and even offline. Functionalities that an app offers do depend on the device: the newest mobile would have an access to all functionalities, while an older device could only use its portion, hence the word “progressive” application. Some of the technologies used in creating a PWA are: React, Preact, Angular, Vue, Ionic. Using a React tool Create React App we can create a basic application in just a few steps, which we then rework to create an application for seminars that are held at the Department of Mathematics of the Faculty of Science. We offer user login, ability to create new lectures, add new members, generate a report and send emails. Using snippets of the app code we explain some main React concepts (rendering, routing, state, props, event handling). We use Firebase tools to handle our database and authentication. App installation is enabled by a manifest file, while offline work and caching is enabled by a service worker. In the end, we use a tool called Lighthouse which confirms that our created app is in fact a PWA.

• Keywords: PWA; Progressive Web Application; web aplikacija; mobilni uređaj
• Keywords (english): PWA; Progressive Web Application; web application; mobile device
• Language: croatian
• URN:NBN: urn:nbn:hr:217:788207
• 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-09-15 10:36:03