Web-sovelluksen tietojen tallennus offline-tilassa ja synkronointi palvelimelle

Abstract

Web-sovelluksia käytetään nykyaikana yhä enemmän kannettavilla laitteilla, kuten älypuhelimilla ja tableteilla. Tällöin joudutaan käyttämään usein mobiiliverkkoja, mikä voi tuottaa ongelmia esimerkiksi matkustettaessa tai syrjäisemmillä seuduilla liikuttaessa. Tällöin verkkoyhteydestä riippuvaisten web-sovellusten käytettävyys kärsii. Tässä työssä on tarkoitus tarkastella, kuinka tämä ongelma voidaan ratkaista offline-toiminnallisuuden ja tietojen synkronoinnin avulla. Tietojen synkronointi palvelimelle on tärkeässä osassa tukemassa offline-toiminnallisuutta, jotta muutokset saadaan myös palvelimelle. Web-sovelluksen offline-toiminnallisuuden mahdollistamiseksi täytyy selaimeen pystyä tallentamaan sekä sovelluksen vaatimia resursseja että sovelluksen käsittelemää dataa. Sovelluksen resurssit ovat useimmiten staattisia tiedostoja, joiden sisältö muuttuu harvoin. Sovelluksen data puolestaan muuttuu myös offline-käytön aikana, joten sitä pitää pystyä myös päivittämään offline-tilassa. Selaimeen täytyy siis tallentaa hyvin monenlaisia tietoja, joten tässä työssä tutkitaankin erilaisia vaihtoehtoja siihen tarkoitukseen.

Tässä diplomityössä toteutettu toiminnallisuus on tehty osana asiakasprojektia, jossa on tarkoituksena tarjota offline-toiminnallisuus maatiloille tehtävien työterveyshuollon tilakäyntien havaintojen kirjaamista varten. Tilakäyntien aikana tietoja voi muokata useampi henkilö, jolloin tietojen synkronoinnissa täytyy varautua myös mahdollisiin konfliktitilanteisiin. Koska maatilat voivat mahdollisesti sijaita hyvinkin syrjäisillä alueille maaseuduille, ei haluta olla pelkästään verkkoyhteyden varassa kirjauksia tehtäessä. Tästä syystä tilakännillä tehtävien havaintojen kirjaaminen on tarkoitus mahdollistaa myös offline-tilassa. Lisäksi tiedot täytyy synkronoida palvelimelle, jotta saadaan tarvittavat tiedot myös järjestelmään.

Lopputuloksena oli service workereita ja redux-offlinea hyödyntävä web-sovellus, jonka käyttö onnistuu ilman verkkoyhteyttä. Lisäksi tietojen synkronointi palvelimelle tapahtuu automaattisesti verkkoyhteyden ollessa jälleen saatavilla. Sovelluksen staattisten resurssien tallentaminen välimuistiin toteutettiin service workereilla. Näiden avulla sovelluksen suorittamiseen vaadittavat tiedostot saatiin helposti tallennettua pyyntö-vastaus-pareina selaimeen, josta niitä voidaan tarjota käyttäjän saataville, mikäli verkkoyhteyttä ei ole saatavilla. Sovelluksen datan tallentaminen ja tilan hallinta toteutettiin Redux-kirjaston avulla. Offline-toiminnallisuutta helpottamaan käytettiin lisäksi redux-offlinea, jonka avulla sovelluksen tilan tallentaminen paikallisesti localStorageen saatiin automatisoitua. Lopuksi tietojen synkronoinnissa toteutettiin yksinkertainen konfliktien havaitseminen ja ratkaisu siten, että viimeisimpänä tallennetut muutokset jäävät voimaan.