Sijaintiperusteisen progressiivisen web-sovelluksen kehittäminen
Palomaa, Tapio (2020)
Lataukset:
Palomaa, Tapio
2020
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2020110122022
https://urn.fi/URN:NBN:fi:amk-2020110122022
Tiivistelmä
Verkkoselainten valmistajat ovat viime vuosina kehittäneet tuotteitaan siten, että web-sovellukset voivat hyödyntää ominaisuuksia, jotka ennen olivat vain natiivien mobiilisovellusten ulottuvilla. Esimerkiksi laitteen sijaintitieto tai mahdollisuus käyttää laitteen kameraa kuuluvat nykyään mobiililaitteiden verkkoselainten perusominaisuuksiin.
Nykyaikainen web-sovellus on mahdollista asentaa laitteen aloitusnäytölle, josta se voidaan avata koko ruudun näkymässä natiivien mobiilisovellusten tapaan. Web-sovellukset voivat lähettää push-ilmoituksia ja ajaa ohjelmakoodia taustalla selaimen ollessa suljettuna. Lisäksi web-kehittäjät voivat säädellä aiempaa yksityiskohtaisemmin selaimen välimuistin käyttöä, mikä mahdollistaa valittujen ominaisuuksien käytön myös ilman verkkoyhteyttä. Näitä uusia ominaisuuksia hyödyntäviä web-sovelluksia kutsutaan progressiivisiksi web-sovelluksiksi.
Opinnäytetyön kehittämistehtävänä oli kehittää mobiililaitteille suunnattu sijaintiperusteinen progressiivinen web-sovellus. Käyttäjän ympäristöstä luotiin kolmiulotteinen karttanäkymä verkkoselaimen Geolocation-rajapinnan, OpenStreetMapin kuvailudataa tarjoavan OverPass API -palvelun sekä 3D-grafiikan esittämiseen tarkoitetun three.js-kirjaston avulla. Käyttäjä voi selata sovelluksessa ympäristöön lisättyjä kuva- ja tekstisisältöjä koskettamalla karttanäkymän vuorovaikutteisia kohteita. Sovellukseen luotiin manifest- ja Service Worker -tiedostot, jotka mahdollistavat progressiivisten web-sovellusten ominaisuuksien lisäämisen. Progressiivisten web-sovellusten ominaisuuksien toteutumista arvioitiin Google Lighthouse -palvelun avulla.
Kehittämistehtävässä hyödynnettiin kahta progressiivisten web-sovellusten ominaisuutta: sovellus voidaan asentaa laitteen aloitusnäytölle ja osa toiminnosta on saatavilla myös ilman verkkoyhteyttä. Aloitusnäytölle asennettu sovellus voidaan avata koko ruudun näkymässä. Tällöin selaimen käyttöliittymä ja sen omat kosketuseleisiin perustuvat toiminnot eivät häiritse kolmiulotteisen karttanäkymän käyttöä. Käyttäjän sijainnin perusteella haetut alueet tallennetaan latauksen yhteydessä selaimen välimuistiin, mikä mahdollistaa sovelluksen käytön ilman verkkoyhteyttä kyseisten alueiden osalta. Ennen progressiivisten web-sovellusten ominaisuuksien toteutusta sovellus läpäisi viisi kohtaa Google Lighthouse -palvelun progressiivisten web-sovellusten ominaisuuksia mittaavasta osiosta. Niiden lisäämisen jälkeen sovellus läpäisi kyseisen osion kaikki 13 kohtaa. Modern web browsers make it possible for web applications to implement features that were previously available only in native mobile applications. For example, access to device camera and the device’s geolocation are now basic features in all browsers.
It is now possible to install a web application to the mobile device home screen. The application can then be opened in various screen modes, including a full screen mode. Modern web applications can send push notifications and synchronize data in the background when the browser is not running. Web developers also have fine-grained access to the browser cache, which makes it possible to store parts of the application to be available even in offline mode. The web applications that use some of the features above are called progressive web applications.
The goal for this thesis was to develop a geolocation based progressive web application for mobile devices. A three-dimensional map was created using the browser’s Geolocation API, OpenStreetMap data from Overpass API and three.js library for rendering 3D graphics in the browser. The user can browse text and image content by selecting interactive objects and markers on the map. The application includes a manifest file and a Service Worker file that make it possible to add progressive web application features to an application. The application was audited with Google Lighthouse.
Two progressive web application features were chosen for implementation: installation to home screen and selected offline features. The user can install the application on their home screen. From the home screen the application will open in a full screen mode, hiding the browser’s user interface and preventing the browser’s gesture-based navigation from interfering with map navigation. The data downloaded from Overpass API is stored in the browser cache, which makes it possible to visit previously downloaded areas in offline mode. Before the addition of progressive web application features the application passed five tests in the Google Lighthouse section for progressive web applications. After implementing the features, the application passed all 13 tests in the section.
Nykyaikainen web-sovellus on mahdollista asentaa laitteen aloitusnäytölle, josta se voidaan avata koko ruudun näkymässä natiivien mobiilisovellusten tapaan. Web-sovellukset voivat lähettää push-ilmoituksia ja ajaa ohjelmakoodia taustalla selaimen ollessa suljettuna. Lisäksi web-kehittäjät voivat säädellä aiempaa yksityiskohtaisemmin selaimen välimuistin käyttöä, mikä mahdollistaa valittujen ominaisuuksien käytön myös ilman verkkoyhteyttä. Näitä uusia ominaisuuksia hyödyntäviä web-sovelluksia kutsutaan progressiivisiksi web-sovelluksiksi.
Opinnäytetyön kehittämistehtävänä oli kehittää mobiililaitteille suunnattu sijaintiperusteinen progressiivinen web-sovellus. Käyttäjän ympäristöstä luotiin kolmiulotteinen karttanäkymä verkkoselaimen Geolocation-rajapinnan, OpenStreetMapin kuvailudataa tarjoavan OverPass API -palvelun sekä 3D-grafiikan esittämiseen tarkoitetun three.js-kirjaston avulla. Käyttäjä voi selata sovelluksessa ympäristöön lisättyjä kuva- ja tekstisisältöjä koskettamalla karttanäkymän vuorovaikutteisia kohteita. Sovellukseen luotiin manifest- ja Service Worker -tiedostot, jotka mahdollistavat progressiivisten web-sovellusten ominaisuuksien lisäämisen. Progressiivisten web-sovellusten ominaisuuksien toteutumista arvioitiin Google Lighthouse -palvelun avulla.
Kehittämistehtävässä hyödynnettiin kahta progressiivisten web-sovellusten ominaisuutta: sovellus voidaan asentaa laitteen aloitusnäytölle ja osa toiminnosta on saatavilla myös ilman verkkoyhteyttä. Aloitusnäytölle asennettu sovellus voidaan avata koko ruudun näkymässä. Tällöin selaimen käyttöliittymä ja sen omat kosketuseleisiin perustuvat toiminnot eivät häiritse kolmiulotteisen karttanäkymän käyttöä. Käyttäjän sijainnin perusteella haetut alueet tallennetaan latauksen yhteydessä selaimen välimuistiin, mikä mahdollistaa sovelluksen käytön ilman verkkoyhteyttä kyseisten alueiden osalta. Ennen progressiivisten web-sovellusten ominaisuuksien toteutusta sovellus läpäisi viisi kohtaa Google Lighthouse -palvelun progressiivisten web-sovellusten ominaisuuksia mittaavasta osiosta. Niiden lisäämisen jälkeen sovellus läpäisi kyseisen osion kaikki 13 kohtaa.
It is now possible to install a web application to the mobile device home screen. The application can then be opened in various screen modes, including a full screen mode. Modern web applications can send push notifications and synchronize data in the background when the browser is not running. Web developers also have fine-grained access to the browser cache, which makes it possible to store parts of the application to be available even in offline mode. The web applications that use some of the features above are called progressive web applications.
The goal for this thesis was to develop a geolocation based progressive web application for mobile devices. A three-dimensional map was created using the browser’s Geolocation API, OpenStreetMap data from Overpass API and three.js library for rendering 3D graphics in the browser. The user can browse text and image content by selecting interactive objects and markers on the map. The application includes a manifest file and a Service Worker file that make it possible to add progressive web application features to an application. The application was audited with Google Lighthouse.
Two progressive web application features were chosen for implementation: installation to home screen and selected offline features. The user can install the application on their home screen. From the home screen the application will open in a full screen mode, hiding the browser’s user interface and preventing the browser’s gesture-based navigation from interfering with map navigation. The data downloaded from Overpass API is stored in the browser cache, which makes it possible to visit previously downloaded areas in offline mode. Before the addition of progressive web application features the application passed five tests in the Google Lighthouse section for progressive web applications. After implementing the features, the application passed all 13 tests in the section.