PWA sovellus - mikä se on?

Viime vuosina verkkosovellusten maailmassa on ollut paljon esillä uudenlainen sovellusmuoto, jota kutsutaan PWA:ksi. Mitä tuo termi tarkoittaa ja miksi se on hyödyllinen niin käyttäjille, kuin myös niitä tarjoaville yrityksille?

Tässä artikkelissa syvennytään edellämainittuihin asioihin ja käydään läpi mm. se, miksi yrityksen kannattaa ottaa PWA käyttöön.

Sisällysluettelon kautta voit hypätä suoraan mielenkiintoisimpaan kohtaan.

  1. Mikä on PWA?

  2. PWA:n hyödyt käyttäjälle

  3. Miksi yrityksen kannattaa ottaa käyttöön PWA?

  4. Missä tilanteissa natiivisovellus on parempi kuin PWA?

  5. Kuinka PWA toimii?

Mikä on PWA?

PWA (Progressive Web Application) eli progressiivinen verkkosovellus on verkkosovellustyyppi, joka yhdistää verkkosivuston ja perinteisen natiivisovelluksen parhaat puolet. Se tarjoaa käyttäjälle sovelluksen, joka on ulkoasultaan kuin verkkosivu tai -sovellus, mutta toimii kuten perinteinen natiivisovellus. Natiivisovelluksella tarkoitetaan sovellusta, joka on ladattavissa sovelluskaupasta, kuten Google Playsta tai Apple App Storesta.

PWA on suunniteltu tarjoamaan käyttäjilleen saumattoman ja responsiivisen käyttökokemuksen eri laitteilla ja erilaisissa verkko-olosuhteissa, esim. sellaisilla alueilla, joilla internet-yhteys on hitaampi tai tarjoamaan ominaisuuksia, joita verkkosovellukset eivät normaalisti tarjoa. PWA on myös erinomainen ja kustannustehokas tapa rakentaa oma mobiilisovellus yritykselle.

PWA:t kuuluvat olennaisesti sovelluskehitykseen, jossa on pyrkimyksenä parantaa sovellusten suorituskykyä ja käyttäjäkokemusta eri alustoilla. PWA-sovellus on alustariippumaton, eli se toimii jokaisella alustalla samalla tavalla. Esimerkkejä PWA:ta hyödyntävistä yrityksistä on Spotify, Pinterest ja Yle (Yle Areena).

Käsittelemme tässä artikkelissa vielä myöhemmin, milloin natiivisovellus on parempi vaihtoehto kuin PWA, mutta ennen sitä syvennytään vielä lisää PWA:n maailmaan.

PWA:n hyödyt käyttäjälle

PWA:t tarjoavat käyttäjilleen erilaisia hyötyjä, verrattuna esim. natiivisovellukseen. Alla listattuna muutamia:

Käyttökokemus

PWA tarjoaa erinomaisen käyttökokemuksen riippumatta laitteesta tai verkkoyhteyden laadusta. Ne latautuvat nopeasti ja tarjoavat sujuvan ja verkkosivumaisen käyttötuntuman, vaikka toimivatkin ladattavan sovelluksen tavoin.

Ei vaadi sovelluksen lataamista

PWA-sovellusta ei tarvitse etsiä ja ladata sovelluskaupasta vaan sen pystyy lisäämään kätevästi verkkosivustolta suoraan laitteen aloitusnäytölle. Sovellus myös päivittyy automaattisesti, ilman käyttäjän erillistä toimintaa. Käyttäjällä on siis aina uusin versio käytössä.

Offline-käyttömahdollisuus

PWA-sovellukset toimivat myös offline-tilassa sekä alueilla, joissa on huono internet-yhteys. Jos asiakas menettää yhteyden internetiin, hän voi silti jatkaa sovelluksen käyttöä. Sovellus tallentaa tiedot välimuistiin ja muistuttaa asiakasta jatkamaan käyttöä, kun internet-yhteys palaa.

Tallennustilan säästyminen

Koska sovellusta ei ladata puhelimeen, ei se myöskään vie samalla tavalla laitteen tallennustilaa. Pikakuvakkeen lisääminen vaatii vain murto-osan tallennustilaa siitä, mitä kokonaisen sovelluksen lataaminen.

PWA tuo siis käyttäjille joustavamman ja nopeamman tavan käyttää sovelluksia. Se ei vaadi käyttäjältä asennus- ja päivitystoimenpiteitä sillä sovelluksen voi lisätä helposti aloitusnäytölle ja se päivittyy automaattisesti itse.

Miksi yrityksen kannattaa ottaa käyttöön PWA?

PWA mahdollistaa yrityksille tehokkaan ja modernin tavan parantaa läsnäoloaan verkossa tai asiakaskokemusta. Se voi myös tarjota kilpailuedun tai erottuvuutta yrityksen omalla toimialalla.

Käydään vielä läpi tarkemmin, minkälaisia syitä PWA:n käyttöönottoon on yritykselle:

Parempi tavoittavuus

PWA toimii eri laitteilla ilman erillistä asennusta, jolloin myös mobiili- ja tablettikäyttäjät pääsevät käyttämään sovellusta vaivattomammin. Tällöin sovelluksen etsiminen, asentaminen ja mahdollinen rekisteröityminen jää kokonaan pois. Käyttäjät pystyvät myös jakamaan PWA:ssa olevaa sisältöä helposti linkkeinä tuttavilleen tai sosiaaliseen mediaan, joka helpottaa uusia asiakkaita löytämään ja käyttämään sovellusta.

Sovelluskaupan välttäminen

Mobiilisovelluksella erottuminen sovelluskaupoissa voi olla haastavaa, sillä sovelluksia on tarjolla miljoonia. PWA-sovellusta ei tarvitse etsiä sovelluskaupasta. Sovellukset vievät kaiken lisäksi vähemmän tilaa, kuin natiivisovellukset. Myös uusien päivitysten julkaisu on joustavampaa, kun uutta sovellusversiota ei tarvitse hyväksyttää sovelluskaupan kautta.

Sovelluksen ylläpidon helppous

Natiivisovelluksia tehtäessä kehitetään joka alustalle oma sovelluksensa. Kun sovellusta kehitetään täytyy päivitykset ajaa jokaiseen alustaan erikseen. Tämän jälkeen käyttäjän täytyy vielä päivittää sovellusversionsa, jotta päivitys tulee voimaan. Koska PWA on käytännössä kuin verkkosivusto, sen kohdalla ei tarvita vastaavanlaisia erikseen ladattavia versiopäivityksiä. Sovellus päivittää itsensä automaattisesti taustalla ja vierailija saa muutokset heti käyttöönsä seuraavalla vierailukerralla.

Parempi hakukonenäkyvyys

PWA:t ovat hakukoneiden silmissä tavallinen verkkosivu, jonka sisältö on löydettävissä Googlesta. Tämä edesauttaa yrityksesi hakukonenäkyvyyden parantamisessa ja se voi kasvattaa verkkosivukävijöiden määrää entisestään. Hakukonenäkyvyys onkin yksi suuri etu verrattaessa PWA:ta sovelluskaupasta ladattavaan sovellukseen.

Push-ilmoitukset

Sähköpostien sijasta asiakkaita voi lähestyä personoiduilla push-ilmoituksilla, jos vertaamme PWA:ta normaaliin verkkosovellukseen. Push-ilmoitukset ovat tehokkaampi tapa lisätä käyttäjien sitoutumista, kuin sähköpostit. Ne tarjoavat myös yhden lisäkanavan pitämään asiakkaat ajan tasalla mm. yrityksen tarjoamista palveluista ja tarjouksista.

Kuvan lähde: https://www.simicart.com/blog/progressive-web-apps-vs-native/

Missä tilanteissa natiivisovellus on parempi kuin PWA?

Vaikka PWA-sovelluksilla on monia etuja, niin natiivisovellus saattaa silti olla parempi vaihtoehto joissain tilanteissa. Lähtökohtaisesti, jos tavoitteena on rakentaa monipuolinen, pitkäikäinen ja usein käytettävä sovellus, voi natiivisovellus olla tällöin parempi ratkaisu.

Tarkastellaan vielä aihetta tarkemmin.

Käytön tiheys

Natiivisovellus saattaa olla parempi vaihtoehto, kun tavoitteena on luoda päivittäin käytettävä sovellus. Tällaisessa tapauksessa käyttäjät hyötyvät natiivisovelluksen suorituskyvystä ja optimoinnista. Jos taas sovellusta käytetään harvoin, kuten esimerkiksi hotellin varaamiseen tarkoitettu sovellus, natiivisovelluksen lataaminen, asentaminen ja rekisteröityminen voivat koitua turhauttaviksi käyttäjille, jotka haluavat vain nopeasti ja kertaluontoisesti edistää asiaansa.

Luotettavuus

Jos tarkoituksena on rakentaa tavoitteellisesti uskottavaa ja vahvaa sovellusta, voi natiivisovellus olla parempi vaihtoehto. Vaikka PWA:n hyötyjä on se, että sillä voi välttää sovelluksen etsimisen ja asentamisen sovelluskaupasta, niin sovelluskaupassa oleminen voi olla monille myös merkki siitä, että sovellus on luotettava ja uskottava.

Koko laitteen tehot irti

Natiivisovellukset on optimoitu hyödyntämään käyttöjärjestelmien ominaisuuksia tehokkaasti, joka näkyy myös positiivisesti sovelluksen suorituskyvyssä erityisesti raskaampien sovellusten kohdalla.

Ominaisuudet

Natiivisovellus on parempi vaihtoehto, jos sovelluksen on tarkoitus käyttää aktiivisesti esim. Bluetoothia, sijaintia tai NFC-yhteyttä. Myös PWA-sovellukset pystyvät yleensä hyödyntämään näitä ominaisuuksia, mutta pitää ottaa huomioon, että kaikki selaimet eivät tue kaikkia laitteen ominaisuuksia. Näissä tilanteissa natiivisovellus on parempi, koska natiivisovelluksella on yleensä paremmat mahdollisuudet hyödyntää laitteiston kaikkia ominaisuuksia sekä erilaisia rajapintoja.

Tietoturvallisuus

Tietyissä tapauksissa, kuten verkkopankkisovelluksissa ja terveydenhuoltoon liittyvissä sovelluksissa, natiivisovellukset voivat tarjota vahvempia tietoturvallisuuteen liittyviä ominaisuuksia, kuten esim. paremmat salausvaihtoehdot ja paremmat käyttöoikeuksien hallinnat. Sovelluskaupat myös vaativat niihin lisättäviltä natiivisovelluksilta tietyn turvallisuustason, joka myös lisää sovellusten luotettavuutta. PWA-sovellukset puolestaan voivat olla yhtä haavoittuvaisia kuin verkkosivut.

Olemme vertailleet blogissamme myös natiivisovelluksen ja normaalin verkkosovelluksen eroja. Lue lisää täältä.

Kuinka PWA toimii?

PWA-sovellukset rakennetaan käyttämällä standardeja web-teknologioita, kuten HTML:ää, CSS:ää ja JavaScriptiä ja ne ovat yhteensopivia kaikkien yleisimpien verkkoselainten kanssa, mukaan lukien Google Chrome, Mozilla Firefox, Apple Safari ja Microsoft Edge.

Loppujen lopuksi PWA:t ja normaalit verkkosovellukset eivät eroa paljoa toisistaan, mutta PWA-sovellusta varten tulee määrittää vielä erillisiä asioita toimiakseen järkevästi kotinäytöllä avattavana sovelluksena. Lyhyesti, PWA:n toiminta perustuu kolmeen keskeiseen teknologiaan:

Service workerit

Service workerit (tai palvelunvälittäjät) ovat eräänlaisia komentosarjoja, jotka toimivat verkkosovelluksen taustalla erillään verkkosovelluksesta. Ne toimivat välityspalvelimena verkkosovelluksen ja verkon välillä, mikä mahdollistaa mm. sovelluksen offline-käytön sekä push-notifikaatioiden välittämisen.

Manifest-tiedosto

Manest-tiedosto määrittää PWA:n ominaisuudet, kuten nimen, käynnistysikonin, URL-osoitteen ja display-asetukset, eli toimiiko PWA selaimessa vai onko se omillaan esiintyvä koko näytön vievä sovellus.

Lyhykäisyydessään tämä tiedosto siis auttaa selaimia ymmärtämään, kuinka verkkosovelluksen tulee näkyä käyttäjille.

App shell

App shell on tiedosto, joka sisältää pienimmän tarvittavan tiedon, jotta käyttöliittymä toimii. Se sisältää sovelluksen rungon ja suunnitelman ulkoasusta. Tämä osa sovelluksesta latautuu ensimmäisenä, mikä mahdollistaa käyttäjille nopean latausajan.

App shell on mahdollista tallentaa välimuistiin palvelunvälittäjien toimesta, jotta sovelluksen käyttöliittymää voi hyödyntää myös offline-tilassa.

Kuvitellaan esimerkiksi, että haluamme rakentaa PWA-uutissovelluksen. App shellin avulla varmistetaan, että sovelluksen käyttöliittymä sekä tärkeimmät elementit, kuten uutisotsikot ja -artikkelit, latautuvat käyttäjälle nopeasti hänen käyttöönsä. Manifest-tiedoston avulla määritetään kyseisen sovelluksen erilaiset ominaisuudet, nimi ja käynnistysikoni laitteelle. Service workerit puolestaan varmistavat, että käyttäjät voivat lukea uutisia myös ilman verkkoyhteyttä sekä vastaanottaa push-notifikaatioita.

Yhteenveto

Kertauksena vielä lyhyt oppimäärä siihen, mikä oikeastaan on PWA:

  1. Verkkosivu tai verkkosovellus, jonka käyttö muistuttaa tavallista natiivisovellusta.

  2. PWA:ssa tiedot pysyvät välimuistissa, joka mahdollistaa sovelluksen nopeat latausajat

  3. Sovellus osaa tallentaa välimuistiin asioita ja synkronoi ne takaisin pilveen, mikäli yhteys katkeaa käytön aikana

  4. PWA:ta ei tarvitse ladata erikseen sovelluskaupasta, vaan sen pystyy lisäämään suoraan verkkosivuilta laitteen aloitusnäytöllle, säästäen samalla myös laitteen tilaa

  5. PWA:n kautta pystyy lähettämään push-notifikaatioita, joilla voidaan korvata perinteiset sähköposti-ilmoitukset tai tuoda uusi tiedotuskanava rinnalle

PWA:ta ei tarvitse rakentaa kerralla, vaan sen voi ottaa käyttöön portaittain. Sen pystyy rakentamaan esim. olemassa olevan verkkosivuston rinnalle, jolloin aloituskustannukset ovat paljon pienemmät, kuin esim. natiivisovelluksen rakentamisessa.

Pohditko voisiko yrityksesi hyötyä PWA:sta? Ota yhteyttä ja pohditaan yhdessä!