Implementing an Offline First Web Application

Loading...
Thumbnail Image
Journal Title
Journal ISSN
Volume Title
Perustieteiden korkeakoulu | Master's thesis
Date
2017-12-11
Department
Major/Subject
Computer Science
Mcode
SCI3042
Degree programme
Master’s Programme in Computer, Communication and Information Sciences
Language
en
Pages
44 + 1
Series
Abstract
The Internet usage of mobile and tablet devices combined overtook desktop for the first time in October 2016. Unlike desktop computers, which usually have physical access to the Internet, mobile devices' connectivity is not guaranteed even in a highly connected area such as a large city in a well-developed country. Dead zones can be encountered in many situations such as while commuting to work, standing in the wrong corner of a room, or attending an event with a large crowd. Despite this, web developers often build apps under the assumption that everyone has a fast and fixed broadband connection. Unfortunately, this leads to a horrible user experience for many people. A recent design paradigm, offline-first, aims to tackle this issue by focusing on the offline experience first. The goal of this thesis is to investigate how a web application can be implemented with the offline-first mindset. The study consists of two parts: a literature study, which reviews the browser features that enable offline web applications, and a constructive study, in which a prototype web application using the offline-first approach is designed and implemented. The prototype developed in this thesis presents solutions to problems such as accessing the application offline, persisting application data to the browser storage and synchronizing the local state to a remote server. However, it was revealed that there are a lot more aspects to consider in the scope of offline web applications. Challenges including conflict management and background synchronization were left to be solved in the future. Nevertheless, the prototype should still serve as a valuable reference to anyone who wants to build an offline-first web application.

Mobiili- ja tablettilaitteet ohittivat Internetin käytössä työpöytälaitteet ensimmäistä kertaa lokakuussa 2016. Toisin kuin pöytätietokoneet, joilla on yleensä fyysinen pääsy Internetiin, mobiililaitteiden yhteyden laatu ei ole taattu edes alueilla, joilla on korkea matkaviestinverkon kuuluvuus, kuten kehittyneiden maiden suurissa kaupungeissa. Katvealueisiin voi törmätä monissa tilanteissa, kuten työmatkalla, väärässä huoneen nurkassa seisoessa tai suureen yleisötapahtumaan osallistuessa. Tästä huolimatta web-kehittäjät usein rakentavat sovelluksia sillä oletuksella, että kaikilla on nopea ja kiinteä laajakaistayhteys. Valitettavasti tämä johtaa kamalaan käyttökokemukseen monien ihmisten kohdalla. Yhteydetön tila ensin on tuore suunnittelumalli, joka pyrkii ratkaisemaan tämän ongelman keskittymällä ensin yhteydettömän tilan kokemukseen. Tämän diplomityön tavoitteena on tutkia, kuinka web-sovelluksen voi toteuttaa yhteydetön tila ensin -ajattelutavalla. Tutkimus koostuu kahdesta osasta: kirjallisuustutkimuksessa käydään läpi yhteydettämän tilan web-sovellusten mahdollistamat selainominaisuudet; konstruktiivisessa tutkimuksessa suunnitellaan ja toteutetaan prototyyppi web-sovelluksesta käyttäen yhteydetön tila ensin -lähestymistapaa. Tässä diplomityössä kehitetty prototyyppi esittää ratkaisut ongelmiin, kuten miten sovellukseen pääsee yhteydettömässä tilassa, miten sovelluksen tiedot voi säilöä selaimen tallennustilaan ja miten selaimen paikallisen tilan voi synkronoida etäpalvelimelle. Tutkimuksessa kuitenkin paljastui, että yhteydettömän tilan web-sovelluksiiin littyy paljon enemmänkin seikkoja, joita tulee ottaa huomioon. Haasteet mukaan lukien konfliktien hallinta ja taustasynkronointi jäivät jatkotutkimuksissa ratkaistavaksi. Kaikesta huolimatta prototyyppi voi silti olla arvokas esimerkki kelle tahansa, joka haluaa rakentaa web-sovelluksen yhteydetön tila ensin.
Description
Supervisor
Vuorimaa, Petri
Thesis advisor
Herttua, Timo
Keywords
offline-first, web application, single-page application, synchronization
Other note
Citation